5
Had to choose between pure CSS and SVG for a clock face animation
Wanted a ticking second hand. Pure CSS was cleaner code. Only 15 lines. But the rotation math for 60 ticks got brutal. SVG path data looked messy but the timing was dead simple. Went with SVG in the end. Took longer to write but the animation was butter smooth. Anyone else hit this wall and pick the uglier solution?
3 comments
Log in to join the discussion
Log In3 Comments
adams827d ago
Ugh yeah, I've been there too. Pure CSS sounds great on paper until you try to animate 60 individual ticks. I went the other way though stuck with CSS and used conic-gradient for the ticks. Looked fine but the second hand timing was always a little off. SVG is probably the right call even if it feels messier.
7
riley5957d ago
@adams82 sounds like your clock ran on "close enough" time. Classic CSS.
3
lily_sullivan827d ago
Yeah that conic-gradient trick works okay for static clocks but the second hand timing drift drove me nuts too. I tried using CSS animations with steps() for the ticks but the browser handled it differently on chrome vs firefox and the timing was always a few ms off. Ended up going with a canvas approach instead of SVG actually @adams82 because I needed the clock to update smoothly without lag. Canvas lets you draw the ticks and hands with requestAnimationFrame which keeps everything synced way better than CSS transitions ever did. Only downside is you lose accessibility but for a decorative clock it worked out fine.
9