How to enable the click to all looping images separately - javascript

I creating the blog page, i looping the like button images according the total count of post using PHP example:(Facebook like button) here i'm facing the issues is php while loop is working but when i click first post image only working with click animation if i click second post like button also first post button only working i can't understand what is the issues. Please advice me or give solution how to fix this issues. i attached my code down.
svg {
cursor: pointer;
overflow: visible;
width: 60px;
margin: 0;
margin-bottom: -45px;
}
svg #heart {
transform-origin: center;
animation: animateHeartOut .3s linear forwards;
}
svg #main-circ {
transform-origin: 29.5px 29.5px;
}
#checkbox-ins {
display: none;
}
#checkbox-ins:checked+label svg #heart {
transform: scale(0.2);
fill: #ddd810;
animation: animateHeart .3s linear forwards .25s;
}
#checkbox-ins:checked+label svg #main-circ {
transition: all 2s;
animation: animateCircle .3s linear forwards;
opacity: 1;
}
#checkbox-ins:checked+label svg #grp1 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp1 #oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp1 #oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp2 #oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp2 #oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp3 #oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp3 #oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp4 #oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp4 #oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp5 #oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp5 #oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp6 #oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp6 #oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp7 #oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp7 #oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s opacity .3s;
}
#keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #ddd810;
}
55% {
transform: scale(11);
opacity: 1;
fill: #ddd810;
}
65% {
transform: scale(12);
opacity: 1;
fill: #ddd810;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: 0;
}
}
#keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<?php
while($getPerPost=mysqli_fetch_assoc($result01))
{
extract($getPerPost);
?>
<input type="checkbox" id="checkbox-ins"/>
<label for="checkbox-ins">
<svg id="heart-svg<?php echo $p_id; ?>" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" id="heart" fill="#AAB8C2"/> <circle id="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)"> <circle id="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle id="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)"> <circle id="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)"> <circle id="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle id="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)"> <circle id="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle id="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp5" opacity="0" transform="translate(14 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp4" opacity="0" transform="translate(35 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp1" opacity="0" transform="translate(24)"> <circle id="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle id="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>
<?php
}
?>


You shouldn't change your svg class, instead you should generate unique classes for inputs and link them with labels.
Also you should change all id selectors to class selectors, since your input isn't alone anymore.
Here's updated fiddle with two working buttons:
svg {
cursor: pointer;
overflow: visible;
width: 60px;
margin: 0;
margin-bottom: -45px;
}
svg #heart {
transform-origin: center;
animation: animateHeartOut .3s linear forwards;
}
svg #main-circ {
transform-origin: 29.5px 29.5px;
}
.checkbox-ins {
display: none;
}
.checkbox-ins:checked+label svg #heart {
transform: scale(0.2);
fill: #ddd810;
animation: animateHeart .3s linear forwards .25s;
}
.checkbox-ins:checked+label svg #main-circ {
transition: all 2s;
animation: animateCircle .3s linear forwards;
opacity: 1;
}
.checkbox-ins:checked+label svg #grp1 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp1 #oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp1 #oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp2 #oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 #oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp3 #oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp3 #oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp4 #oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp4 #oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp5 #oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp5 #oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp6 #oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp6 #oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp7 #oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp7 #oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s opacity .3s;
}
#keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #ddd810;
}
55% {
transform: scale(11);
opacity: 1;
fill: #ddd810;
}
65% {
transform: scale(12);
opacity: 1;
fill: #ddd810;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: 0;
}
}
#keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<input type="checkbox" class="checkbox-ins" id="input1"/>
<label for="input1">
<svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" id="heart" fill="#AAB8C2"/> <circle id="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)"> <circle id="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle id="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)"> <circle id="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)"> <circle id="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle id="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)"> <circle id="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle id="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp5" opacity="0" transform="translate(14 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp4" opacity="0" transform="translate(35 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp1" opacity="0" transform="translate(24)"> <circle id="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle id="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>
<input type="checkbox" class="checkbox-ins" id="input2"/>
<label for="input2">
<svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" id="heart" fill="#AAB8C2"/> <circle id="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)"> <circle id="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle id="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)"> <circle id="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)"> <circle id="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle id="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)"> <circle id="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle id="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp5" opacity="0" transform="translate(14 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp4" opacity="0" transform="translate(35 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp1" opacity="0" transform="translate(24)"> <circle id="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle id="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>


