<body>
  

<div class="pic" id="picture">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
   <filter id="desat">
    <feColorMatrix in="SourceGraphic"
        type="saturate"
        values="0.8" />
  </filter>  
  </defs>
            <g class="locationDots" >
                <circle cx="366.62" cy="246.62" r="15.66" fill="#f58021" />
                <circle cx="431.59" cy="266.34" r="23.27" fill="#fdae15" />
                <circle cx="272.43" cy="209.72" r="23.27" fill="#fef200" />
                <circle cx="500.35" cy="367.73" r="23.27" fill="#f35724" />
                <circle cx="400.82" cy="475.14" r="23.27" fill="#bd0171" />
                <circle cx="359.25" cy="139.6" r="16.79" fill="#00a666" />
                <circle cx="529.84" cy="214.23" r="23.27" fill="#fef200" />
                <circle cx="365.19" cy="444.2" r="23.27" fill="#bd0171" />
                <circle cx="400" cy="126.85" r="23.27" fill="#00a666" />
                <circle cx="269.99" cy="243.07" r="15.66" fill="#f58021" />
                <circle cx="365.16" cy="284.53" r="15.66" fill="#f58021" />
                <circle cx="390.74" cy="272.89" r="15.56" fill="#fdae15" />
                <circle cx="491.4" cy="408.54" r="15.66" fill="#ee1c27" />
                <circle cx="341.56" cy="405.66" r="15.66" fill="#ee1c27" />
                <circle cx="320.71" cy="160.5" r="15.66" fill="#00a666" />
                <circle cx="493.4" cy="157.95" r="15.66" fill="#00a666" />
                <circle cx="431.59" cy="119.24" r="15.66" fill="#02a3b7" />
                <circle cx="260.18" cy="318.62" r="15.66" fill="#f58021" />
                <circle cx="295.7" cy="385.76" r="15.66" fill="#f35724" />
                <circle cx="540.28" cy="312.52" r="15.66" fill="#f58021" />
                <circle cx="451.56" cy="413.2" r="15.66" fill="#ee1c27" />
                <circle cx="269.99" cy="179.95" r="15.66" fill="#fef200" />
                <circle cx="553.1" cy="289.61" r="15.66" fill="#fdae15" />
                <circle cx="437.14" cy="277.93" r="15.66" fill="#f58021" />
                <circle cx="415.93" cy="454.95" r="15.66" fill="#bd0171" />
                <circle cx="522.92" cy="312.52" r="15.66" fill="#f58021" />
                <circle cx="318.07" cy="394.92" r="15.66" fill="#ee1c27" />
                <circle cx="510.46" cy="180.54" r="21.41" fill="#fef200" />
                <circle cx="461.92" cy="126.85" r="36.19" fill="#a6cf4d" />
                <circle cx="552.41" cy="255.29" r="36.19" fill="#f58021" />
                <circle cx="543.25" cy="353.81" r="36.19" fill="#f35724" />
                <circle cx="313.17" cy="132.51" r="36.19" fill="#00a666" />
                <circle cx="485.4" cy="439.29" r="36.19" fill="#bd0171" />
                <circle cx="316.23" cy="441.85" r="36.19" fill="#bd0171" />
                <circle cx="269.99" cy="161.72" r="23.94" fill="#fdae15" />
                <circle cx="232.48" cy="173.27" r="16.67" fill="#fef200" />
                <circle cx="246.05" cy="184.3" r="16.67" fill="#fef200" />
                <circle cx="246.39" cy="253.51" r="16.67" fill="#f58021" />
                <circle cx="395.39" cy="237.21" r="25.07" fill="#fef200" />
                <circle cx="446.55" cy="433.61" r="25.07" fill="#bd0171" />
                <circle cx="262.43" cy="296.86" r="25.07" fill="#f58021" />
                <circle cx="484.05" cy="391" r="25.07" fill="#ee1c27" />
                <circle cx="350.96" cy="115.73" r="25.07" fill="#02a3b7" />
                <circle cx="516.22" cy="131.5" r="25.07" fill="#016db8" />
                <circle cx="556.25" cy="181.63" r="25.07" fill="#fef200" />
                <circle cx="563.79" cy="460.51" r="7.54" fill="#612d92" />
                <circle cx="245.38" cy="204.56" r="7.54" fill="#f58021" />
                <circle cx="382.28" cy="310.27" r="7.54" fill="#f58021" />
                <circle cx="407.54" cy="219.68" r="7.54" fill="#fef200" />
                <circle cx="370.33" cy="229.67" r="7.54" fill="#fef200" />
                <circle cx="353.1" cy="272.53" r="7.54" fill="#ee1c27" />
                <circle cx="368.66" cy="301.64" r="7.54" fill="#f58021" />
                <circle cx="361.12" cy="264.25" r="7.54" fill="#f58021" />
                <circle cx="403.67" cy="263.77" r="7.54" fill="#f58021" />
                <circle cx="410.01" cy="302.8" r="17.26" fill="#f58021" />
                <circle cx="424.05" cy="237.5" r="17.26" fill="#f58021" />
                <circle cx="336.37" cy="387.38" r="7.54" fill="#ee1c27" />
                <circle cx="461.92" cy="390" r="7.54" fill="#ee1c27" />
                <circle cx="511.25" cy="320.3" r="7.54" fill="#f35724" />
                <circle cx="522.3" cy="282.07" r="7.54" fill="#f58021" />
                <circle cx="433.96" cy="299.27" r="7.54" fill="#f58021" />
                <circle cx="408.67" cy="276.41" r="7.54" fill="#f58021" />
                <circle cx="419.26" cy="220.43" r="5.62" fill="#fdae15" />
                <circle cx="441.09" cy="239.09" r="5.65" fill="#fdad16" />
                <circle cx="351.21" cy="256.71" r="5.65" fill="#fdae15" />
                <circle cx="303.17" cy="193.2" r="5.65" fill="#fef200" />
                <circle cx="343.07" cy="158.62" r="5.65" fill="#00a666" />
                <circle cx="275.84" cy="266.34" r="7.54" fill="#fdae15" />
                <circle cx="296.04" cy="199.16" r="7.54" fill="#f58021" />
                <circle cx="335.53" cy="160.5" r="7.54" fill="#a6cf4d" />
                <circle cx="288.5" cy="140.8" r="7.54" fill="#a6cf4d" />
                <circle cx="229.82" cy="229.67" r="7.54" fill="#fdad16" />
                <circle cx="309.95" cy="362.86" r="7.54" fill="#ee1c27" />
                <circle cx="262.43" cy="405.66" r="7.54" fill="#ee1c27" />
                <circle cx="518.79" cy="387.38" r="7.54" fill="#ee1c27" />
                <circle cx="285.65" cy="312.52" r="7.54" fill="#f58021" />
                <circle cx="355.09" cy="408.54" r="7.54" fill="#ee1c27" />
                <circle cx="392.46" cy="452.98" r="7.54" fill="#bd0171" />
                <circle cx="365.19" cy="420.03" r="7.54" fill="#612d92" />
                <circle cx="398.45" cy="313.65" r="7.54" fill="#f35724" />
                <circle cx="381.95" cy="290.18" r="7.54" fill="#f58021" />
                <circle cx="425.41" cy="306.11" r="7.54" fill="#f58021" />
                <circle cx="497.17" cy="344.11" r="7.54" fill="#ee1c27" />
                <circle cx="380.56" cy="485.58" r="7.54" fill="#612d92" />
                <circle cx="308.38" cy="352.58" r="7.54" fill="#ee1c27" />
                <circle cx="445.44" cy="492.36" r="3.77" fill="#612d92" />
                <circle cx="213.96" cy="200.97" r="3.77" fill="#fef200" />
                <circle cx="549.67" cy="143.16" r="3.77" fill="#a6cf4d" />
                <circle cx="414.67" cy="437.38" r="3.77" fill="#bd0171" />
                <circle cx="419.7" cy="430.91" r="3.77" fill="#bd0171" />
                <circle cx="319.44" cy="361.07" r="3.77" fill="#ee1c27" />
                <circle cx="327.4" cy="371.01" r="3.77" fill="#ee1c27" />
                <circle cx="335.17" cy="380.48" r="3.77" fill="#ee1c27" />
                <circle cx="316.31" cy="355.72" r="3.14" fill="#ee1c27" />
                <circle cx="390.71" cy="443.41" r="3.14" fill="#bd0171" />
                <circle cx="363.16" cy="411.2" r="3.14" fill="#612d92" />
                <circle cx="242.62" cy="315.39" r="3.77" fill="#f35724" />
                <circle cx="280.36" cy="258.41" r="3.77" fill="#f58021" />
                <circle cx="284.73" cy="233.44" r="3.77" fill="#fdad16" />
                <circle cx="308.82" cy="188.07" r="3.77" fill="#fef200" />
                <circle cx="350.47" cy="157.09" r="3.77" fill="#00a666" />
                <circle cx="422.86" cy="141.83" r="10.38" fill="#00a666" />
                <circle cx="373.53" cy="132.51" r="10.38" fill="#02a3b7" />
                <circle cx="311.65" cy="175.91" r="10.38" fill="#fef200" />
                <circle cx="289.95" cy="183.88" r="10.38" fill="#fef200" />
                <circle cx="269.1" cy="262.88" r="10.38" fill="#f35724" />
                <circle cx="391.17" cy="302.73" r="10.38" fill="#f58021" />
                <circle cx="375.06" cy="263.9" r="10.38" fill="#f35724" />
                <circle cx="423.37" cy="289.16" r="10.38" fill="#f58021" />
                <circle cx="441.17" cy="249.66" r="10.38" fill="#f58021" />
                <circle cx="376.37" cy="303.34" r="10.32" fill="#fdae15" />
                <circle cx="378.22" cy="227.54" r="10.32" fill="#fdae15" />
                <circle cx="473.67" cy="163.13" r="10.38" fill="#00a666" />
                <circle cx="511.19" cy="205.63" r="10.38" fill="#fdae15" />
                <circle cx="506.21" cy="335.2" r="10.38" fill="#f35724" />
                <circle cx="522.92" cy="296.21" r="10.38" fill="#f35724" />
                <circle cx="458.43" cy="398.22" r="10.38" fill="#bc0271" />
                <circle cx="507.97" cy="394.7" r="10.38" fill="#bc0271" />
                <circle cx="535.52" cy="414.93" r="10.38" fill="#ee1c27" />
                <circle cx="263.12" cy="387.97" r="10.38" fill="#bc0271" />
                <circle cx="325.9" cy="379.84" r="10.38" fill="#ee1c27" />
                <circle cx="303.58" cy="161.72" r="3.77" fill="#a6cf4d" />
                <circle cx="320.71" cy="176.16" r="3.77" fill="#00a666" />
                <circle cx="387.79" cy="146.93" r="3.77" fill="#00a666" />
                <circle cx="413.76" cy="146.93" r="3.77" fill="#00a666" />
                <circle cx="439.16" cy="152.98" r="3.77" fill="#00a666" />
                <circle cx="458.63" cy="161.72" r="3.77" fill="#00a666" />
                <circle cx="477.13" cy="174.36" r="3.77" fill="#00a666" />
                <circle cx="487.81" cy="184.3" r="3.77" fill="#fef200" />
                <circle cx="245.85" cy="227.22" r="3.77" fill="#fdad16" />
                <circle cx="310.85" cy="372.28" r="3.77" fill="#ee1c27" />
                <circle cx="226.05" cy="435.52" r="3.77" fill="#612d92" />
                <circle cx="395.39" cy="290.18" r="3.77" fill="#f58021" />
                <circle cx="235.98" cy="264.25" r="3.77" fill="#f58021" />
                <circle cx="384.92" cy="96.05" r="3.77" fill="#283897" />
                <circle cx="489.63" cy="99.82" r="3.77" fill="#016db8" />
                <circle cx="471.59" cy="372.28" r="3.77" fill="#ee1c27" />
                <circle cx="431.59" cy="306.56" r="3.77" fill="#ee1c27" />
                <circle cx="441.5" cy="296.23" r="3.77" fill="#f58021" />
                <circle cx="405.99" cy="283.84" r="3.77" fill="#f35724" />
                <circle cx="389.82" cy="316.29" r="3.77" fill="#f35724" />
                <circle cx="412.44" cy="283.21" r="3.77" fill="#f58021" />
                <circle cx="409.01" cy="259.06" r="3.77" fill="#f58021" />
                <circle cx="391.17" cy="259.06" r="3.77" fill="#f58021" />
                <circle cx="348.92" cy="265.1" r="3.77" fill="#f58021" />
                <circle cx="477.69" cy="364.74" r="3.77" fill="#ee1c27" />
                <circle cx="586.98" cy="211.55" r="7.54" fill="#fef200" />
                <circle cx="485.4" cy="176.16" r="7.54" fill="#00a666" />
                <circle cx="431.59" cy="146.93" r="7.54" fill="#00a666" />
                <circle cx="378.18" cy="144.39" r="7.54" fill="#a6cf4d" />
                <circle cx="421.25" cy="107.77" r="7.54" fill="#02a3b7" />
                <circle cx="444.68" cy="96.05" r="7.54" fill="#02a3b7" />
                <circle cx="320.71" cy="369.1" r="7.54" fill="#f35724" />
                <circle cx="269.99" cy="346.47" r="36.19" fill="#ee1c27" />
                <circle cx="306.18" cy="342.7" r="3.77" fill="#f35724" />
                <circle cx="293" cy="319.16" r="3.77" fill="#f35724" />
            </g>
            <g class="heartDots">
           <circle cx="521.13" cy="400.23" r="36.19" fill="#ee1c27"/>
        <circle cx="228.91" cy="351.66" r="36.19" fill="#f35724"/>
        <circle cx="258.86" cy="338.28" r="16.79" fill="#f35724"/>
        <circle cx="605.3" cy="259.21" r="16.79" fill="#fdae15"/>
        <circle cx="502.76" cy="379.12" r="16.79" fill="#ee1c27"/>
        <circle cx="270.4" cy="369.98" r="16.79" fill="#ee1c27"/>
        <circle cx="557.95" cy="311.55" r="16.79" fill="#f35724"/>
        <circle cx="406.55" cy="156.73" r="16.79" fill="#00a666"/>
        <circle cx="318.38" cy="143.79" r="16.79" fill="#00a666"/>
        <circle cx="467.92" cy="142.98" r="16.79" fill="#00a666"/>
        <circle cx="269.31" cy="351.66" r="16.79" fill="#ee1c27"/>
        <circle cx="288.16" cy="151.72" r="16.79" fill="#00a666"/>
        <circle cx="327.43" cy="425.83" r="23.27" fill="#ee1c27"/>
        <circle cx="593.91" cy="257.37" r="23.27" fill="#fdae15"/>
        <circle cx="593.91" cy="196.72" r="23.27" fill="#fef200"/>
        <circle cx="579.52" cy="237.4" r="23.27" fill="#fdae15"/>
        <circle cx="399.42" cy="125.21" r="23.27" fill="#02a3b7"/>
        <circle cx="438.87" cy="140" r="23.27" fill="#016db8"/>
        <circle cx="495.15" cy="140" r="23.27" fill="#016db8"/>
        <circle cx="361.08" cy="140" r="23.27" fill="#016db8"/>
        <circle cx="347.41" cy="460.23" r="15.66" fill="#bd0171"/>
        <circle cx="234.1" cy="127.24" r="15.66" fill="#02a3b7"/>
        <circle cx="419.34" cy="453.15" r="15.66" fill="#bd0171"/>
        <circle cx="521.44" cy="359.53" r="15.66" fill="#ee1c27"/>
        <circle cx="231.35" cy="217.66" r="15.66" fill="#fef200"/>
        <circle cx="234.13" cy="295.04" r="15.66" fill="#f35724"/>
        <circle cx="210.82" cy="224.48" r="15.66" fill="#fef200"/>
        <circle cx="420.7" cy="477.13" r="15.66" fill="#bd0171"/>
        <circle cx="519.86" cy="412.42" r="15.66" fill="#ee1c27"/>
        <circle cx="247.01" cy="319.64" r="15.66" fill="#f35724"/>
        <circle cx="541.9" cy="158.4" r="15.66" fill="#fef200"/>
        <circle cx="518.42" cy="156.73" r="15.66" fill="#a6cf4d"/>
        <circle cx="359.63" cy="428.08" r="15.66" fill="#ee1c27"/>
        <circle cx="565.1" cy="211.41" r="15.66" fill="#fef200"/>
        <circle cx="570.2" cy="274.87" r="15.66" fill="#fdae15"/>
        <circle cx="548.92" cy="182.56" r="15.66" fill="#fef200"/>
        <circle cx="379.29" cy="155.66" r="15.66" fill="#00a666"/>
        <circle cx="413.19" cy="469.7" r="36.19" fill="#612d92"/>
        <circle cx="574.21" cy="169.42" r="36.19" fill="#00a666"/>
        <circle cx="290.56" cy="400.23" r="36.19" fill="#ee1c27"/>
        <circle cx="205.88" cy="260.67" r="36.19" fill="#fdae15"/>
        <circle cx="559.82" cy="345.32" r="36.19" fill="#f35724"/>
        <circle cx="456.31" cy="440.93" r="36.19" fill="#bc0271"/>
        <circle cx="231.35" cy="172.17" r="36.19" fill="#a6cf4d"/>
        <circle cx="323.7" cy="463.46" r="23.94" fill="#bd0171"/>
        <circle cx="199.53" cy="201.34" r="25.07" fill="#fef200"/>
        <circle cx="263.1" cy="145.5" r="25.07" fill="#00a666"/>
        <circle cx="537.9" cy="131.26" r="25.07" fill="#016db8"/>
        <circle cx="197.65" cy="306.92" r="25.07" fill="#f35724"/>
        <circle cx="467.92" cy="419.05" r="25.07" fill="#ee1c27"/>
        <circle cx="574.51" cy="294.57" r="25.07" fill="#f35724"/>
        <circle cx="381.48" cy="453.15" r="25.07" fill="#bd0171"/>
        <circle cx="190.11" cy="173.51" r="7.54" fill="#fef200"/>
        <circle cx="182" cy="287.6" r="7.54" fill="#f58021"/>
        <circle cx="189.54" cy="345.82" r="7.54" fill="#fdae15"/>
        <circle cx="235.83" cy="234.61" r="7.54" fill="#f35724"/>
        <circle cx="215.73" cy="133.23" r="7.54" fill="#00a666"/>
        <circle cx="486.22" cy="381.52" r="7.54" fill="#ee1c27"/>
        <circle cx="279.33" cy="166.91" r="7.54" fill="#fef200"/>
        <circle cx="246.82" cy="304.4" r="7.54" fill="#f35724"/>
        <circle cx="235.01" cy="280.06" r="10.38" fill="#f58021"/>
        <circle cx="545.67" cy="158.4" r="10.38" fill="#fef200"/>
        <circle cx="432.59" cy="473.84" r="10.38" fill="#bd0171"/>
        <circle cx="478.31" cy="392.39" r="10.38" fill="#f35724"/>
        <circle cx="534.01" cy="174.45" r="10.38" fill="#fef200"/>
        <circle cx="429.21" cy="428.08" r="10.38" fill="#612d92"/>
        <circle cx="353.32" cy="449.1" r="10.38" fill="#bd0171"/>
        <circle cx="228.85" cy="311.55" r="10.38" fill="#f35724"/>
        <circle cx="302.68" cy="141.07" r="10.38" fill="#a6cf4d"/>
        <circle cx="409.39" cy="440.93" r="10.38" fill="#bd0171"/>
        <circle cx="390.51" cy="169.79" r="10.38" fill="#fef200"/>
        <circle cx="341.62" cy="408.67" r="10.38" fill="#ee1c27"/>
        <circle cx="337.81" cy="149.19" r="10.38" fill="#00a666"/>
        <circle cx="425.96" cy="158.4" r="10.38" fill="#fef200"/>
        <circle cx="580.75" cy="116.73" r="3.77" fill="#016db8"/>
        <circle cx="174.67" cy="160.86" r="3.77" fill="#fef200"/>
        <circle cx="165.92" cy="312.9" r="3.77" fill="#f35724"/>
        <circle cx="373.43" cy="422.81" r="3.77" fill="#f35724"/>
        <circle cx="419.34" cy="426.58" r="3.77" fill="#612d92"/>
        <circle cx="466.68" cy="392.83" r="3.77" fill="#ee1c27"/>
        <circle cx="339.71" cy="399.01" r="3.77" fill="#f35724"/>
        <circle cx="357.09" cy="411.6" r="3.77" fill="#ee1c27"/>
        <circle cx="377.71" cy="425.83" r="3.77" fill="#f35724"/>
        <circle cx="383.67" cy="429.6" r="3.77" fill="#bc0271"/>
        <circle cx="523.63" cy="174.45" r="3.77" fill="#fef200"/>
        <circle cx="617.63" cy="300" r="3.77" fill="#f58021"/>
        <circle cx="560.02" cy="251.67" r="3.77" fill="#f35724"/>
        <circle cx="518.42" cy="140" r="3.77" fill="#00a666"/>
        <circle cx="373.92" cy="103.3" r="3.77" fill="#02a3b7"/>
        <circle cx="290.28" cy="437.49" r="3.77" fill="#bd0171"/>
        <circle cx="364.85" cy="162.48" r="3.77" fill="#fef200"/>
        <circle cx="345.34" cy="157.09" r="3.77" fill="#a6cf4d"/>
        <circle cx="330.01" cy="156" r="3.77" fill="#a6cf4d"/>
        <circle cx="309.29" cy="158.71" r="3.77" fill="#fdae15"/>
        <circle cx="286.26" cy="167.43" r="3.77" fill="#fef200"/>
        <circle cx="298.31" cy="162.04" r="3.77" fill="#fef200"/>
        <circle cx="251.2" cy="201.34" r="3.77" fill="#a6cf4d"/>
        <circle cx="521.13" cy="342.05" r="3.77" fill="#f58021"/>
        <circle cx="549.44" cy="205.76" r="3.77" fill="#fef200"/>
        <circle cx="413.16" cy="174.45" r="3.77" fill="#fef200"/>
        <circle cx="502.02" cy="162.17" r="3.77" fill="#fef200"/>
        <circle cx="393.95" cy="181.1" r="3.77" fill="#fef200"/>
        <circle cx="478.31" cy="156.73" r="3.77" fill="#02a3b7"/>
        <circle cx="238.78" cy="244.4" r="3.77" fill="#f58021"/>
        <circle cx="293.8" cy="120.43" r="3.77" fill="#016db8"/>
        <circle cx="224.62" cy="391.21" r="3.77" fill="#bc0271"/>
        <circle cx="261.77" cy="186.92" r="3.77" fill="#a6cf4d"/>
        <circle cx="381.48" cy="487.4" r="3.77" fill="#612d92"/>
        <circle cx="286.51" cy="351.66" r="3.77" fill="#fdae15"/>
        <circle cx="239.6" cy="268.93" r="3.77" fill="#fdae15"/>
        <circle cx="243.37" cy="285.01" r="3.77" fill="#f58021"/>
        <circle cx="252.79" cy="306.92" r="3.77" fill="#f35724"/>
        <circle cx="352" cy="407.83" r="3.77" fill="#f35724"/>
        <circle cx="571.33" cy="393.99" r="3.77" fill="#ee1c27"/>
        <circle cx="375.29" cy="120.5" r="3.77" fill="#016db8"/>
        <circle cx="301.43" cy="366.21" r="3.77" fill="#ee1c27"/>
        <circle cx="398.68" cy="437.73" r="3.77" fill="#612d92"/>
        <circle cx="399.28" cy="186.92" r="3.77" fill="#fdae15"/>
        <circle cx="266.63" cy="181.99" r="3.77" fill="#00a666"/>
        <circle cx="248.8" cy="205.77" r="3.77" fill="#fef200"/>
        <circle cx="596.01" cy="279.38" r="7.54" fill="#f58021"/>
        <circle cx="502.76" cy="419.96" r="7.54" fill="#ee1c27"/>
        <circle cx="561.44" cy="227.07" r="7.54" fill="#fdae15"/>
        <circle cx="549.44" cy="198.22" r="7.54" fill="#a6cf4d"/>
        <circle cx="332.17" cy="397.76" r="7.54" fill="#ee1c27"/>
        <circle cx="505.79" cy="364.03" r="7.54" fill="#ee1c27"/>
        <circle cx="242.08" cy="211.41" r="7.54" fill="#fdae15"/>
        <circle cx="403.89" cy="177.33" r="7.54" fill="#a6cf4d"/>
        <circle cx="418.42" cy="165.94" r="7.54" fill="#fef200"/>
        <circle cx="301.59" cy="156.73" r="7.54" fill="#fef200"/>
        <circle cx="269.31" cy="174.45" r="7.54" fill="#fef200"/>
        <circle cx="610.41" cy="303.77" r="7.54" fill="#f35724"/>
        <circle cx="279.33" cy="439.51" r="7.54" fill="#612d92"/>
        <circle cx="343.97" cy="443.74" r="7.54" fill="#f35724"/>
        <circle cx="454.59" cy="153.04" r="7.54" fill="#02a3b7"/>
        <circle cx="422.73" cy="117.33" r="7.54" fill="#02a3b7"/>
        <circle cx="413.16" cy="434.99" r="7.54" fill="#bd0171"/>
        <circle cx="349.16" cy="415.37" r="7.54" fill="#bd0171"/>
        <circle cx="563.79" cy="260.67" r="7.54" fill="#fdae15"/>
        <circle cx="288.43" cy="359.2" r="7.54" fill="#f58021"/>
        <circle cx="323.7" cy="390.75" r="7.54" fill="#f35724"/>
        <circle cx="262.67" cy="376.32" r="16.79" fill="#f35724"/>
            </g>
 
