Okay, we’ve got about a day left for competition entries but no contenders yet.
I’ve built a Pure CSS solution that I’m going to post here as inspiration. I’m going to refine it a little more, but I thought I’d get something live first.
See the Pen Pure CSS 'organic-looking' EKG Animation by Alex (@alexmwalker) on CodePen.
Notes:
- The EKG unit only uses one external SVG and two separate animation loops.
- There are 6 different ‘EKG heartbeats’ provided by the SVG graphic. I’m switching their positions to make them look randomized (I’ve added tiny numbers at the bottom to make the order switching more obvious).
- One CSS animation loops the green gradient from left to right. An overlaying mask creates the EKG line.
- A second animation treats each ‘heartbeat’ as a sprite and switches them – but only in the dark section of the loop when it can’t be seen.
- Even though each heartbeat uses exactly the same CSS animation, we can make them all appear different by offsetting their timings with negative
animation-delays. - All animation is controlled by a single Sass variable at the top of the CSS window -
$animation-time: 5s;. Changing that number will alter the big readout number and the EKG speed. - It’s built for Chome but should work anywhere.