As #Elijah Ellanski touches on in his answer, the issue is related to your use of id's.
You are not supposed to have multiple instances of the same id, they need to be unique. By refactoring your code (both html and css) to use classes instead and using unique id's where necessary, you can solve this problem.
Here is my suggestion:
svg {
cursor: pointer;
overflow: visible;
width: 60px;
margin: 0;
margin-bottom: -45px;
}
svg .heart {
transform-origin: center;
animation: animateHeartOut .3s linear forwards;
}
svg .main-circ {
transform-origin: 29.5px 29.5px;
}
.checkbox-ins {
display: none;
}
.checkbox-ins:checked+label svg .heart {
transform: scale(0.2);
fill: #ddd810;
animation: animateHeart .3s linear forwards .25s;
}
.checkbox-ins:checked+label svg .main-circ {
transition: all 2s;
animation: animateCircle .3s linear forwards;
opacity: 1;
}
.checkbox-ins:checked+label svg .grp1 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp1 .oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp1 .oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp2 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp2 .oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp2 .oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp3 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp3 .oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp3 .oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp4 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp4 .oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp4 .oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp5 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp5 .oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp5 .oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp6 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp6 .oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp6 .oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp7 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp7 .oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp7 .oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp2 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp3 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp4 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp5 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp6 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp7 {
opacity: 1;
transition: .1s opacity .3s;
}
#keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #ddd810;
}
55% {
transform: scale(11);
opacity: 1;
fill: #ddd810;
}
65% {
transform: scale(12);
opacity: 1;
fill: #ddd810;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: 0;
}
}
#keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<input type="checkbox" id="checkbox-ins<?php echo $p_id; ?>" class="checkbox-ins"/>
<label for="checkbox-ins<?php echo $p_id; ?>">
<svg id="heart-svg<?php echo $p_id; ?>" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g class="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" class="heart" fill="#AAB8C2"/> <circle class="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g class="grp7" opacity="0" transform="translate(7 6)"> <circle class="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle class="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g class="grp6" opacity="0" transform="translate(0 28)"> <circle class="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle class="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g class="grp3" opacity="0" transform="translate(52 28)"> <circle class="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle class="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g class="grp2" opacity="0" transform="translate(44 6)"> <circle class="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle class="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g class="grp5" opacity="0" transform="translate(14 50)"> <circle class="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle class="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g class="grp4" opacity="0" transform="translate(35 50)"> <circle class="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle class="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g class="grp1" opacity="0" transform="translate(24)"> <circle class="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle class="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>
Working example: https://jsfiddle.net/a4sb7kv6/


svg {
cursor: pointer;
overflow: visible;
width: 60px;
margin: 0;
margin-bottom: -45px;
}
svg #heart {
transform-origin: center;
animation: animateHeartOut .3s linear forwards;
}
svg #main-circ {
transform-origin: 29.5px 29.5px;
}
.checkbox-ins {
display: none;
}
.checkbox-ins:checked+label svg #heart {
transform: scale(0.2);
fill: #ddd810;
animation: animateHeart .3s linear forwards .25s;
}
.checkbox-ins:checked+label svg #main-circ {
transition: all 2s;
animation: animateCircle .3s linear forwards;
opacity: 1;
}
.checkbox-ins:checked+label svg #grp1 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp1 #oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp1 #oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp2 #oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 #oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp3 #oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp3 #oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp4 #oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp4 #oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp5 #oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp5 #oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp6 #oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp6 #oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp7 #oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp7 #oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s opacity .3s;
}
#keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #ddd810;
}
55% {
transform: scale(11);
opacity: 1;
fill: #ddd810;
}
65% {
transform: scale(12);
opacity: 1;
fill: #ddd810;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: 0;
}
}
#keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<?php
while($getPerPost=mysqli_fetch_assoc($result01))
{
extract($getPerPost);
?>
<input type="checkbox" id="checkbox-ins" class="checkbox-ins<?php echo $p_id; ?>"/>
<label for="checkbox-ins<?php echo $p_id; ?>">
<svg id="heart-svg<?php echo $p_id; ?>" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" id="heart" fill="#AAB8C2"/> <circle id="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)"> <circle id="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle id="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)"> <circle id="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)"> <circle id="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle id="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)"> <circle id="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle id="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp5" opacity="0" transform="translate(14 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp4" opacity="0" transform="translate(35 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp1" opacity="0" transform="translate(24)"> <circle id="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle id="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>
<?php
}
?>