</svg>

 </div>
 </body>
body {
 overflow: hidden;
 text-align:center;
  display: flex;
/*   align-items: center;
  justify-content: center;  */
}
header {
 align-items: center;
 justify-content: center;
}
p{
 text-align:center;
}
.pic {
 
}
body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 background: lightblue;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
}
.pic{
 width: 100%;
 height: 100%;
}
#picture {
 background-repeat: no-repeat;
}
 img {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 z-index: 1;
 background-color: pink;
  text-align: center;
  
} 
 .heart {
  position: absolute;
  margin: 48% 58%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform:rotate(-45deg);
} 
.heart::after {
 position: absolute;
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
 position: absolute;
  content:'' ;
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
.container {
  position: relative;
}

/* .center {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
} */
.locationDots circle, .heartDots circle {
 mix-blend-mode: multiply;
 
}
var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    allLocationDots = Array.from(selectAll('.locationDots circle')),
    allHeartDots = Array.from(selectAll('.heartDots circle')),
    shuffle = function (array){
        var currentIndex = array.length, temporaryValue, randomIndex;

        // While there remain elements to shuffle...
        while (0 !== currentIndex) {

          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;

          // And swap it with the current element.
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
        }

        return array;
      },
    randomBetween = function (min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
  
var softEase = CustomEase.create("", "M0,0 C0.302,0 0.436,0.35 0.498,0.502 0.564,0.664 0.702,1 1,1");
var softIn = CustomEase.create("", "M0,0 C0.244,0.014 0.592,0.058 0.73,0.22 0.878,0.394 0.988,0.84 1,1");

TweenMax.set('svg', {
  visibility: 'visible'
})
TweenMax.set(allLocationDots, {
 alpha: function () {
  return randomBetween(5, 8)/10;
 },
 transformOrigin: '50% 50%'
})
TweenMax.set(allHeartDots, {
 alpha: function () {
  return randomBetween(5, 8)/10;
 },
 transformOrigin: '50% 50%'
})

TweenLite.defaultEase = softEase;

allLocationDots = shuffle(allLocationDots);
allHeartDots = shuffle(allHeartDots);

var tl = new TimelineMax({repeat: -1}).timeScale(3);
tl.staggerFrom(allLocationDots, 1, {
 cycle: {
  duration: function () {
   return randomBetween(10, 35)/10
  }  
 },
  y: -60,
scale: 0 
}, 0.008)
.staggerTo(allHeartDots, 1, {
 cycle: {
  duration: function () {
   return randomBetween(10, 15)/10
  }
 },
  y: 60,
  scale: 0,
 ease: softIn
}, 0.008, 0)
.staggerTo(allLocationDots, 1, {
 cycle: {
  duration: function () {
   return randomBetween(10, 15)/10
  }
 },
  y: 60,
  scale: 0 ,
 ease: softIn
}, 0.008, '-=0.5')
.staggerFromTo(allHeartDots, 1, {
 y: -60,
 scale: 0
}, {
 cycle: {
  duration: function () {
   return randomBetween(10, 35)/10
  }  
 },
  y: 0,
scale: 1 ,
 immediateRender: false
}, 0.008, '-=' + tl.recent().duration())

//ScrubGSAPTimeline(tl);
//TweenMax.globalTimeScale(0.3333)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js