← All elements
<div class="hb"></div>About this animation
An ECG trace drawn with a clip-path polygon, with a bright scanning pulse that sweeps along it.
How it works
A clip-path polygon traces an ECG line with spikes. The element background is a wide gradient with a bright red band, and moving background-position makes a pulse appear to travel across the line.
Ways to customise it
- Edit the polygon for another waveform.
- Change the reds.
- Change the 2.2s sweep.
Good to know
It is decorative. If it represents health data, give the values in text. The polygon scales with its box.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.