Related

I need svg cracks to appear when hitting with a pickaxe

I'm a beginner, and I'm creating an animation using svg in which a pickaxe hits a block, and after that cracks should appear, starting from the point where the pickaxe itself hit, in a random downward direction. I would be glad if you could help.
<svg class="main">
<g id="pickaxe">
<path d="M 130 200 Q280 5, 440 200 L 440 200 Q280 80 130 200" fill="#808080" stroke-width="1" />
<rect x="270" y="140" width="20" height="250" fill="#8B4513" />
</g>
</svg>
<svg class="secondary">
<rect x="0" y="0" width="200" height="200" fill="white" />
</svg>
<svg>
<polyline points="0,200 100,125 0,75 100,0" fill="none" stroke="white" />
</svg>
<button id="button" onclick="toggle()">hit!</button>
body {
background-color: black;
}
button {
position: absolute;
left: 65%;
top: 55%;
}
.main {
position: absolute;
left: 1250px;
top: 80px;
width: 560px;
height: 450px;
}
.secondary {
position: absolute;
left: 1110px;
top: 500px;
width: 200px;
height: 200px;
}
.pickaxe {
transition: transform .3s;
animation: move .3s infinite forwards;
animation-play-state: paused;
}
#keyframes hit {
from {
transform: rotate(0deg);
transform-origin: center 400px;
}
to {
transform: rotate(-60deg);
transform-origin: center 400px;
}
}
#keyframes swing {
from {
transform: rotate(-60deg);
transform-origin: center 400px;
}
to {
transform: rotate(0deg);
transform-origin: center 400px;
}
}
.hit {
animation-name: hit;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.swing {
animation-name: swing;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
window.isSmall = true;
window.toggle = () => {
const pickaxe = document.getElementById("pickaxe");
if (isSmall) {
pickaxe.classList.remove("swing");
pickaxe.classList.add("hit");
innerText = 'raise!';
} else {
pickaxe.classList.remove("hit");
pickaxe.classList.add("swing");
innerText = 'hit!';
}
isSmall = !isSmall;
}
I'm a beginner and don't really understand how to create random svg elements, I'd be glad if you could help

pause/resume svg animation on android webview

I want to pause/resume SVG animation on Android WebView using JavaScript.
tried on jsfiddle but not working either http://jsfiddle.net/ysbo5zdw/1/
/assets/svg/trial.html
<!DOCTYPE html>
<html>
<head>
<title>dynamic Image</title>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="cloudDrizzleSunFillAlt" class="climacon climacon_cloudDrizzleSunFillAlt" x="0px" y="0px"
viewBox="15 15 70 70" enable-background="new 15 15 70 70" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
svg{
shape-rendering: geometricPrecision
}
g, path, circle, rect{
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 12s;
-webkit-animation-direction: normal;
-moz-transform-origin: 50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 12s;
-moz-animation-direction: normal;
-o-transform-origin: 50% 50%;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 12s;
-o-animation-direction: normal;
transform-origin: 50% 50%;
transform-box: fill-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 12s;
animation-direction: normal;
}
.climacon_componentWrap-sun_cloud {
-webkit-animation-name: behindCloudMove, rotate;
-moz-animation-name: behindCloudMove, rotate;
-o-animation-name: behindCloudMove, rotate;
animation-name: behindCloudMove, rotate;
-webkit-animation-iteration-count: 1, infinite;
-moz-animation-iteration-count: 1, infinite;
-o-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-timing-function: ease-out, linear;
-moz-animation-timing-function: ease-out, linear;
-o-animation-timing-function: ease-out, linear;
animation-timing-function: ease-out, linear;
-webkit-animation-delay: 0, 3s;
-moz-animation-delay: 0, 3s;
-o-animation-delay: 0, 3s;
animation-delay: 0, 3s;
-webkit-animation-duration: 3s, 12s;
-moz-animation-duration: 3s, 12s;
-o-animation-duration: 3s, 12s;
animation-duration: 3s, 12s;
}
.climacon_component-stroke_sunSpoke {
fill-opacity: 0;
-webkit-animation-name: fillOpacity, scale;
-moz-animation-name: fillOpacity, scale;
-o-animation-name: fillOpacity, scale;
animation-name: fillOpacity, scale;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-iteration-count: 1, infinite;
-moz-animation-iteration-count: 1, infinite;
-o-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-delay: 3s, 0;
-moz-animation-delay: 3s, 0;
-o-animation-delay: 3s, 0;
animation-delay: 3s, 0;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.climacon_component-stroke_sunSpoke:nth-child(even) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
.climacon_component-stroke_drizzle {
fill-opacity: 0;
-webkit-animation-name: drizzleFall, fillOpacity2;
-moz-animation-name: drizzleFall, fillOpacity2;
-o-animation-name: drizzleFall, fillOpacity2;
animation-name: drizzleFall, fillOpacity2;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.climacon_component-stroke_drizzle:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
.climacon_component-stroke_drizzle:nth-child(2) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.climacon_component-stroke_drizzle:nth-child(3) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#-webkit-keyframes rotate{
0%{
-webkit-transform: rotate(0);
}
100%{
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate{
0%{
-moz-transform: rotate(0);
}
100%{
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate{
0%{
-o-transform: rotate(0);
}
100%{
-o-transform: rotate(360deg);
}
}
#keyframes rotate{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
#-webkit-keyframes scale{
0%{
-webkit-transform: scale(1,1)
}
100%{
-webkit-transform: scale(.5,.5)
}
}
#-moz-keyframes scale{
0%{
-moz-transform: scale(1,1)
}
100%{
-moz-transform: scale(.5,.5)
}
}
#-o-keyframes scale{
0%{
-o-transform: scale(1,1)
}
100%{
-o-transform: scale(.5,.5)
}
}
#keyframes scale{
0%{
transform: scale(1,1)
}
100%{
transform: scale(.5,.5)
}
}
#-webkit-keyframes behindCloudMove {
0% {
-webkit-transform: translateX(-1.75px) translateY(1.75px);
}
100% {
-webkit-transform: translateX(0) translateY(0);
}
}
#-moz-keyframes behindCloudMove {
0% {
-moz-transform: translateX(-1.75px) translateY(1.75px);
}
100% {
-moz-transform: translateX(0) translateY(0);
}
}
#-o-keyframes behindCloudMove {
0% {
-o-transform: translateX(-1.75px) translateY(1.75px);
}
100% {
-o-transform: translateX(0) translateY(0);
}
}
#keyframes behindCloudMove {
0% {
transform: translateX(-1.75px) translateY(1.75px);
}
100% {
transform: translateX(0) translateY(0);
}
}
#-webkit-keyframes drizzleFall {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(21px);
}
}
#-moz-keyframes drizzleFall {
0% {
-moz-transform: translateY(0);
}
100% {
-moz-transform: translateY(21px);
}
}
#-o-keyframes drizzleFall {
0% {
-o-transform: translateY(0);
}
100% {
-o-transform: translateY(21px);
}
}
#keyframes drizzleFall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(21px);
}
}
#-webkit-keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#-moz-keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#-o-keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#-webkit-keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#-moz-keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#-o-keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
</style>
<g class="climacon_iconWrap climacon_iconWrap-cloudDrizzleSunFillAlt" transform="matrix(1, 0, 0, 1, -8.226453, -0.543087)">
<g class="climacon_componentWrap climacon_componentWrap-sun climacon_componentWrap-sun_cloud">
<g class="climacon_componentWrap climacon_componentWrap_sunSpoke">
<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M72.174,30.3c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L72.174,30.3z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M43.892,30.3l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C45.939,31.081,44.673,31.081,43.892,30.3z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M43.892,52.925c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L43.892,52.925z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M72.174,52.925l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C70.125,52.144,71.391,52.144,72.174,52.925z" style="fill: rgb(87, 248, 7);"/>
</g>
<g class="climacon_wrapperComponent climacon_wrapperComponent-sunBody">
<circle class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody" cx="58.033" cy="41.612" r="11.999" style="fill: rgb(87, 248, 7);"/>
<circle class="climacon_component climacon_component-fill climacon_component-fill_sunBody" fill="#FFFFFF" cx="58.033" cy="41.612" r="7.999"/>
</g>
</g>
<g class="climacon_wrapperComponent climacon_wrapperComponent-drizzle">
<path class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-left" id="Drizzle-Left_1_" d="M56.969,57.672l-2.121,2.121c-1.172,1.172-1.172,3.072,0,4.242c1.17,1.172,3.07,1.172,4.24,0c1.172-1.17,1.172-3.07,0-4.242L56.969,57.672z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-middle" d="M50.088,57.672l-2.119,2.121c-1.174,1.172-1.174,3.07,0,4.242c1.17,1.172,3.068,1.172,4.24,0s1.172-3.07,0-4.242L50.088,57.672z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-right" d="M43.033,57.672l-2.121,2.121c-1.172,1.172-1.172,3.07,0,4.242s3.07,1.172,4.244,0c1.172-1.172,1.172-3.07,0-4.242L43.033,57.672z" style="fill: rgb(87, 248, 7);"/>
</g>
<g class="climacon_componentWrap climacon_componentWrap_cloud">
<path class="climacon_component climacon_component-stroke climacon_component-stroke_cloud" d="M43.945,65.639c-8.835,0-15.998-7.162-15.998-15.998c0-8.836,7.163-15.998,15.998-15.998c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12c0,6.625-5.371,11.998-11.998,11.998C57.168,65.639,47.143,65.639,43.945,65.639z" style="fill: rgb(87, 248, 7);"/>
<path class="climacon_component climacon_component-fill climacon_component-fill_cloud" d="M59.943,61.639c4.418,0,8-3.582,8-7.998c0-4.417-3.582-8-8-8c-1.601,0-3.082,0.481-4.334,1.291c-1.23-5.316-5.973-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.999c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z" style="fill: rgb(255, 255, 255);"/>
</g>
</g>
<script type="text/javascript">
function pauseAnim(){
document.getElementById('cloudDrizzleSunFillAlt').pauseAnimations();
}
</script>
</svg>
</body>
</html>
MainActivity.java
svgWebView = (WebView) findViewById(R.id.svg_web_view);
svgWebView.setWebViewClient(new WebViewClient());
svgWebView.getSettings().setJavaScriptEnabled(true);
svgWebView.loadUrl("file:///android_asset/svg/trial.html");
svgWebView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
svgWebView.loadUrl("javascript:pauseAnim();");
return false;
}
});
javascript is inside SVG element but it is not working.
According to John Ktejik answered Can svg animations be suspended without loosing accumulative information? but no luck
My problem is I dont want to change SVG file as there are lot of SVGs I need to modify and It will be huge task.
I want to use something like SVGroot.pauseAnimations() documented on https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement or any work around
This answer here Pause an external SVG animation sounds working but I dont know how to implement it in Android!

