ghobot

supple colombo

bipolar leftist css goblin

30 or 40 years old

music pod: @wgnb
morrowind npcs: @morrowind-npcs


last.fm listening


terminal-index
@terminal-index

I was aiming for a kind of vibrating waveform effect, which I think I mostly got. I know that this doesn't look like much but took a surprising amount of code to generate all of which is ready for future reuse, thankfully.

This is a 75-node path with 10 frames of animation. Each frame specifies the updated position of all 75 nodes on the path. Doing this by hand would've felt like the equivalent to working on an illuminated manuscript.

What I ended up doing was rewriting my code that finds the vertices of a regular polygon based on the number of vertices and the radius and center of the inscribing circle. I used that to generate vertices for 75-sided polygons with a few different radii and the same center. Then I wrote more code to pick the coordinates from a random radius at each vertex for each frame. After that it was just a matter of a bit more code to paste everything together into CSS then save as an SVG.


You must log in to comment.

in reply to @terminal-index's post:

Yeah! Because of the weird route I'm taking to learning CSS, it was one of the early discoveries for me but it's so labor intensive for paths with more than just a handful of vertices or more than a couple keyframes that I didn't really get to applying it until I automated it.