<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Animation</title>
<style>
.cls-1 {
fill: #a7a5a5;
}
.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 {
stroke-width: 0px;
}
.cls-2 {
fill: #fefefe;
}
.cls-3 {
fill: #767777;
}
.cls-4 {
fill: #4e4d4c;
}
.cls-5 {
fill: #d7d6d5;
}
.cls-6 {
fill: #dddcdc;
}
.cls-7 {
fill: #fff;
}
.cls-8 {
fill: #080b0b;
}
/* Animation for larger heart */
#largerHeart {
animation: appear 1s forwards;
}
/* Animation for smaller heart */
#smallerHeart {
opacity: 0;
animation: fadeIn 2s 1s forwards;
}
@keyframes appear {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2000 2000">
<defs></defs>
<g id="jXFQAx.tif">
<g id="largerHeart">
<path class="cls-7" d="M1809.85,1345.52c0,55.19-.04,110.37.1,165.56,0,3.42-.67,4.09-4.09,4.08-158.94-.11-317.88-.09-476.82-.09,0-148.44.02-296.88-.09-445.32,0-3.74.84-4.6,4.58-4.59,36.41.16,72.82.1,109.23.1-.28,2.71-2.53,2.02-4.12,2.3-4.34.77-8.82.82-12.9,2.77-12.43,3.66-24.81,7.45-36.33,13.58-21.35,11.36-37.81,27.33-47.63,49.75-9.06,20.69-5.83,40.57,3.62,60.09,10.18,21.01,23.68,40,36.4,59.46,1.82,2.78,3.62,5.57,5.26,8.47,2.62,4.64,2.13,6.45-2.62,8.58-8.06,3.6-15.73,7.9-23.14,12.69-19.69,12.71-30.2,30.87-29.79,54.23.62,35.5,27.82,73.15,70.99,78.56,9.52,1.19,19.23.83,28.8-.94,5.28-.97,6.07-.27,7.17,4.86.17.81.45,1.63.41,2.45-.66,12.59,2.45,25.12.44,37.77-.83,5.23-.21,10.62-.19,15.93,0,1.4-.69,3.28.96,4.04,1.3.6,2.41-.8,3.5-1.5,14.55-9.35,29.56-17.87,45.04-25.6,9.4-4.69,8.87-4.06,12.5,4.79,12.49,30.52,34.54,49.86,67.86,53.74,24.4,2.84,46.52-3.38,64.27-21.51,11.6-11.84,15.9-26.54,16.66-42.61.39-8.32-.25-16.6-1.08-24.86-.41-4.06,1.41-5.28,5.12-5.33,12.13-.17,24.19.99,36.28,1.64,20.37,1.09,40.76,2.88,60.96-1.97,20.19-4.85,34.53-17.02,44.52-34.85,5.33-9.51,9.09-19.54,10.95-30.31.38-2.19-.01-5.15,3.18-5.99Z"/>
</g>
<g id="smallerHeart">
<path class="cls-7" d="M1550.38,1290.56c16.39-15.21,32.27-31.03,51.2-43.82,1.22,11.12,2.37,21.75,3.55,32.38,3.34,30.18,9.8,59.74,17.83,88.99,2.85,10.38,5.46,20.83,8.3,31.21.9,3.28.38,4.7-3.5,4.78-40.17.8-78.81,9.22-116.06,24.09-3.71,1.48-4.08.02-4.26-3.01-1.17-20.4,1.32-40.39,6.51-60.09,1.93-7.34,3.74-14.71,5.17-22.5-21.11,20.34-41.78,41.13-69.95,52.94-5.76-42.59-18.26-82.6-39.59-120.77,51.99-13.44,103.44-27.06,151.93-51.95-1.98,22.44-6.98,43.14-12.05,63.84-.83,2.94-.73,3.38.92,3.92Z"/>
</g>
</g>
</svg>
</body>
</html>