I would suggest you put
the animation start/stop functionality in different css classes:
svg.animation-on * {
animation-iteration-count: infinite;
}
svg.animation-off * {
animation-iteration-count: 0;
}
remove any other animation-iteration-count settings from existing stylesheet
Use javascript to set the appropriate class animation-on or animation off to the top level <svg> node

Change SVG fill animation height depending on CSS class

I am using the following SVG and CSS code to animate the fill level of an SVG shape.
.st0 {
fill: none;
stroke: #000000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 5;
}
#logo2 {
width: 150px !important;
height: 150px !important;
position: relative;
margin-top: -100px;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
z-index: -1;
margin-bottom: -50px;
}
#banner .fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
<div>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
</div>
What I am trying to and failing is to change the height of the "water level" animation.
So the preferred outcome would be to change the height of the animation with a CSS class, so I can animate 75% or 25% fill level. I tried to change the height via CSS but it gets ignored.

By modifying the animation played you can change the level it will raise up to.
By changing the animation played by adding an extra class you can decide which one to play.
I modified the wave animation to stop because it got me seasick ish.
Key points:
I changed the animation style by adding an extra class that needs to be used together with the fill class. This will enable you to choose which class to use for which animation.
.fill.fill-25 {
animation-name: fillAction25;
}
.fill.fill-50 {
animation-name: fillAction50;
}
.fill.fill-75 {
animation-name: fillAction75;
}
Then I changed the translation height of the animations for the relevant keyframes. You could can also use a calc method there calc(155px / 100 * 25) to calculate custom percentages.
#keyframes fillAction25 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 115px);
}
}
#keyframes fillAction50 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 85px);
}
}
#keyframes fillAction75 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 45px);
}
}
.st0 {
fill: none;
stroke: #000000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 5;
}
#logo2 {
width: 150px !important;
height: 150px !important;
position: relative;
margin-top: -100px;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
z-index: -1;
margin-bottom: -50px;
}
.fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
.fill.fill-25 {
animation-name: fillAction25;
}
.fill.fill-50 {
animation-name: fillAction50;
}
.fill.fill-75 {
animation-name: fillAction75;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: 10;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
hr {
margin-top:50px;
}
#keyframes fillAction25 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 115px);
}
}
#keyframes fillAction50 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 85px);
}
}
#keyframes fillAction75 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 45px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
<div>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-25">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
<hr>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-50">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
<hr>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-75">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
</div>
Use with calc method
.st0 {
fill: none;
stroke: #000000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 5;
}
#logo2 {
width: 150px !important;
height: 150px !important;
position: relative;
margin-top: -100px;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
z-index: -1;
margin-bottom: -50px;
}
.fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
.fill.fill-25 {
animation-name: fillAction25;
}
.fill.fill-50 {
animation-name: fillAction50;
}
.fill.fill-75 {
animation-name: fillAction75;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: 10;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
hr {
margin-top:50px;
}
#keyframes fillAction25 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, calc(155px / 100 * 25));
}
}
#keyframes fillAction50 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, calc(155px / 100 * 50));
}
}
#keyframes fillAction75 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, calc(155px / 100 * 75));
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
<div>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-25">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
<hr>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-50">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
<hr>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-75">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
</div>

