Develop Reference

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

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>

How to enable the click to all looping images separately

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
}
?>

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>

Is it possible to animate an SVG background on a DOM element with CSS?

I have used SMIL to animate an SVG image, then used that image as the background for a DOM element (e.g., a button).
For example, this SVG image (http://mattstuehler.com/spinner.svg)
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
<g fill="none" stroke="#1e81cc" stroke-width="4">
<circle cx="50%" cy="50%" r="18" stroke-opacity="0.3"/>
<path d="M20,2 A18,18 0 0,1 38,20">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/>
</path>
</g>
</svg>
However, now that SMIL is being deprecated, how would you do this with only CSS?
Thanks in advance!
button {
width: 200px;
height: 60px;
background-color: #eee;
background-image: url(http://mattstuehler.com/spinner.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 50px 50px;
border: none;
-webkit-appearance: none;
}
<button>Hello</button>

Update:
Chrome have suspended deprecation of SMIL for now. More here
One way could be to use CSS animations. Animate the path element and fix the transform-origin at the center of the spinner.
Since we can have a <style> tag within an SVG element, we embed this animation in the SVG itself.
CSS Animation / SVG:
<svg height="40" viewbox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg">
<style>
path {
-webkit-animation: rotate 1s linear infinite;
-moz-animation: rotate 1s linear infinite;
animation: rotate 1s linear infinite;
transform-origin: 20px 20px;
}
#-webkit-keyframes rotate {
100% {
transform: rotate(360deg)
}
}
#keyframes rotate {
100% {
transform: rotate(360deg)
}
}
</style>
<g fill="none" stroke="#1e81cc" stroke-width="4">
<circle cx="50%" cy="50%" r="18" stroke-opacity="0.3"></circle>
<path d="M20,2 A18,18 0 0,1 38,20"></path>
</g>
</svg>
Using the above SVG as a background:
button {
width: 200px;
height: 60px;
background-color: #eee;
background-image: url(https://dl.dropboxusercontent.com/s/8j3gd6jfujxz2xg/spinner.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 50px 50px;
border: none;
}
<button>Hello</button>
Note: Some browsers may render animated SVGs as a static image when used as a background. Refers to both the CSS method and the SMIL in the question.
Works fine on Chrome/Opera and Firefox from version 51.

You can use any static PNG/WebP/JPG image as a background to a button's pseudo-class and then rotate it via CSS.
#keyframes btn_rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
button::before {
content: '';
display: block;
height: 60px;
width: 60px;
background: url(http://www.freeiconspng.com/uploads/spinner-icon-17.png);
background-size: contain;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 30px);
animation: btn_rotate 2s infinite;
animation-timing-function: linear;
}
button {
width: 200px;
height: 60px;
background-color: #eee;
border: none;
position: relative;
overflow: hidden;
}
<button>Hello</button>