Made this thing about two weeks ago while I was learning about SVGs and SVG animations, and haven’t actually posted about it on here. Type in a name, and the site will “randomly” generate a character from several different parts (i.e. hair, shirt, pants, etc) and have a different color for each part type. Well when I say “randomly”, I mean it’ll use the name as half of the seed to the pseudo-random number generator. The other half of the seed is the current date, which makes it so that the character changes every day.
So how does this work? SVGs are essentially XML files where each tag specifies a shape or group of shapes, and the tag attributes control the properties of the shape such as the line thickness and color. Each character part has its own SVG tag, so it’s simply a matter of combining different SVGs and overlapping them.
Colors are chosen randomly within a certain range (light colors), but sometimes a character part shares the same color as another part! For example, there’s a lot of different hair parts, but each of them has to be the same color or it’d look weird. One way to address this is to use CSS and assign a CSS class to each character part, and set a style for that class so they’ll all be the same color. I did this originally but decided I wanted the SVG to work without needing external stylesheets. I assigned each character part a class, and every time a character part was added to the SVG, the php script checks if the class already exists in the SVG. If so, it just reuses the color of the existing part. If not, it assigns a random color based on the seed.
The idea isn’t very complicated, but I thought it was a pretty cool way to learn how to use/generate SVG files on the fly. I also got to reuse the simple random name generator I wrote a long time ago.
Walf|EE 