twitter like button animation using css [duplicate]

This question already has an answer here:
Single Post like button animation is working but multiple post mean first post button only working
(1 answer)
Closed 4 years ago.
I found the animation code in web and when i click the image it's play the animation again to stating part. I want to do when i click the image it will play the animation and stop with animation again click it should be reset the image, anyone give me a feedback to how to do that..
.like-btn-svg {
width: 80px;
height: 100px;
position: absolute;
left: 25px;
bottom: -112px;
transform: translate(-50%, -50%);
background: url(https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png) no-repeat;
background-position: 0 0;
animation: fave-like-btn-svg 1s steps(28);
cursor: pointer;
}
.like-btn-svg:hover {
background-position: -2800px 0;
transition: background 1s steps(28);
}
#keyframes fave-like-btn-svg {
0% {
background-position: 2800px 0;
}
100% {
background-position: -2800px 0;
}
}
<div class="like-btn-svg"></div>

Pure CSS and SVG
svg {
cursor: pointer;
overflow: visible;
width: 60px;
margin: 20px;
}
svg #heart {
transform-origin: center;
animation: animateHeartOut .3s linear forwards;
}
svg #main-circ {
transform-origin: 29.5px 29.5px;
}
.checkbox {
display: none;
}
.checkbox:checked+label svg #heart {
transform: scale(0.2);
fill: #E2264D;
animation: animateHeart .3s linear forwards .25s;
}
.checkbox:checked+label svg #main-circ {
transition: all 2s;
animation: animateCircle .3s linear forwards;
opacity: 1;
}
.checkbox:checked+label svg #grp1 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox:checked+label svg #grp1 #oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox:checked+label svg #grp1 #oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox:checked+label svg #grp2 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox:checked+label svg #grp2 #oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox:checked+label svg #grp2 #oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox:checked+label svg #grp3 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox:checked+label svg #grp3 #oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox:checked+label svg #grp3 #oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox:checked+label svg #grp4 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox:checked+label svg #grp4 #oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox:checked+label svg #grp4 #oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox:checked+label svg #grp5 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox:checked+label svg #grp5 #oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox:checked+label svg #grp5 #oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox:checked+label svg #grp6 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox:checked+label svg #grp6 #oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox:checked+label svg #grp6 #oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox:checked+label svg #grp7 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox:checked+label svg #grp7 #oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox:checked+label svg #grp7 #oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox:checked+label svg #grp2 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox:checked+label svg #grp3 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox:checked+label svg #grp4 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox:checked+label svg #grp5 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox:checked+label svg #grp6 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox:checked+label svg #grp7 {
opacity: 1;
transition: .1s opacity .3s;
}
#keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #DD4688;
}
55% {
transform: scale(11);
opacity: 1;
fill: #D46ABF;
}
65% {
transform: scale(12);
opacity: 1;
fill: #CC8EF5;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #CC8EF5;
stroke-width: .5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #CC8EF5;
stroke-width: .2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #CC8EF5;
stroke-width: .1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #CC8EF5;
stroke-width: 0;
}
}
#keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">
<svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg">
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z" id="heart" fill="#AAB8C2"/>
<circle id="main-circ" fill="#E2264D" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)">
<circle id="oval1" fill="#9CD8C3" cx="2" cy="6" r="2"/>
<circle id="oval2" fill="#8CE8C3" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)">
<circle id="oval1" fill="#CC8EF5" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#91D2FA" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)">
<circle id="oval2" fill="#9CD8C3" cx="2" cy="7" r="2"/>
<circle id="oval1" fill="#8CE8C3" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)">
<circle id="oval2" fill="#CC8EF5" cx="5" cy="6" r="2"/>
<circle id="oval1" fill="#CC8EF5" cx="2" cy="2" r="2"/>
</g>
<g id="grp5" opacity="0" transform="translate(14 50)">
<circle id="oval1" fill="#91D2FA" cx="6" cy="5" r="2"/>
<circle id="oval2" fill="#91D2FA" cx="2" cy="2" r="2"/>
</g>
<g id="grp4" opacity="0" transform="translate(35 50)">
<circle id="oval1" fill="#F48EA7" cx="6" cy="5" r="2"/>
<circle id="oval2" fill="#F48EA7" cx="2" cy="2" r="2"/>
</g>
<g id="grp1" opacity="0" transform="translate(24)">
<circle id="oval1" fill="#9FC7FA" cx="2.5" cy="3" r="2"/>
<circle id="oval2" fill="#9FC7FA" cx="7.5" cy="2" r="2"/>
</g>
</g>
</svg>
</label>
<input type="checkbox" class="checkbox" id="checkbox_2" />
<label for="checkbox_2">
<svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg">
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z" id="heart" fill="#AAB8C2"/>
<circle id="main-circ" fill="#E2264D" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)">
<circle id="oval1" fill="#9CD8C3" cx="2" cy="6" r="2"/>
<circle id="oval2" fill="#8CE8C3" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)">
<circle id="oval1" fill="#CC8EF5" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#91D2FA" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)">
<circle id="oval2" fill="#9CD8C3" cx="2" cy="7" r="2"/>
<circle id="oval1" fill="#8CE8C3" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)">
<circle id="oval2" fill="#CC8EF5" cx="5" cy="6" r="2"/>
<circle id="oval1" fill="#CC8EF5" cx="2" cy="2" r="2"/>
</g>
<g id="grp5" opacity="0" transform="translate(14 50)">
<circle id="oval1" fill="#91D2FA" cx="6" cy="5" r="2"/>
<circle id="oval2" fill="#91D2FA" cx="2" cy="2" r="2"/>
</g>
<g id="grp4" opacity="0" transform="translate(35 50)">
<circle id="oval1" fill="#F48EA7" cx="6" cy="5" r="2"/>
<circle id="oval2" fill="#F48EA7" cx="2" cy="2" r="2"/>
</g>
<g id="grp1" opacity="0" transform="translate(24)">
<circle id="oval1" fill="#9FC7FA" cx="2.5" cy="3" r="2"/>
<circle id="oval2" fill="#9FC7FA" cx="7.5" cy="2" r="2"/>
</g>
</g>
</svg>
</label>
<input type="checkbox" class="checkbox" id="checkbox_3" />
<label for="checkbox_3">
<svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg">
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z" id="heart" fill="#AAB8C2"/>
<circle id="main-circ" fill="#E2264D" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)">
<circle id="oval1" fill="#9CD8C3" cx="2" cy="6" r="2"/>
<circle id="oval2" fill="#8CE8C3" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)">
<circle id="oval1" fill="#CC8EF5" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#91D2FA" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)">
<circle id="oval2" fill="#9CD8C3" cx="2" cy="7" r="2"/>
<circle id="oval1" fill="#8CE8C3" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)">
<circle id="oval2" fill="#CC8EF5" cx="5" cy="6" r="2"/>
<circle id="oval1" fill="#CC8EF5" cx="2" cy="2" r="2"/>
</g>
<g id="grp5" opacity="0" transform="translate(14 50)">
<circle id="oval1" fill="#91D2FA" cx="6" cy="5" r="2"/>
<circle id="oval2" fill="#91D2FA" cx="2" cy="2" r="2"/>
</g>
<g id="grp4" opacity="0" transform="translate(35 50)">
<circle id="oval1" fill="#F48EA7" cx="6" cy="5" r="2"/>
<circle id="oval2" fill="#F48EA7" cx="2" cy="2" r="2"/>
</g>
<g id="grp1" opacity="0" transform="translate(24)">
<circle id="oval1" fill="#9FC7FA" cx="2.5" cy="3" r="2"/>
<circle id="oval2" fill="#9FC7FA" cx="7.5" cy="2" r="2"/>
</g>
</g>
</svg>
</label>

