I'm trying to do a spreading effect on the hearts by having a different path for each one.
Here is my code : https://codepen.io/msauneuf/pen/GLVJQb?editors=0010
My problem is that the function getRandomInt() is not recalled during the stagger for each element.
I've tried to add the cycle thing (https://greensock.com/cycle) and also to directly put the getRandomInt() in it but with no success...
.staggerTo('#hearts .heart', 12, {
bezier:{
type:"cubic",
values:[
{x: 1, y: -10},
{x: -160-getRandomInt(), y: 160+getRandomInt()},
{x: -326-getRandomInt(), y: 326+getRandomInt()},
{x: -500-getRandomInt(), y: 500+getRandomInt()}
],
},
scale:'1.4',
ease: Linear.easeNone
}, 0.8, "start")
Therefore, ALL hearts follow the same predetermined path.
Is there a way to have a different path for each heart ?
One option could be to recreate the hearts animation each time it is completed, this way random values will be reassigned. Check the loadHeartsAnimation() function, it is using the completed callback of the last
staggerTo call to recreate the animation.
//animate hearts
function getRandomInt() {
return Math.floor(Math.random() * 200) - 100;
}
function loadHeartsAnimation() {
var tl = new TimelineMax({
repeat: -1
});
tl
.staggerFromTo('#hearts .heart', 0.5, {
autoAlpha: 0
}, {
autoAlpha: 1,
scale: '0.8'
}, 0.8, "start")
.staggerTo('#hearts .heart', 5, {
bezier: {
type: "cubic",
values: [{
x: 1,
y: -10
},
{
x: -160 - getRandomInt(),
y: 160 + getRandomInt()
},
{
x: -326 - getRandomInt(),
y: 326 + getRandomInt()
},
{
x: -500 - getRandomInt(),
y: 500 + getRandomInt()
}
],
},
scale: '1.4',
ease: Linear.easeNone
}, 0.8, "start")
.staggerTo('#hearts .heart', 0.5, {
autoAlpha: 0
}, 0.8, "start+=4.5", function() {
// Make sure that animation is fully destroyed
tl.invalidate().kill();
// And recreate it with new random values
loadHeartsAnimation();
});
}
loadHeartsAnimation();
//animate sun
TweenMax.to("#sun", 4, {
rotation: 90,
transformOrigin: "center",
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
//animate clouds
TweenMax.to("#clouds1", 4, {
y: '10px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
TweenMax.to("#clouds2", 5, {
y: '-5px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
//animate mountains
TweenMax.to("#mountain1", 4, {
x: '10px',
y: '10px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
TweenMax.to("#mountain2", 5, {
x: '-15px',
y: '5px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});.st0 {
fill: url(#background_1_);
}
.st1 {
filter: url(#Adobe_OpacityMaskFilter);
}
.st2 {
fill: url(#XMLID_3_);
}
.st3 {
opacity: 0.4;
mask: url(#XMLID_2_);
fill: #004D67;
}
.st4 {
filter: url(#Adobe_OpacityMaskFilter_1_);
}
.st5 {
fill: url(#XMLID_5_);
}
.st6 {
opacity: 0.4;
mask: url(#XMLID_4_);
fill: #004D67;
}
.st7 {
fill: url(#XMLID_6_);
}
.st8 {
fill: #FFFFFF;
}
.st9 {
fill: url(#XMLID_7_);
}
.st10 {
fill: url(#XMLID_8_);
}
.st11 {
fill: url(#XMLID_9_);
}
.st12 {
filter: url(#Adobe_OpacityMaskFilter_2_);
}st13
.st13 {
fill: url(#XMLID_11_);
}
.st14 {
opacity: 0.6;
mask: url(#XMLID_10_);
fill: #004D67;
}
.st15 {
filter: url(#Adobe_OpacityMaskFilter_3_);
}
.st16 {
fill: url(#XMLID_13_);
}
.st17 {
opacity: 0.4;
mask: url(#XMLID_12_);
fill: #004D67;
}
.st18 {
fill: url(#XMLID_14_);
}
.st19 {
fill: url(#XMLID_15_);
}
.st20 {
filter: url(#Adobe_OpacityMaskFilter_4_);
}
.st21 {
fill: url(#XMLID_17_);
}
.st22 {
opacity: 0.6;
mask: url(#XMLID_16_);
fill: #004D67;
}
.st23 {
fill: url(#XMLID_18_);
}
.st24 {
fill: url(#XMLID_19_);
}
.st25 {
fill: url(#XMLID_20_);
}
.st26 {
fill: url(#XMLID_21_);
}
.st27 {
filter: url(#Adobe_OpacityMaskFilter_5_);
}
.st28 {
fill: url(#XMLID_23_);
}
.st29 {
opacity: 0.6;
mask: url(#XMLID_22_);
fill: #004D67;
}
.st30 {
fill: url(#XMLID_24_);
}
.st31 {
fill: url(#XMLID_25_);
}
.st32 {
fill: url(#sun_1_);
}
.st33 {
fill: white;
}
.st34 {
fill: url(#SVGID_1_);
}
.st35 {
fill: url(#SVGID_2_);
}
.st36 {
fill: url(#SVGID_3_);
}
.st37 {
fill: url(#SVGID_4_);
}
.st38 {
fill: url(#SVGID_5_);
}
.st39 {
fill: url(#SVGID_6_);
}
.st40 {
fill: url(#SVGID_7_);
}
.st41 {
fill: url(#SVGID_8_);
}
.st42 {
fill: url(#SVGID_9_);
}
.st43 {
fill: url(#SVGID_10_);
}
.st44 {
fill: url(#SVGID_11_);
}
.st45 {
fill: url(#SVGID_12_);
}
.st46 {
fill: url(#SVGID_13_);
}
.st47 {
fill: url(#SVGID_14_);
}
.st48 {
fill: url(#SVGID_15_);
}
.st49 {
fill: url(#SVGID_16_);
}
.st50 {
fill: url(#SVGID_17_);
}
.st51 {
fill: url(#SVGID_18_);
}
.st52 {
fill: url(#SVGID_19_);
}
.st53 {
fill: url(#SVGID_20_);
}
.st54 {
fill: url(#SVGID_21_);
}
.st55 {
fill: url(#SVGID_22_);
}
.st56 {
fill: url(#SVGID_23_);
}
.st57 {
fill: url(#SVGID_24_);
}
.heart {
opacity: 1 !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<mask id="mask-path" x="0" y="0" width="1" height="1">
<path id="morph1" class="st33" d="M824.59,893.48l-419.3,64.79c-87.35,13.5-166.16-54.07-166.16-142.45V410.02
c0-107.06,112.59-176.76,208.42-129.02l70.74,35.24c34.88,17.37,75.3,19.89,112.06,6.97l184.83-64.95
c103.6-36.41,208.24,51.78,189.91,160.05l-60.4,356.78C934.33,836.3,885.94,884,824.59,893.48z"/>
</mask>
<g id="compo" mask="url(#mask-path)">
<linearGradient id="background_1_" gradientUnits="userSpaceOnUse" x1="8" y1="594.5" x2="1127" y2="594.5">
<stop offset="0" style="stop-color:#2E3192"/>
<stop offset="0.2185" style="stop-color:#323192"/>
<stop offset="0.4119" style="stop-color:#3C3092"/>
<stop offset="0.5958" style="stop-color:#4E2E91"/>
<stop offset="0.7739" style="stop-color:#682B90"/>
<stop offset="0.9462" style="stop-color:#88288F"/>
<stop offset="0.9946" style="stop-color:#93278F"/>
</linearGradient>
<rect id="background" x="8" y="98" class="st0" width="1119" height="993"/>
<g id="mountain1">
<defs>
<filter id="Adobe_OpacityMaskFilter_4_" filterUnits="userSpaceOnUse" x="566.97" y="587.86" width="213.95" height="192.84">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="566.97" y="587.86" width="213.95" height="192.84" id="XMLID_16_">
<g id="XMLID_72_" class="st20">
<radialGradient id="XMLID_17_" cx="1069.0006" cy="259.3001" r="98.4298" gradientTransform="matrix(-0.2348 1.2251 1.0635 0.1729 648.9241 -644.805)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.1523" style="stop-color:#CCCCCC"/>
<stop offset="0.3858" style="stop-color:#858585"/>
<stop offset="0.5959" style="stop-color:#4C4C4C"/>
<stop offset="0.7746" style="stop-color:#222222"/>
<stop offset="0.9151" style="stop-color:#090909"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<path id="XMLID_73_" class="st21" d="M650.58,830.25c57.81,9.4,115.03-36.97,127.79-103.57c12.76-66.6-23.76-128.2-81.57-137.6
c-57.81-9.4-115.03,36.97-127.79,103.57C556.24,759.24,592.76,820.85,650.58,830.25z"/>
</g>
</mask>
<path id="XMLID_240_" class="st22" d="M663,773.94c57.81,9.4,102.61,19.33,115.37-47.26c12.76-66.6-23.76-128.2-81.57-137.6
c-57.81-9.4-115.03,36.97-127.79,103.57C556.24,759.24,605.18,764.54,663,773.94z"/>
<g id="XMLID_232_">
<linearGradient id="XMLID_18_" gradientUnits="userSpaceOnUse" x1="921.4859" y1="717.9749" x2="841.8403" y2="710.6605" gradientTransform="matrix(-1 0 0 1 1676.5815 0)">
<stop offset="0" style="stop-color:#324958"/>
<stop offset="1" style="stop-color:#2D424F"/>
</linearGradient>
<path id="XMLID_239_" class="st23" d="M750.12,663.53c4.32,7.22,13.01,11.43,22.3,11.43c1.47,0,3.34-0.49,5.2-2.06l45.05,65.94
l-91.36,36.21V674.72C740.62,674.72,745.8,670.75,750.12,663.53z"/>
<polygon id="XMLID_238_" class="st8" points="777.63,672.91 777.63,672.91 731.32,605.12 "/>
<linearGradient id="XMLID_19_" gradientUnits="userSpaceOnUse" x1="938.6739" y1="640.0437" x2="899.1208" y2="640.0437" gradientTransform="matrix(-1 0 0 1 1676.5815 0)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#E3E8E9"/>
</linearGradient>
<path id="XMLID_237_" class="st24" d="M750.12,663.53c-4.32,7.22-9.5,11.19-18.8,11.19v-69.59l46.31,67.78
c-1.87,1.56-3.73,2.06-5.2,2.06C763.13,674.96,754.44,670.75,750.12,663.53z"/>
<linearGradient id="XMLID_20_" gradientUnits="userSpaceOnUse" x1="944.296" y1="719.2949" x2="1022.2878" y2="719.2949" gradientTransform="matrix(-1 0 0 1 1676.5815 0)">
<stop offset="0" style="stop-color:#23353F"/>
<stop offset="1" style="stop-color:#283B47"/>
</linearGradient>
<path id="XMLID_236_" class="st25" d="M679.15,672.23c2.02,1.68,4.43,1.85,6.96,1.85c9.3,0,18.98-3.33,23.29-10.56
c4.32,7.22,12.62,11.19,21.91,11.19v100.34l-102.47-38.13L679.15,672.23z"/>
<linearGradient id="XMLID_21_" gradientUnits="userSpaceOnUse" x1="694.7313" y1="639.9202" x2="727.6151" y2="639.9202">
<stop offset="0" style="stop-color:#BDC6CA"/>
<stop offset="1" style="stop-color:#D6DEE2"/>
</linearGradient>
<path id="XMLID_233_" class="st26" d="M709.41,663.53c-4.32,7.22-14,10.56-23.29,10.56c-2.54,0-4.95-0.17-6.96-1.85l52.17-67.11
v69.59C722.03,674.72,713.73,670.75,709.41,663.53z"/>
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter_5_" filterUnits="userSpaceOnUse" x="629.29" y="637.49" width="142.55" height="143.6">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="629.29" y="637.49" width="142.55" height="143.6" id="XMLID_22_">
<g id="XMLID_60_" class="st27">
<radialGradient id="XMLID_23_" cx="1072.5675" cy="285.3059" r="65.4882" gradientTransform="matrix(-0.2348 1.2251 1.0635 0.1729 648.9241 -644.805)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.1523" style="stop-color:#CCCCCC"/>
<stop offset="0.3858" style="stop-color:#858585"/>
<stop offset="0.5959" style="stop-color:#4C4C4C"/>
<stop offset="0.7746" style="stop-color:#222222"/>
<stop offset="0.9151" style="stop-color:#090909"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<path id="XMLID_61_" class="st28" d="M685.13,798.76c38.46,6.25,76.53-24.6,85.02-68.91s-15.81-85.3-54.27-91.55
c-38.46-6.25-76.53,24.6-85.02,68.91C622.37,751.52,646.67,792.5,685.13,798.76z"/>
</g>
</mask>
<path id="XMLID_229_" class="st29" d="M687.86,779.52c38.46,6.25,73.8-5.37,82.3-49.68s-15.81-85.3-54.27-91.55
c-38.46-6.25-76.53,24.6-85.02,68.91C622.37,751.52,649.39,773.27,687.86,779.52z"/>
</g>
<g id="clouds1">
<linearGradient id="XMLID_24_" gradientUnits="userSpaceOnUse" x1="645.1644" y1="805.2516" x2="693.7812" y2="903.8417" gradientTransform="matrix(0.9992 0.0408 -0.0408 0.9992 16.5722 -20.402)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#FEFFFF"/>
</linearGradient>
<path id="XMLID_259_" class="st30" d="M1101.87,750.8c-15.98-4.63-36.56-1.94-46.89,12.67c-3.62-3.71-8.44-6.57-14.03-7.99
c-9.58-2.44-20.11-0.12-27.13,7.02c-2.29-8.61-9.66-14.83-18.25-16.67c-5.16-1.11-10.25-0.6-14.61,1.16
c1.35-18.5-15.13-32.79-32.02-35.52c-11.3-1.83-24.69,0.52-33.36,8.79c-6.53-6.88-15.45-11.14-24.82-12.32
c-3.24-0.41-6.43-0.45-9.52-0.15c-6.6-17.79-24.98-28.44-43.27-29.95c-19.56-1.62-41.1,7.22-49.32,26.03
c-2.7-0.9-5.66-1.38-8.62-1.56c-7.17-0.43-16.77,2.8-21.84,8.19c-7.44-6.71-17.31-10.23-27.29-10.23
c-15.99,0-32.08,9.5-36.92,25.3c-1.47-0.14-2.96-0.19-4.48-0.14c-6.18,0.2-11.9,1.97-16.7,4.85c-0.02-0.04-0.05-0.09-0.07-0.13
c-2.57-16.85-13.82-28.06-30.19-32.58c-16.22-4.47-38.81,1.59-45.85,18.24c-2.74-0.51-5.63-0.64-8.58-0.3
c-7.64,0.86-14.18,4.58-18.42,9.78c-6.95-7.42-17.3-10.7-27.3-9.21c-9.97,1.49-18.9,7.61-23.4,16.7c-2.87-1.36-6.1-2.35-9.44-3
c-6.7-1.31-15.77-0.45-22.03,2.61c-13.23-16.05-35.35-22.01-55.27-17.3c-16.89,3.99-31.91,15.53-38.91,31.58
c-5.39-2.1-11.67-2.5-17.89-0.71c-4.13,1.19-7.78,3.22-10.77,5.82c-14.59-13.94-35.67-17.55-54.8-12.53
c-15.51,4.07-32.01,14.76-36.49,31.11c-7.39-1.95-17.42-0.49-24.16,2.61c-8.9,4.09-17.05,11.36-20.28,20.97
c-2.9,0.76-5.79,1.75-8.65,2.98c-3.68,1.59-7.12,3.51-10.29,5.69c-14.52-6.63-32.88-3.63-46.45,3.85
c9.25,19.09,3.46,135.28,15.92,160.43c2.64-1.26,54.53-30.24,57.17-31.48c107.99-50.61,222.18-84.48,340.38-100.91
c170.82-22.14,343.27-6.66,507.22,45.41c6.17,1.96,30.06,9.74,41.07,14.87c-1.41-37.31-2.48-68.21,7.15-97.55
C1139.24,776.53,1120.94,756.33,1101.87,750.8z"/>
<linearGradient id="XMLID_25_" gradientUnits="userSpaceOnUse" x1="326.713" y1="826.1212" x2="383.6116" y2="941.5063" gradientTransform="matrix(-0.998 0.0637 0.0637 0.998 933.9171 -30.6457)">
<stop offset="0" style="stop-color:#F6F7F8"/>
<stop offset="1" style="stop-color:#E5EAEC"/>
</linearGradient>
<path id="XMLID_258_" class="st31" d="M164.3,807.25c13.57-7.48,31.93-10.47,46.45-3.85c3.17-2.18,6.61-4.1,10.29-5.69
c2.85-1.23,5.74-2.22,8.65-2.98c3.23-9.61,11.38-16.87,20.28-20.97c6.74-3.1,16.77-4.56,24.16-2.61
c4.48-16.34,20.98-27.04,36.49-31.11c19.14-5.02,40.21-1.41,54.8,12.53c2.99-2.59,6.64-4.63,10.77-5.82
c6.21-1.79,12.5-1.39,17.89,0.71c7-16.05,22.02-27.59,38.91-31.58c19.92-4.71,42.04,1.25,55.27,17.3
c6.26-3.07,15.34-3.92,22.03-2.61c3.34,0.65,6.57,1.64,9.44,3c4.5-9.09,13.43-15.21,23.4-16.7c10-1.49,20.35,1.79,27.3,9.21
c4.24-5.2,10.78-8.92,18.42-9.78c2.95-0.33,5.84-0.21,8.58,0.3c7.04-16.65,29.63-22.71,45.85-18.24
c16.38,4.52,27.62,15.73,30.19,32.58c0.02,0.04,0.05,0.09,0.07,0.13c4.81-2.88,10.53-4.65,16.7-4.85c1.52-0.05,3.01,0,4.48,0.14
c4.84-15.8,20.93-25.3,36.92-25.3c9.98,0,19.85,3.52,27.29,10.23c5.08-5.38,14.67-8.62,21.84-8.19c2.96,0.18,5.92,0.66,8.62,1.56
c8.22-18.81,29.77-27.65,49.32-26.03c18.28,1.51,36.66,12.16,43.27,29.95c3.09-0.3,6.28-0.26,9.52,0.15
c9.38,1.18,18.29,5.45,24.82,12.32c8.67-8.27,22.05-10.62,33.36-8.79c16.89,2.73,33.37,17.02,32.02,35.52
c4.36-1.76,9.45-2.27,14.61-1.16c8.58,1.85,15.96,8.06,18.25,16.67c7.02-7.14,17.55-9.46,27.13-7.02
c5.6,1.42,10.41,4.28,14.03,7.99c10.33-14.61,30.9-17.3,46.89-12.67c19.07,5.53,37.37,25.73,30.59,46.39
c-9.63,29.34-8.56,60.24-7.15,97.55c-11.01-5.13-34.91-12.91-41.07-14.87C921.04,828.62,744.82,949.86,574,972
c-118.19,16.44-344,9-344,9l-49.78-13.32C180.22,967.68,173.54,826.34,164.3,807.25z"/>
</g>
<linearGradient id="sun_1_" gradientUnits="userSpaceOnUse" x1="177.6166" y1="364.1817" x2="148.1334" y2="328.358" gradientTransform="matrix(-1 0 0 1 1000 0)">
<stop offset="0" style="stop-color:#FFF4A7"/>
<stop offset="1" style="stop-color:#FFCA6F"/>
</linearGradient>
<circle id="sun" class="st32" cx="837.53" cy="345.77" r="24.95"/>
</g>
<g id="hearts">
<g class="heart">
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="580.5917" y1="592.3933" x2="579.5101" y2="595.3291" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st34" d="M755.54,401.73c-5.73-0.22-2.3,11.58-2.3,11.58l5.77-6.96C759.02,406.35,759.66,401.89,755.54,401.73z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="583.4308" y1="588.8535" x2="577.9619" y2="594.525" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#BB2C33"/>
<stop offset="1" style="stop-color:#FF5374"/>
</linearGradient>
<path class="st35" d="M755.56,401.85c-5.73-0.22-2.3,11.58-2.3,11.58l5.77-6.96C759.04,406.48,759.68,402.02,755.56,401.85z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="587.3978" y1="592.6105" x2="587.3978" y2="595.3616" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st36" d="M764.21,408.92c-0.91-4.02-5.19-2.57-5.19-2.57l-5.76,7.09C753.26,413.44,765.48,414.51,764.21,408.92z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="585.0092" y1="589.5995" x2="591.1902" y2="589.5995" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0.2456" style="stop-color:#AF2027"/>
<stop offset="1" style="stop-color:#F74768"/>
</linearGradient>
<path class="st37" d="M764.22,409.05c-0.91-4.02-5.19-2.57-5.19-2.57l-5.77,6.96C753.26,413.44,765.49,414.64,764.22,409.05z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="586.2094" y1="593.1427" x2="586.2094" y2="595.1641" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st38" d="M762.89,407.43c0.01-3.35-3.7-1.28-3.7-1.28l-5.93,7.3C753.26,413.44,762.87,412.07,762.89,407.43z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="582.1418" y1="591.378" x2="579.6953" y2="595.0607" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st39" d="M757.25,402.74c-4.57,0.87-4,10.56-4,10.56l0.01,0.13l5.93-7.3C759.19,406.14,760.54,402.12,757.25,402.74
z"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="583.7237" y1="589.3901" x2="578.8857" y2="592.8406" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#A2131A"/>
<stop offset="1" style="stop-color:#EA3A5B"/>
</linearGradient>
<path class="st40" d="M757.26,402.87c-4.57,0.87-4,10.56-4,10.56l5.95-7.17C759.21,406.27,760.55,402.25,757.26,402.87z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="583.9964" y1="589.7676" x2="588.4182" y2="589.7676" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#C83940"/>
<stop offset="1" style="stop-color:#FF6081"/>
</linearGradient>
<path class="st41" d="M762.91,407.55c0.01-3.35-3.7-1.28-3.7-1.28l-5.95,7.17C753.26,413.44,762.88,412.21,762.91,407.55z"/>
</g>
</g>
</g>
<g class="heart">
<g>
<g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="580.6853" y1="619.0745" x2="577.6742" y2="627.2476" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st42" d="M771.95,375.83c-15.95-0.62-6.39,32.24-6.39,32.24l16.08-19.38C781.64,388.69,783.43,376.27,771.95,375.83
z"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="588.5923" y1="609.2465" x2="573.3671" y2="625.0356" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#BB2C33"/>
<stop offset="1" style="stop-color:#FF5374"/>
</linearGradient>
<path class="st43" d="M772,376.19c-15.95-0.62-6.39,32.24-6.39,32.24l16.08-19.38C781.68,389.06,783.47,376.64,772,376.19z"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="599.6098" y1="619.6647" x2="599.6098" y2="627.3237" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st44" d="M796.08,395.85c-2.55-11.2-14.44-7.15-14.44-7.15l-16.03,19.74C765.61,408.44,799.63,411.4,796.08,395.85z
"/>
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="592.944" y1="611.3531" x2="610.1517" y2="611.3531" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0.2456" style="stop-color:#AF2027"/>
<stop offset="1" style="stop-color:#F74768"/>
</linearGradient>
<path class="st45" d="M796.12,396.21c-2.55-11.2-14.44-7.15-14.44-7.15l-16.08,19.38C765.61,408.44,799.67,411.77,796.12,396.21
z"/>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="596.2926" y1="621.1462" x2="596.2926" y2="626.7738" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st46" d="M792.41,391.68c0.04-9.32-10.28-3.56-10.28-3.56l-16.51,20.33C765.61,408.44,792.36,404.63,792.41,391.68z
"/>
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="585.0084" y1="616.2645" x2="578.1973" y2="626.517" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st47" d="M776.73,378.66c-12.72,2.44-11.16,29.41-11.16,29.41l0.04,0.36l16.51-20.33
C782.12,388.11,785.88,376.91,776.73,378.66z"/>
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="589.4042" y1="610.754" x2="575.9355" y2="620.36" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#A2131A"/>
<stop offset="1" style="stop-color:#EA3A5B"/>
</linearGradient>
<path class="st48" d="M776.77,379.03c-12.72,2.44-11.16,29.41-11.16,29.41l16.55-19.96
C782.17,388.47,785.92,377.27,776.77,379.03z"/>
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="590.1244" y1="611.8249" x2="602.4364" y2="611.8249" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#C83940"/>
<stop offset="1" style="stop-color:#FF6081"/>
</linearGradient>
<path class="st49" d="M792.45,392.04c0.04-9.32-10.28-3.56-10.28-3.56l-16.55,19.96C765.61,408.44,792.4,405,792.45,392.04z"/>
</g>
</g>
</g>
<g class="heart">
<g>
<g>
<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="596.3429" y1="620.9885" x2="593.4555" y2="628.8257" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st50" d="M785.27,384.7c-15.29-0.59-6.12,30.92-6.12,30.92l15.41-18.58C794.57,397.04,796.28,385.13,785.27,384.7z"
/>
<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="603.9313" y1="611.5647" x2="589.3319" y2="626.7048" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#BB2C33"/>
<stop offset="1" style="stop-color:#FF5374"/>
</linearGradient>
<path class="st51" d="M785.31,385.05c-15.29-0.59-6.12,30.92-6.12,30.92l15.41-18.58C794.61,397.39,796.33,385.47,785.31,385.05
z"/>
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="614.4991" y1="621.558" x2="614.4991" y2="628.9022" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st52" d="M808.41,403.9c-2.46-10.74-13.84-6.86-13.84-6.86l-15.37,18.93C779.2,415.97,811.82,418.82,808.41,403.9z"
/>
<linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="608.1075" y1="613.5945" x2="624.6079" y2="613.5945" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0.2456" style="stop-color:#AF2027"/>
<stop offset="1" style="stop-color:#F74768"/>
</linearGradient>
<path class="st53" d="M808.46,404.24c-2.45-10.74-13.84-6.86-13.84-6.86l-15.41,18.58C779.2,415.97,811.86,419.17,808.46,404.24
z"/>
<linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="611.3141" y1="622.9787" x2="611.3141" y2="628.375" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st54" d="M804.89,399.89c0.03-8.94-9.86-3.42-9.86-3.42l-15.84,19.49C779.2,415.97,804.84,412.32,804.89,399.89z"/>
<linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="600.494" y1="618.2949" x2="593.9628" y2="628.126" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st55" d="M789.85,387.43c-12.2,2.34-10.71,28.2-10.71,28.2l0.04,0.35l15.84-19.49
C795.03,396.49,798.64,385.74,789.85,387.43z"/>
<linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="604.7081" y1="613.0066" x2="591.7931" y2="622.2177" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#A2131A"/>
<stop offset="1" style="stop-color:#EA3A5B"/>
</linearGradient>
<path class="st56" d="M789.89,387.77c-12.2,2.34-10.71,28.2-10.71,28.2l15.88-19.14C795.07,396.83,798.67,386.09,789.89,387.77z
"/>
<linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="605.4039" y1="614.0363" x2="617.2081" y2="614.0363" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#C83940"/>
<stop offset="1" style="stop-color:#FF6081"/>
</linearGradient>
<path class="st57" d="M804.93,400.24c0.03-8.94-9.86-3.42-9.86-3.42l-15.88,19.14C779.2,415.97,804.89,412.66,804.93,400.24z"/>
</g>
</g>
</g>
</g>
</svg>