Here's a quick explanation of what you see here. No JavaScript was harmed in the coding of this project.
The EKG unit requires just one external SVG file 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).
-
The first animation CSS animation simply loops the green gradient from left to right. An overlaid mask creates the EKG line shape.
-
A second animation treats each ‘heartbeat’ as a separate sprite and switches them – but the switch only happens in the dark section of the loop when it can’t be seen (the little numbers reveal the switch moment).
-
Even though each heartbeat uses exactly the same CSS animation (i.e. 163524), we can make them all appear different by offsetting their timings with negative animation-delays. Offsetting their beginnings obscures an otherwise obvious pattern.
-
It's important to remember that, although each 'heartbeat' unit can be as graphically unique and different as we like, the left and right edges MUST return to the same Y-axis point on each unit. In short, the graphics need to 'handshake' on their touching edges. That takes some tricky graphics making.
-
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.
Next, I should try to build a little organic jitter into that readout number. It's too stable at the moment. Haven't thought about how yet..
It’s built for Chrome but should work anywhere.
(The little numbers at the base are just to aid the explanation)
MIT License
Copyright (c) 2019 Alex M Walker
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.