You can use jquery (or javaScript if you want) to toggle class for animation. I've updated your code, please take a look:
$('.like-btn-svg').on('click', function () {
$(this).toggleClass('animate');
});
.like-btn-svg {
width: 80px;
height: 100px;
position: absolute;
left: 25px;
bottom: 0; /* temp value */
transform: translate(-50%, -50%);
background: url(https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png) no-repeat;
background-position: 0 0;
cursor: pointer;
}
.like-btn-svg.animate {
transition: background 1s steps(28);
animation: fave-like-btn-svg 1s steps(28);
background-position: -2800px 0;
}
#keyframes fave-like-btn-svg {
0% {
background-position: 0 0;
}
100% {
background-position: -2800px 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="like-btn-svg"></div>

with only css:
.like-btn-svg {
width: 80px;
height: 100px;
background: url(https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png) no-repeat;
background-position: 0 0;
cursor: pointer;
}
input[type="checkbox"] {
display:none;
}
input:checked + .like-btn-svg{
transition: background 1s steps(28);
animation: fave-like-btn-svg 1s steps(28);
background-position: -2800px 0;
}
#keyframes fave-like-btn-svg {
0% {
background-position: 0 0;
}
100% {
background-position: -2800px 0;
}
}
<label><input type="checkbox">
<div class="like-btn-svg"></div>
</label>

