I want to create ECG animation just like in a below video.
https://www.youtube.com/watch?v=Q_gzl_E7jmw
Below is my current code :
<style>
svg {
height: 600px;
width: 1200px;
}
path {
stroke: #259798;
stroke-width: 2px;
fill: none;
stroke-dasharray: 630, 500;
stroke-dashoffset: 0;
animation: pulse 4s infinite linear;
&:nth-child(1) {
stroke: #b7b4c2;
}
}
@keyframes pulse {
0% {
stroke-dashoffset: 1130;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 600 300">
<path d="
M17.902,114.475h26.949c2.296,0,12.876-10.182,20.063-10.182
c7.186,0,10.83,10.182,12.576,10.182h18.266l7.187,10.779l7.485-100.91l5.091,114.984l6.887-24.554h24.41
c3.239,0,14.816-16.769,20.206-16.769s11.08,16.47,13.475,16.47c2.845,0,26.665,0,26.665,0l27.757,0
c2.296,0,12.875-10.181,20.062-10.181c7.186,0,10.831,10.181,12.577,10.181h18.266l7.187,10.779l7.485-100.91l5.091,114.984
l6.888-24.555h24.41c3.24,0,14.817-16.768,20.207-16.768s11.079,16.469,13.474,16.469c2.845,0,26.666,0,26.666
c2.297,0,12.877-10.181,20.063-10.181s10.829,10.181,12.576,10.181h18.265l7.188,10.779l7.485-100.91l5.092,114.984l6.887-24.555
h24.409c3.238,0,14.816-16.768,20.206-16.768s11.08,16.469,13.476,16.469c2.845,0,26.664,0,26.664,0h27.815
c2.296,0,12.875-10.181,20.063-10.181c7.187,0,10.829,10.181,12.576,10.181h18.265l7.188,10.779l7.486-100.91l5.091,114.984
l6.887-24.555h24.409c3.238,0,14.816-16.768,20.206-16.768s11.079,16.469,13.476,16.469c2.846,0,26.664,0,26.664,0
"/>
</svg>
we have used velocityjs for the ie support, i need this ecg will come up and then fade out while disappearing from the div. like the video youtube link which I post above.
I have created the Fiddler:
https://jsfiddle.net/mannanbahelim/zwnc5db1/
I just want Fade-out effect at the end of line as in a video.
If you have a regular background, you could do it in CSS. You'll need some calculations to find proper coordinates, but if it's regular, you can set masks with animation that will give you wanted effect.
First you set your svg without dash animation:
path {
stroke: #259798;
stroke-width: 2px;
fill: none;
}
You then add 4 masks (you could have more) that will go from left to right. One that completely masks the path, the following with an opacity gradient to get the fade out effect you want.
<div class="mask">
</div>
<div class="mask">
</div>
<div class="mask">
</div>
<div class="mask">
</div>
.mask {
position: absolute;
width: 352.66px;
height: 290px;
left: -308px;
top: 24.34px;
animation: mask 4s infinite linear;
}
.mask:nth-child(2n) {
background: rgba(243, 245, 246, 1);
}
.mask:nth-child(2n + 1) {
background: linear-gradient(to right, rgba(243, 245, 246, 1), rgba(243, 245, 246, 0));
}
Width of each mask needs to be calculated, it should be half the width of your path. You can calculate it using :
var path = document.getElementById('path');
var pathBox = path.getBoundingClientRect();
This will also give you where the animation should start - it should be minus the width of each mask plus the left coordinate of your svg. And also where it should end - 3 times the width of each mask + left coordinate of your svg, so that the width travelling is 4 times each mask:
console.log(
'width of each mask:', pathBox.width / 2, '\n',
'height of each mask:', pathBox.top + pathBox.height, '\n',
'left start of the animation:', pathBox.left - (pathBox.width / 2), '\n',
'right end of the animation:', pathBox.left + (pathBox.width / 2 * 3)
)
This will allow to define the mask animation:
@keyframes mask {
0% {
left: -308px;
}
100% {
left: 1101px;
}
}
You then set a delay for each mask (this could be in the CSS as well):
for (var i = 0; i < masks.length; i++) {
masks[i].style.animationDelay = i + "s";
};
You also need a mask just for the first run, so that the svg is masked on opening:
#initial {
position: absolute;
width: 754px;
height: 290px;
left: 754px;
top: 24.34px;
background: rgba(243, 245, 246, 1);
animation: initialMask 4s 1 linear;
animation-delay: 0s;
}
@keyframes initialMask {
0% {
left: 50px;
}
100% {
left: 750px;
}
}
And you get the effect: https://jsfiddle.net/j46kxvj5/4/