Post

We’ve entered this phase of the blog post.

@jakearchibald.com plz fix

This was almost certainly a skill issue on my part. 😅

Here are the horrors if you want to have a go at figuring it out: github.com/samwho/visua...

The animations consistently didn’t play for me, but only on Firefox and only after the site been deployed. I couldn’t reproduce it locally, despite the code being identical. Leads me to believe it’s a timing problem, though I never did try network slowness emulation in the dev tools 🤔

huh yeah. Did Chrome iOS have the same issue?

No.

Huh, yeah, that's very weird, since it's the same rendering engine.

Please do not judge me too harshly for my sins. This was my first use of clip paths and SMIL. I’m 100% sure it’s possible to make this animation without JS but I couldn’t figure out how to do the arc animation in CSS or SMIL 🫠

Is this the hero image on samwho.dev/big-o/? I’d love to take a whack at a zero-js impl but heading in to the office now. For my first try, I’d look at animate stroke-dashoffset

It is, yeah. The lines are straightforward, it’s the O I was struggling with.