SVG ECG Animation: Using Filter
HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70">
<defs>
<clipPath id="clipPath">
<rect x="-70" y="0" width="70" height="70">
<animate
attributeName="x" attributeType="XML"
from="-70" to="70"
begin="1s" dur="2s"
fill="freeze" repeatCount="indefinite"/>
</rect>
</clipPath>
<clipPath id="clipPath2">
<rect x="-70" y="0" width="70" height="70">
<animate
attributeName="x" attributeType="XML"
from="-70" to="70"
begin="2s" dur="2s"
fill="freeze" repeatCount="indefinite"/>
</rect>
</clipPath>
<clipPath id="clipPath3">
<rect x="-70" y="0" width="70" height="70">
<animate
attributeName="x" attributeType="XML"
from="-70" to="70"
begin="2s" dur="2s"
fill="freeze" repeatCount="indefinite"/>
</rect>
</clipPath>
</defs>
<path d="m0,50
l22,0 l5,-5 l5,15 l3,-40
l5,40 l6,-15 l5,5 l18, 0"
class='path1' clip-path='url(#clipPath)'/>
<path d="m0,50
l18,0 l5,-5 l5,15 l5,-40
l5,40 l5,-15 l5,5 l22, 0"
class='path2' clip-path='url(#clipPath2)'/>
<path d="m0,50
15,15,15,15"
class='path2' clip-path='url(#clipPath3)'/>
<svg>
CSS
svg{
background-color: black;
width: 200px;
}
path {
stroke: #16FF43;
fill: none;
stroke-width: 1;
}