GSAP staggerTo () - случайные аргументы для каждого элемента

Question

Я пытаюсь воздействовать на сердца, используя разные пути для каждого из них.

Вот мой код: https://codepen.io/msauneuf/pen/GLVJQb?editors=0010

Моя проблема в том, что функция getRandomInt () не вызывается во время разброса для каждого элемента.

Я пытался добавить цикл (https://greensock.com/cycle), а также напрямую вставить в него getRandomInt (), но безуспешно ...

.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")

Следовательно, ВСЕ сердца следуют одному и тому же предопределенному пути.

Есть ли способ иметь разные пути для каждого сердца?

Answer 1

Одним из вариантов может быть воссоздание анимации сердец каждый раз, когда она завершена, таким образом случайные значения будут переназначаться.Проверьте функцию loadHeartsAnimation(), она использует завершенный обратный вызов последнего вызова staggerTo для воссоздания анимации.

//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>