Welcome to Web Hosting Forum - Net Hosting Talk

Register now and be part of our community! When you register with the Net Hosting Talk you can join in with topics, start new topics, and generally be a part of the first level of our community. It's also quick and totally free, so what are you waiting for?

How can i make a pulse animation on a svg path?

princetrox

Newbie
Messages
4
Reaction score
1
Hello,

I want to make pulse animation on two icons & I'm able to make the pulse animation on the first heart icon, but on the second icon it's sliding, I don't understand why. can anyone help me to fix it?
Code:
<svg>
    <g transform="translate(50, 50)">
        <path transform="translate(-50, -50)" d="M82.6,50L82.6,50c-0.2-8.1-6.9-15.2-15.1-15.2c-4.8,0-9,2.4-11.8,6c-2.8-3.6-7-6-11.8-6c-8.3,0-15,7.2-15.1,15.2h0c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.1,0.6c0.7,20.5,26.6,29,26.6,29s26.3-8.4,27.1-28.9c0-0.2,0.1-0.4,0.1-0.6c0,0,0-0.1,0-0.1C82.6,50.1,82.6,50.1,82.6,50z"/>
	<animateTransform attributeType="XML" attributeName="transform" type="scale"       values="1;1.5;1" additive="sum" begin="0s" dur="2s" repeatCount="indefinite"/>
    </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1042.816 1297.406">
    <g transform="translate(50, 50)">
        <path transform="translate(-50, -50)" d="M698.467,114.89a10.209,10.209,0,0,1-3.787-.817c-13.05-5.219-51.65-19.04-65.74-21.65s-23.48-4.96-19.83-14.09,7.57-24.78,7.57-24.78,5.57-30.79,7.61-34.44c1.618-2.894,3.594-3.82,7.465-3.82,1.01,0,2.149.062,3.445.17,6.26.52,26.61,3.65,25.3,8.87s-2.6,7.92,8.87,10.09,49.374,13.388,51.457,18.084c2.47,5.567-3.977,24.786-8.147,35.217-3.732,9.321-4.754,27.166-14.213,27.166M628.979,10.6c-6.16,0-8.353,2.8-10.209,12.954-2.76,15.01-13.91,53.56-14.82,56.671a3.161,3.161,0,0,1-.14.4c-4.27,10.521,1.78,12.86,22,16.231,20.35,3.389,57.3,17,63.09,18.889,3.735,1.222,8.923,4.074,13.182,4.074,2.924,0,5.41-1.343,6.688-5.484,3.13-10.17,12.78-39.649,16.95-52.17s-4.95-18.79-17.74-21.92c-11.46-2.8-29.64-7.5-39.67-11.45a4.522,4.522,0,0,1-2.87-4.26c.14-8.97-6.28-9.83-22.41-12.2-6.227-.916-10.719-1.734-14.051-1.734" fill="#4cb5e3"/>
        <animateTransform attributeType="XML" attributeName="transform" type="scale" values="1;1.5;1" additive="sum" begin="0s" dur="2s" repeatCount="indefinite"/>
    </g>
</svg>
 

Advertisement

Top