How to trigger an SVG animation with JavaScript? (No jQuery)

I have an SVG line path animated with this sample I found:
svg {
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
display: block;
background: transparent;
}
.path {
stroke: black;
stroke-dasharray: 290;
stroke-dashoffset: 130;
animation: dash 6s 0s forwards infinite;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
#keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
<svg viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
</svg>
It works fine but it's triggered when the page loads. Is there a way (let's say with a button) to trigger this animation using JavaScript?
I can handle JS but I'm a noob with CSS and SVG animations.
Can anybody give me an example of how I can do it with my actual CSS?

You could also use SMIL animation syntax instead of CSS animation. This admittedly has the downside of not running in Microsoft browsers (both IE and Edge).
var animation = document.getElementById("dash");
function showSVG() {
animation.beginElement();
}
svg {
position: relative;
width: 100%;
height: 150px;
left: 0%;
top: 0%;
display: block;
background: transparent;
}
.path {
stroke: black;
stroke-dasharray: 290;
stroke-dashoffset: 290;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
<button id="button" onclick="showSVG()">Click</button>
<svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent">
<animate id="dash"
attributeName="stroke-dashoffset"
from="290" to="0"
begin="indefinite"
dur="6s"
fill="freeze" />
</path>
</svg>
This animation runs once every time you click. If you want it to repeat in fixed intervals, like CSS animation-repeat: infinite prescribes, use
<animate id="dash" attributeName="stroke-dashoffset"
from="290" to="0"
begin="indefinite" dur="6s" repeatCount="indefinite" />

svg {
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
display: block;
background: transparent;
}
.path {
stroke: black;
stroke-dasharray: 290;
stroke-dashoffset: 130;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dashoffset: 290;
}
.animated {
animation: dash 6s 0s forwards infinite;
stroke-dashoffset: 0;
}
#keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
Then you can add the class .animated to your path with js whenever you need it.

You should include your animation in a css class:
.dash-animate {
animation: dash 6s 0s forwards infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
And then simply apply that class when/where you want using js:
var button = getElementById('some-button');
button.addEventListner('click', function() {
var elements = document.querySelectorAll('.path');
Array.prototype.forEach.call(elements, function(el) {
el.classList.add('dash-animate');
});
});

var svgPattern = document.getElementById("svg")
svgPattern.style.display = "none";
function showSVG(){
svgPattern.style.display = "block";
}
svg{
position:absolute;
width:100%;
height:100%;
left:0%;
top:0%;
display:block;
background:transparent;
}
.path {
stroke:black;
stroke-dasharray: 290;
stroke-dashoffset: 130;
animation: dash 6s 0s forwards infinite;
stroke-width:2px;
stroke-linecap:round;
stroke-linejoin:round;
}
#keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
<button id ="button" onclick="showSVG()">Click</button>
<svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
</svg>

Categories

Resources