<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<defs>
<g id="dotContainer" >
<circle cx="221.41" cy="467.38" r="4"/>
<circle cx="233.34" cy="467.38" r="4"/>
<circle cx="245.26" cy="467.38" r="4"/>
<circle cx="245.26" cy="455.45" r="4"/>
<circle cx="257.19" cy="467.38" r="4"/>
<circle cx="257.19" cy="455.45" r="4"/>
<circle cx="257.19" cy="443.53" r="4"/>
<circle cx="257.19" cy="383.9" r="4"/>
<circle cx="269.11" cy="467.38" r="4"/>
<circle cx="269.11" cy="455.45" r="4"/>
<circle cx="269.11" cy="443.53" r="4"/>
<circle cx="269.11" cy="383.9" r="4"/>
<circle cx="269.11" cy="371.98" r="4"/>
<circle cx="281.04" cy="467.38" r="4"/>
<circle cx="281.04" cy="455.45" r="4"/>
<circle cx="281.04" cy="443.53" r="4"/>
<circle cx="281.04" cy="431.6" r="4"/>
<circle cx="281.04" cy="383.9" r="4"/>
<circle cx="281.04" cy="371.98" r="4"/>
<circle cx="281.04" cy="360.05" r="4"/>
<circle cx="292.96" cy="467.38" r="4"/>
<circle cx="292.96" cy="455.45" r="4"/>
<circle cx="292.96" cy="443.53" r="4"/>
<circle cx="292.96" cy="431.6" r="4"/>
<circle cx="292.96" cy="419.68" r="4"/>
<circle cx="292.96" cy="383.9" r="4"/>
<circle cx="292.96" cy="371.98" r="4"/>
<circle cx="292.96" cy="360.05" r="4"/>
<circle cx="292.96" cy="348.13" r="4"/>
<circle cx="304.89" cy="467.38" r="4"/>
<circle cx="304.89" cy="455.45" r="4"/>
<circle cx="304.89" cy="443.53" r="4"/>
<circle cx="304.89" cy="431.6" r="4"/>
<circle cx="304.89" cy="419.68" r="4"/>
<circle cx="304.89" cy="407.75" r="4"/>
<circle cx="304.89" cy="371.98" r="4"/>
<circle cx="304.89" cy="360.05" r="4"/>
<circle cx="304.89" cy="348.13" r="4"/>
<circle cx="304.89" cy="336.2" r="4"/>
<circle cx="304.89" cy="288.5" r="4"/>
<circle cx="316.81" cy="467.38" r="4"/>
<circle cx="316.81" cy="455.45" r="4"/>
<circle cx="316.81" cy="443.53" r="4"/>
<circle cx="316.81" cy="431.6" r="4"/>
<circle cx="316.81" cy="419.68" r="4"/>
<circle cx="316.81" cy="407.75" r="4"/>
<circle cx="316.81" cy="395.83" r="4"/>
<circle cx="316.81" cy="371.98" r="4"/>
<circle cx="316.81" cy="360.05" r="4"/>
<circle cx="316.81" cy="348.13" r="4"/>
<circle cx="316.81" cy="336.2" r="4"/>
<circle cx="316.81" cy="324.28" r="4"/>
<circle cx="316.81" cy="288.5" r="4"/>
<circle cx="316.81" cy="276.58" r="4"/>
<circle cx="316.81" cy="264.65" r="4"/>
<circle cx="328.74" cy="467.38" r="4"/>
<circle cx="328.74" cy="455.45" r="4"/>
<circle cx="328.74" cy="443.53" r="4"/>
<circle cx="328.74" cy="431.6" r="4"/>
<circle cx="328.74" cy="419.68" r="4"/>
<circle cx="328.74" cy="407.75" r="4"/>
<circle cx="328.74" cy="395.83" r="4"/>
<circle cx="328.74" cy="383.9" r="4"/>
<circle cx="328.74" cy="371.98" r="4"/>
<circle cx="328.74" cy="360.05" r="4"/>
<circle cx="328.74" cy="348.13" r="4"/>
<circle cx="328.74" cy="336.2" r="4"/>
<circle cx="328.74" cy="324.28" r="4"/>
<circle cx="328.74" cy="312.35" r="4"/>
<circle cx="328.74" cy="276.58" r="4"/>
<circle cx="328.74" cy="264.65" r="4"/>
<circle cx="328.74" cy="252.73" r="4"/>
<circle cx="340.66" cy="467.38" r="4"/>
<circle cx="340.66" cy="455.45" r="4"/>
<circle cx="340.66" cy="443.53" r="4"/>
<circle cx="340.66" cy="431.6" r="4"/>
<circle cx="340.66" cy="419.68" r="4"/>
<circle cx="340.66" cy="407.75" r="4"/>
<circle cx="340.66" cy="395.83" r="4"/>
<circle cx="340.66" cy="383.9" r="4"/>
<circle cx="340.66" cy="371.98" r="4"/>
<circle cx="340.66" cy="360.05" r="4"/>
<circle cx="340.66" cy="348.13" r="4"/>
<circle cx="340.66" cy="336.2" r="4"/>
<circle cx="340.66" cy="324.28" r="4"/>
<circle cx="340.66" cy="312.35" r="4"/>
<circle cx="340.66" cy="300.43" r="4"/>
<circle cx="340.66" cy="276.58" r="4"/>
<circle cx="340.66" cy="264.65" r="4"/>
<circle cx="340.66" cy="252.73" r="4"/>
<circle cx="340.66" cy="240.8" r="4"/>
<circle cx="340.66" cy="205.03" r="4"/>
<circle cx="340.66" cy="193.1" r="4"/>
<circle cx="352.59" cy="467.38" r="4"/>
<circle cx="352.59" cy="455.45" r="4"/>
<circle cx="352.59" cy="443.53" r="4"/>
<circle cx="352.59" cy="431.6" r="4"/>
<circle cx="352.59" cy="419.68" r="4"/>
<circle cx="352.59" cy="407.75" r="4"/>
<circle cx="352.59" cy="395.83" r="4"/>
<circle cx="352.59" cy="383.9" r="4"/>
<circle cx="352.59" cy="371.98" r="4"/>
<circle cx="352.59" cy="360.05" r="4"/>
<circle cx="352.59" cy="348.13" r="4"/>
<circle cx="352.59" cy="336.2" r="4"/>
<circle cx="352.59" cy="324.28" r="4"/>
<circle cx="352.59" cy="312.35" r="4"/>
<circle cx="352.59" cy="300.43" r="4"/>
<circle cx="352.59" cy="288.5" r="4"/>
<circle cx="352.59" cy="276.58" r="4"/>
<circle cx="352.59" cy="264.65" r="4"/>
<circle cx="352.59" cy="252.73" r="4"/>
<circle cx="352.59" cy="240.8" r="4"/>
<circle cx="352.59" cy="228.88" r="4"/>
<circle cx="352.59" cy="193.1" r="4"/>
<circle cx="352.59" cy="181.18" r="4"/>
<circle cx="352.59" cy="169.25" r="4"/>
<circle cx="364.51" cy="467.38" r="4"/>
<circle cx="364.51" cy="455.45" r="4"/>
<circle cx="364.51" cy="443.53" r="4"/>
<circle cx="364.51" cy="431.6" r="4"/>
<circle cx="364.51" cy="419.68" r="4"/>
<circle cx="364.51" cy="407.75" r="4"/>
<circle cx="364.51" cy="395.83" r="4"/>
<circle cx="364.51" cy="383.9" r="4"/>
<circle cx="364.51" cy="371.98" r="4"/>
<circle cx="364.51" cy="360.05" r="4"/>
<circle cx="364.51" cy="348.13" r="4"/>
<circle cx="364.51" cy="336.2" r="4"/>
<circle cx="364.51" cy="324.28" r="4"/>
<circle cx="364.51" cy="312.35" r="4"/>
<circle cx="364.51" cy="300.43" r="4"/>
<circle cx="364.51" cy="288.5" r="4"/>
<circle cx="364.51" cy="276.58" r="4"/>
<circle cx="364.51" cy="264.65" r="4"/>
<circle cx="364.51" cy="252.73" r="4"/>
<circle cx="364.51" cy="240.8" r="4"/>
<circle cx="364.51" cy="228.88" r="4"/>
<circle cx="364.51" cy="216.95" r="4"/>
<circle cx="364.51" cy="205.03" r="4"/>
<circle cx="364.51" cy="193.1" r="4"/>
<circle cx="364.51" cy="181.18" r="4"/>
<circle cx="364.51" cy="169.25" r="4"/>
<circle cx="364.51" cy="157.33" r="4"/>
<circle cx="376.44" cy="455.45" r="4"/>
<circle cx="376.44" cy="443.53" r="4"/>
<circle cx="376.44" cy="431.6" r="4"/>
<circle cx="376.44" cy="419.68" r="4"/>
<circle cx="376.44" cy="407.75" r="4"/>
<circle cx="376.44" cy="395.83" r="4"/>
<circle cx="376.44" cy="383.9" r="4"/>
<circle cx="376.44" cy="371.98" r="4"/>
<circle cx="376.44" cy="360.05" r="4"/>
<circle cx="376.44" cy="348.13" r="4"/>
<circle cx="376.44" cy="336.2" r="4"/>
<circle cx="376.44" cy="324.28" r="4"/>
<circle cx="376.44" cy="312.35" r="4"/>
<circle cx="376.44" cy="300.43" r="4"/>
<circle cx="376.44" cy="288.5" r="4"/>
<circle cx="376.44" cy="276.58" r="4"/>
<circle cx="376.44" cy="264.65" r="4"/>
<circle cx="376.44" cy="252.73" r="4"/>
<circle cx="376.44" cy="240.8" r="4"/>
<circle cx="376.44" cy="228.88" r="4"/>
<circle cx="376.44" cy="216.95" r="4"/>
<circle cx="376.44" cy="205.03" r="4"/>
<circle cx="376.44" cy="193.1" r="4"/>
<circle cx="376.44" cy="181.18" r="4"/>
<circle cx="376.44" cy="169.25" r="4"/>
<circle cx="376.44" cy="157.33" r="4"/>
<circle cx="376.44" cy="145.4" r="4"/>
<circle cx="376.44" cy="133.48" r="4"/>
<circle cx="388.36" cy="527" r="4"/>
<circle cx="388.36" cy="515.08" r="4"/>
<circle cx="388.36" cy="503.15" r="4"/>
<circle cx="388.36" cy="491.23" r="4"/>
<circle cx="388.36" cy="479.3" r="4"/>
<circle cx="388.36" cy="467.38" r="4"/>
<circle cx="388.36" cy="455.45" r="4"/>
<circle cx="388.36" cy="443.53" r="4"/>
<circle cx="388.36" cy="431.6" r="4"/>
<circle cx="388.36" cy="419.68" r="4"/>
<circle cx="388.36" cy="407.75" r="4"/>
<circle cx="388.36" cy="395.83" r="4"/>
<circle cx="388.36" cy="383.9" r="4"/>
<circle cx="388.36" cy="371.98" r="4"/>
<circle cx="388.36" cy="360.05" r="4"/>
<circle cx="388.36" cy="348.13" r="4"/>
<circle cx="388.36" cy="336.2" r="4"/>
<circle cx="388.36" cy="324.28" r="4"/>
<circle cx="388.36" cy="312.35" r="4"/>
<circle cx="388.36" cy="300.43" r="4"/>
<circle cx="388.36" cy="288.5" r="4"/>
<circle cx="388.36" cy="276.58" r="4"/>
<circle cx="388.36" cy="264.65" r="4"/>
<circle cx="388.36" cy="252.73" r="4"/>
<circle cx="388.36" cy="240.8" r="4"/>
<circle cx="388.36" cy="228.88" r="4"/>
<circle cx="388.36" cy="216.95" r="4"/>
<circle cx="388.36" cy="205.03" r="4"/>
<circle cx="388.36" cy="193.1" r="4"/>
<circle cx="388.36" cy="181.18" r="4"/>
<circle cx="388.36" cy="169.25" r="4"/>
<circle cx="388.36" cy="157.33" r="4"/>
<circle cx="388.36" cy="145.4" r="4"/>
<circle cx="388.36" cy="133.48" r="4"/>
<circle cx="388.36" cy="121.55" r="4"/>
<circle cx="388.36" cy="109.63" r="4"/>
<circle cx="400.29" cy="527" r="4"/>
<circle cx="400.29" cy="515.08" r="4"/>
<circle cx="400.29" cy="503.15" r="4"/>
<circle cx="400.29" cy="491.23" r="4"/>
<circle cx="400.29" cy="479.3" r="4"/>
<circle cx="400.29" cy="467.38" r="4"/>
<circle cx="400.29" cy="455.45" r="4"/>
<circle cx="400.29" cy="443.53" r="4"/>
<circle cx="400.29" cy="431.6" r="4"/>
<circle cx="400.29" cy="419.68" r="4"/>
<circle cx="400.29" cy="407.75" r="4"/>
<circle cx="400.29" cy="395.83" r="4"/>
<circle cx="400.29" cy="383.9" r="4"/>
<circle cx="400.29" cy="371.98" r="4"/>
<circle cx="400.29" cy="360.05" r="4"/>
<circle cx="400.29" cy="348.13" r="4"/>
<circle cx="400.29" cy="336.2" r="4"/>
<circle cx="400.29" cy="324.28" r="4"/>
<circle cx="400.29" cy="312.35" r="4"/>
<circle cx="400.29" cy="300.43" r="4"/>
<circle cx="400.29" cy="288.5" r="4"/>
<circle cx="400.29" cy="276.58" r="4"/>
<circle cx="400.29" cy="264.65" r="4"/>
<circle cx="400.29" cy="252.73" r="4"/>
<circle cx="400.29" cy="240.8" r="4"/>
<circle cx="400.29" cy="228.88" r="4"/>
<circle cx="400.29" cy="216.95" r="4"/>
<circle cx="400.29" cy="205.03" r="4"/>
<circle cx="400.29" cy="193.1" r="4"/>
<circle cx="400.29" cy="181.18" r="4"/>
<circle cx="400.29" cy="169.25" r="4"/>
<circle cx="400.29" cy="157.33" r="4"/>
<circle cx="400.29" cy="145.4" r="4"/>
<circle cx="400.29" cy="133.48" r="4"/>
<circle cx="400.29" cy="121.55" r="4"/>
<circle cx="400.29" cy="109.63" r="4"/>
<circle cx="400.29" cy="97.7" r="4"/>
<circle cx="400.29" cy="85.78" r="4"/>
<circle cx="400.29" cy="73.85" r="4"/>
<circle cx="412.21" cy="527" r="4"/>
<circle cx="412.21" cy="515.08" r="4"/>
<circle cx="412.21" cy="503.15" r="4"/>
<circle cx="412.21" cy="491.23" r="4"/>
<circle cx="412.21" cy="479.3" r="4"/>
<circle cx="412.21" cy="467.38" r="4"/>
<circle cx="412.21" cy="455.45" r="4"/>
<circle cx="412.21" cy="443.53" r="4"/>
<circle cx="412.21" cy="431.6" r="4"/>
<circle cx="412.21" cy="419.68" r="4"/>
<circle cx="412.21" cy="407.75" r="4"/>
<circle cx="412.21" cy="395.83" r="4"/>
<circle cx="412.21" cy="383.9" r="4"/>
<circle cx="412.21" cy="371.98" r="4"/>
<circle cx="412.21" cy="360.05" r="4"/>
<circle cx="412.21" cy="348.13" r="4"/>
<circle cx="412.21" cy="336.2" r="4"/>
<circle cx="412.21" cy="324.28" r="4"/>
<circle cx="412.21" cy="312.35" r="4"/>
<circle cx="412.21" cy="300.43" r="4"/>
<circle cx="412.21" cy="288.5" r="4"/>
<circle cx="412.21" cy="276.58" r="4"/>
<circle cx="412.21" cy="264.65" r="4"/>
<circle cx="412.21" cy="252.73" r="4"/>
<circle cx="412.21" cy="240.8" r="4"/>
<circle cx="412.21" cy="228.88" r="4"/>
<circle cx="412.21" cy="216.95" r="4"/>
<circle cx="412.21" cy="205.03" r="4"/>
<circle cx="412.21" cy="193.1" r="4"/>
<circle cx="412.21" cy="181.18" r="4"/>
<circle cx="412.21" cy="169.25" r="4"/>
<circle cx="412.21" cy="157.33" r="4"/>
<circle cx="412.21" cy="145.4" r="4"/>
<circle cx="412.21" cy="133.48" r="4"/>
<circle cx="412.21" cy="121.55" r="4"/>
<circle cx="412.21" cy="109.63" r="4"/>
<circle cx="412.21" cy="97.7" r="4"/>
<circle cx="412.21" cy="85.78" r="4"/>
<circle cx="424.14" cy="527" r="4"/>
<circle cx="424.14" cy="515.08" r="4"/>
<circle cx="424.14" cy="503.15" r="4"/>
<circle cx="424.14" cy="491.23" r="4"/>
<circle cx="424.14" cy="479.3" r="4"/>
<circle cx="424.14" cy="467.38" r="4"/>
<circle cx="424.14" cy="455.45" r="4"/>
<circle cx="424.14" cy="443.53" r="4"/>
<circle cx="424.14" cy="431.6" r="4"/>
<circle cx="424.14" cy="419.68" r="4"/>
<circle cx="424.14" cy="407.75" r="4"/>
<circle cx="424.14" cy="395.83" r="4"/>
<circle cx="424.14" cy="383.9" r="4"/>
<circle cx="424.14" cy="371.98" r="4"/>
<circle cx="424.14" cy="360.05" r="4"/>
<circle cx="424.14" cy="348.13" r="4"/>
<circle cx="424.14" cy="336.2" r="4"/>
<circle cx="424.14" cy="324.28" r="4"/>
<circle cx="424.14" cy="312.35" r="4"/>
<circle cx="424.14" cy="300.43" r="4"/>
<circle cx="424.14" cy="288.5" r="4"/>
<circle cx="424.14" cy="276.58" r="4"/>
<circle cx="424.14" cy="264.65" r="4"/>
<circle cx="424.14" cy="252.73" r="4"/>
<circle cx="424.14" cy="240.8" r="4"/>
<circle cx="424.14" cy="228.88" r="4"/>
<circle cx="424.14" cy="216.95" r="4"/>
<circle cx="424.14" cy="205.03" r="4"/>
<circle cx="424.14" cy="193.1" r="4"/>
<circle cx="424.14" cy="181.18" r="4"/>
<circle cx="424.14" cy="169.25" r="4"/>
<circle cx="424.14" cy="157.33" r="4"/>
<circle cx="424.14" cy="145.4" r="4"/>
<circle cx="424.14" cy="133.48" r="4"/>
<circle cx="424.14" cy="121.55" r="4"/>
<circle cx="424.14" cy="109.63" r="4"/>
<circle cx="436.06" cy="455.45" r="4"/>
<circle cx="436.06" cy="443.53" r="4"/>
<circle cx="436.06" cy="431.6" r="4"/>
<circle cx="436.06" cy="419.68" r="4"/>
<circle cx="436.06" cy="407.75" r="4"/>
<circle cx="436.06" cy="395.83" r="4"/>
<circle cx="436.06" cy="383.9" r="4"/>
<circle cx="436.06" cy="371.98" r="4"/>
<circle cx="436.06" cy="360.05" r="4"/>
<circle cx="436.06" cy="348.13" r="4"/>
<circle cx="436.06" cy="336.2" r="4"/>
<circle cx="436.06" cy="324.28" r="4"/>
<circle cx="436.06" cy="312.35" r="4"/>
<circle cx="436.06" cy="300.43" r="4"/>
<circle cx="436.06" cy="288.5" r="4"/>
<circle cx="436.06" cy="276.58" r="4"/>
<circle cx="436.06" cy="264.65" r="4"/>
<circle cx="436.06" cy="252.73" r="4"/>
<circle cx="436.06" cy="240.8" r="4"/>
<circle cx="436.06" cy="228.88" r="4"/>
<circle cx="436.06" cy="216.95" r="4"/>
<circle cx="436.06" cy="205.03" r="4"/>
<circle cx="436.06" cy="193.1" r="4"/>
<circle cx="436.06" cy="181.18" r="4"/>
<circle cx="436.06" cy="169.25" r="4"/>
<circle cx="436.06" cy="157.33" r="4"/>
<circle cx="436.06" cy="145.4" r="4"/>
<circle cx="436.06" cy="133.48" r="4"/>
<circle cx="447.99" cy="467.38" r="4"/>
<circle cx="447.99" cy="455.45" r="4"/>
<circle cx="447.99" cy="443.53" r="4"/>
<circle cx="447.99" cy="431.6" r="4"/>
<circle cx="447.99" cy="419.68" r="4"/>
<circle cx="447.99" cy="407.75" r="4"/>
<circle cx="447.99" cy="395.83" r="4"/>
<circle cx="447.99" cy="383.9" r="4"/>
<circle cx="447.99" cy="371.98" r="4"/>
<circle cx="447.99" cy="360.05" r="4"/>
<circle cx="447.99" cy="348.13" r="4"/>
<circle cx="447.99" cy="336.2" r="4"/>
<circle cx="447.99" cy="324.28" r="4"/>
<circle cx="447.99" cy="312.35" r="4"/>
<circle cx="447.99" cy="300.43" r="4"/>
<circle cx="447.99" cy="288.5" r="4"/>
<circle cx="447.99" cy="276.58" r="4"/>
<circle cx="447.99" cy="264.65" r="4"/>
<circle cx="447.99" cy="252.73" r="4"/>
<circle cx="447.99" cy="240.8" r="4"/>
<circle cx="447.99" cy="228.88" r="4"/>
<circle cx="447.99" cy="216.95" r="4"/>
<circle cx="447.99" cy="193.1" r="4"/>
<circle cx="447.99" cy="181.18" r="4"/>
<circle cx="447.99" cy="169.25" r="4"/>
<circle cx="447.99" cy="157.33" r="4"/>
<circle cx="459.91" cy="467.38" r="4"/>
<circle cx="459.91" cy="455.45" r="4"/>
<circle cx="459.91" cy="443.53" r="4"/>
<circle cx="459.91" cy="431.6" r="4"/>
<circle cx="459.91" cy="419.68" r="4"/>
<circle cx="459.91" cy="407.75" r="4"/>
<circle cx="459.91" cy="395.83" r="4"/>
<circle cx="459.91" cy="383.9" r="4"/>
<circle cx="459.91" cy="371.98" r="4"/>
<circle cx="459.91" cy="360.05" r="4"/>
<circle cx="459.91" cy="348.13" r="4"/>
<circle cx="459.91" cy="336.2" r="4"/>
<circle cx="459.91" cy="324.28" r="4"/>
<circle cx="459.91" cy="312.35" r="4"/>
<circle cx="459.91" cy="300.43" r="4"/>
<circle cx="459.91" cy="288.5" r="4"/>
<circle cx="459.91" cy="276.58" r="4"/>
<circle cx="459.91" cy="264.65" r="4"/>
<circle cx="459.91" cy="252.73" r="4"/>
<circle cx="459.91" cy="240.8" r="4"/>
<circle cx="459.91" cy="228.88" r="4"/>
<circle cx="459.91" cy="193.1" r="4"/>
<circle cx="459.91" cy="181.18" r="4"/>
<circle cx="471.84" cy="467.38" r="4"/>
<circle cx="471.84" cy="455.45" r="4"/>
<circle cx="471.84" cy="443.53" r="4"/>
<circle cx="471.84" cy="431.6" r="4"/>
<circle cx="471.84" cy="419.68" r="4"/>
<circle cx="471.84" cy="407.75" r="4"/>
<circle cx="471.84" cy="395.83" r="4"/>
<circle cx="471.84" cy="383.9" r="4"/>
<circle cx="471.84" cy="371.98" r="4"/>
<circle cx="471.84" cy="360.05" r="4"/>
<circle cx="471.84" cy="348.13" r="4"/>
<circle cx="471.84" cy="336.2" r="4"/>
<circle cx="471.84" cy="324.28" r="4"/>
<circle cx="471.84" cy="312.35" r="4"/>
<circle cx="471.84" cy="300.43" r="4"/>
<circle cx="471.84" cy="276.58" r="4"/>
<circle cx="471.84" cy="264.65" r="4"/>
<circle cx="471.84" cy="252.73" r="4"/>
<circle cx="471.84" cy="240.8" r="4"/>
<circle cx="471.84" cy="205.03" r="4"/>
<circle cx="483.76" cy="467.38" r="4"/>
<circle cx="483.76" cy="455.45" r="4"/>
<circle cx="483.76" cy="443.53" r="4"/>
<circle cx="483.76" cy="431.6" r="4"/>
<circle cx="483.76" cy="419.68" r="4"/>
<circle cx="483.76" cy="407.75" r="4"/>
<circle cx="483.76" cy="395.83" r="4"/>
<circle cx="483.76" cy="383.9" r="4"/>
<circle cx="483.76" cy="371.98" r="4"/>
<circle cx="483.76" cy="360.05" r="4"/>
<circle cx="483.76" cy="348.13" r="4"/>
<circle cx="483.76" cy="336.2" r="4"/>
<circle cx="483.76" cy="324.28" r="4"/>
<circle cx="483.76" cy="312.35" r="4"/>
<circle cx="483.76" cy="276.58" r="4"/>
<circle cx="483.76" cy="264.65" r="4"/>
<circle cx="495.69" cy="467.38" r="4"/>
<circle cx="495.69" cy="455.45" r="4"/>
<circle cx="495.69" cy="443.53" r="4"/>
<circle cx="495.69" cy="431.6" r="4"/>
<circle cx="495.69" cy="419.68" r="4"/>
<circle cx="495.69" cy="407.75" r="4"/>
<circle cx="495.69" cy="395.83" r="4"/>
<circle cx="495.69" cy="371.98" r="4"/>
<circle cx="495.69" cy="360.05" r="4"/>
<circle cx="495.69" cy="348.13" r="4"/>
<circle cx="495.69" cy="336.2" r="4"/>
<circle cx="495.69" cy="288.5" r="4"/>
<circle cx="495.69" cy="276.58" r="4"/>
<circle cx="507.61" cy="467.38" r="4"/>
<circle cx="507.61" cy="455.45" r="4"/>
<circle cx="507.61" cy="443.53" r="4"/>
<circle cx="507.61" cy="431.6" r="4"/>
<circle cx="507.61" cy="419.68" r="4"/>
<circle cx="507.61" cy="407.75" r="4"/>
<circle cx="507.61" cy="371.98" r="4"/>
<circle cx="507.61" cy="360.05" r="4"/>
<circle cx="507.61" cy="348.13" r="4"/>
<circle cx="507.61" cy="288.5" r="4"/>
<circle cx="519.54" cy="467.38" r="4"/>
<circle cx="519.54" cy="455.45" r="4"/>
<circle cx="519.54" cy="443.53" r="4"/>
<circle cx="519.54" cy="431.6" r="4"/>
<circle cx="519.54" cy="419.68" r="4"/>
<circle cx="519.54" cy="383.9" r="4"/>
<circle cx="519.54" cy="371.98" r="4"/>
<circle cx="519.54" cy="360.05" r="4"/>
<circle cx="531.46" cy="467.38" r="4"/>
<circle cx="531.46" cy="455.45" r="4"/>
<circle cx="531.46" cy="443.53" r="4"/>
<circle cx="531.46" cy="431.6" r="4"/>
<circle cx="531.46" cy="383.9" r="4"/>
<circle cx="531.46" cy="371.98" r="4"/>
<circle cx="543.38" cy="467.38" r="4"/>
<circle cx="543.38" cy="455.45" r="4"/>
<circle cx="543.38" cy="443.53" r="4"/>
<circle cx="543.38" cy="383.9" r="4"/>
<circle cx="555.31" cy="467.38" r="4"/>
<circle cx="555.31" cy="455.45" r="4"/>
<circle cx="567.23" cy="467.38" r="4"/>
<circle cx="567.23" cy="455.45" r="4"/>
<circle cx="579.16" cy="467.38" r="4"/>
<circle cx="412.21" cy="73.85" r="4"/>
</g>
<circle class="dot" cx="0" cy="0" r="2" fill="#696969"/>
</defs>
<g id="f"></g>
<g id="whole" opacity="0.1">
<g id="lineContainer" />
<g id="container" />
<path id="star" d="M406.76,14.71l6.15,16.72c.11.31.4.52.73.53l17.81.68c.76.03,1.07.98.47,1.45l-14.01,11.01c-.26.2-.37.54-.28.86l4.86,17.14c.21.73-.61,1.32-1.24.9l-14.8-9.92c-.27-.18-.63-.18-.91,0l-14.8,9.92c-.63.42-1.44-.17-1.24-.9l4.86-17.14c.09-.32-.02-.66-.28-.86l-14.01-11.01c-.6-.47-.28-1.42.47-1.45l17.81-.68c.33-.01.62-.22.73-.53l6.15-16.72c.26-.71,1.27-.71,1.53,0Z" fill="#ff9f1c" stroke-width="0"/>
</g>
<text id="m1" x="50%" y="670">MERRY CHRISTMAS!</text>
<text id="introText" id="m2" x="50%" y="640"><tspan id="subm1" dx="0" dy="-230"></tspan><tspan id="subm2" dx="-390" dy="80"></tspan></text>
</svg>
@font-face {font-family: "Irregardless"; src: url("https://assets.codepen.io/35984/51550-webfont.woff2") format("woff2")}
body {
background-color: #E8DDC5;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
overflow: visible;
}
line {
/* stroke: red; */
stroke-width: 2px;
}
text{
user-select: none;
pointer-events: none;
text-anchor: middle;
font-size: 5em;
font-family: 'Irregardless'
}
#m1 {
font-size: 6em;
}gsap.config({trialWarn: false});
let select = s => document.querySelector(s),
toArray = s => gsap.utils.toArray(s),
mainSVG = select('#mainSVG'),
xmlns = "http://www.w3.org/2000/svg",
dotArr = toArray('#dotContainer circle'),
cloneArr = [],
num = dotArr.length,
dot = select('.dot'),
dotContainer = select('#dotContainer'),
container = select('#container'),
lineContainer = select('#lineContainer'),
pt = mainSVG.createSVGPoint(),
mousePos = {x: 0, y: 0},
lineArr = [],
colorArray = ["d6140a","ffb301","082970","fa7204","e33189","ffb501","a49e3b","3d2c74","ce1918","1c9ba2"],
visibleArea = {
value: 141,
offset: 100
},
currColor = null,
baublePosArray = [25, 56, 107, 164, 318, 365, 258, 419, 443],
defaultColor = "",
completedArray = [],
baubleRadius = 14,
bigBaubleArray = [],
baubleArray = [],
woodColor = '#A63C06',
treeColor = '#0F7173',
subm1Str = 'MOVE YOUR MOUSE TO FILL',
subm2Str = 'THE TREE WITH COLOUR!',
followerVX = 0,
followerVY = 0
colorArray = colorArray.map(x => Array.from(x)[0] == '#' ? x : `#${x}`);
gsap.set('svg', {
visibility: 'visible'
})
gsap.set('#star', {
scale: 0,
rotation: 90,
transformOrigin: '50% 50%'
})
gsap.set('#whole', {
y: `+=${visibleArea.offset}`,
transformOrigin: '50% 50%'
})
gsap.set('#m1', {
y: `-=${visibleArea.offset}`,
opacity: 0,
fill: colorArray[8],
transformOrigin: '50% 50%'
})
gsap.from('#introText', {
opacity: 0,
duration: 0.61,
ease: 'power2.inOut'
})
function setIntroTextColor () {
let subMessage1 = subm1Str.split('');
let subMessage2 = subm2Str.split('');
let newSubm1Str = '';
let newSubm2Str = '';
subMessage1.forEach((char, index) => {
newSubm1Str+=`<tspan style="fill:${colorArray[index % colorArray.length]}">${char}</tspan>`
})
subMessage2.forEach((char, index) => {
//console.log(char, index);
newSubm2Str+=`<tspan style="fill:${colorArray[index % colorArray.length]}">${char}</tspan>`
})
select('#subm1').innerHTML = newSubm1Str;
select('#subm2').innerHTML = newSubm2Str;
}
// Get point in global SVG space
function cursorPoint(evt){
pt.x = evt.clientX;
pt.y = evt.clientY;
return pt.matrixTransform(mainSVG.getScreenCTM().inverse());
}
function emptyLineContainer () {
lineContainer.innerHTML = "";
}
class Particle {
constructor(x, y, shape, hasConnection, id, fill, newFill) {
this.x = x;
this.y = y;
this.shape = shape;
this.initX = this.x;
this.initY = this.y;
this.hasConnection = false;
this.id = id;
this.fill = fill;
this.newFill = newFill;
}
}
class Line {
constructor(x1, y1, x2, y2, strokeColor, shape, parent) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.strokeColor = strokeColor;
this.shape = shape;
this.parent = parent;
}
}
let pipeOpacity = gsap.utils.pipe(
gsap.utils.clamp(0, visibleArea.value),
gsap.utils.mapRange(0, visibleArea.value, 0.1, 1)
)
let pipeRadius = gsap.utils.pipe(
gsap.utils.clamp(0, visibleArea.value),
gsap.utils.mapRange(0, visibleArea.value, 4, 2)
)
const checkColor = (id) => {
if(id >=172 && id < 177 || id >=208 && id < 213 || id >=247 && id < 252 || id >=285 && id < 290) {
return true
}
return false;
}
const checkBaublePos = (clone, d) => {
if (baublePosArray.indexOf(clone.id) > -1){
container.appendChild(clone.shape)
return baubleRadius;
}
return pipeRadius(d);
}
function showStar(){
let tl = gsap.timeline();
tl.to('#star', {
scale: 1,
duration: 1,
transformOrigin: '50% 50%',
ease: 'elastic(0.5, 0.39)'
}).to('#star', {
rotation: 0,
transformOrigin: '50% 50%',
ease: 'sine'
}, 0)
}
function endAnim(){
gsap.to(lineContainer, {
opacity: 0,
onComplete: emptyLineContainer
})
let endTl = gsap.timeline({onComplete: showStar})
cloneArr.forEach((clone, cloneCount) => {
let bigBauble = null;
let tl = gsap.timeline();
tl.to(clone.shape, {
x: clone.initX,
y: clone.initY,
duration: 1.2,
fill: (c, item) => parseInt(item.getAttribute('r')) == baubleRadius ? clone.fill : checkColor(cloneCount) ? woodColor : treeColor,
ease: 'elastic(0.486,0.53)'
})
endTl.add(tl, cloneCount / num)
})
endTl.add('message')
.to('#whole', {
y: 40,
duration: 1.6,
ease: 'expo.inOut'
}, 'message')
.to('#m1', {
y: `+=${visibleArea.offset}`,
opacity: 1,
duration: 1.6,
ease: 'expo.inOut'
}, 'message')
gsap.fromTo(bigBaubleArray, {
rotation:-12,
transformOrigin: '50% -0%',
}, {
duration: 0.61,
rotation: 12,
transformOrigin: '50% -0%',
stagger: {
each: 0.21,
repeat: -1,
yoyo: true,
from: 'random'
},
ease: 'power1.inOut'
})
}
for(let i = 0; i < num; i++) {
let shape = dot.cloneNode(true);
let clone = new Particle(
parseInt(dotArr[i].getAttribute('cx')),
parseInt(dotArr[i].getAttribute('cy')),
shape,
false,
i
);
container.appendChild(clone.shape);
gsap.set(clone.shape, {
x: clone.x,
y: clone.y
})
cloneArr.push(clone);
baubleArray.push(clone.shape)
}
function checkDistance(a, b) {
return Math.hypot(a.x - b.x, a.y - b.y) < visibleArea.value * 0.45 ? true : false;
}
function calc () {
emptyLineContainer();
let i = num;
let curr = null;
while(--i > -1) {
currColor = colorArray[i % colorArray.length];
curr = cloneArr[i];
curr.fill = currColor;
let deltaX = curr.x - mousePos.x;
let deltaY = curr.y - mousePos.y;
let angle = Math.atan2(deltaY, deltaX);
let distance = visibleArea.value*2 / Math.sqrt(deltaX * deltaX + deltaY * deltaY);
curr.x += Math.cos(angle) * distance;
curr.y += Math.sin(angle) * distance;
curr.x += (curr.initX - curr.x) * 0.16;
curr.y += (curr.initY - curr.y) * 0.16;
gsap.set(curr.shape, {
x: curr.x,
y: curr.y
})
let d = Math.sqrt(Math.pow(((curr.x ) - mousePos.x),2) + Math.pow(((curr.y) - mousePos.y),2));
if(checkDistance(curr, mousePos)) {
let shape = document.createElementNS(xmlns, 'line');
let strokeColor = currColor
let line = new Line(curr.x, curr.y, mousePos.x, mousePos.y, strokeColor, shape, lineContainer);
lineContainer.appendChild(shape);
lineArr.push(line);
gsap.set(line.shape, {
attr: {
x1: line.x1,
y1: line.y1,
x2: line.x2,
y2: line.y2
},
stroke: strokeColor,
opacity: pipeOpacity(d)
})
gsap.set(curr.shape, {
//fill: checkColor(curr.id) ? woodColor : curr.fill,
fill: curr.fill,
attr:{
r: checkBaublePos(curr, d)
}
})
if(completedArray.length == cloneArr.length) {
completedArray.length = [];
mainSVG.onmousemove = null;
gsap.ticker.remove(calc);
endAnim();
} else {
if(!completedArray.includes(curr)) {
completedArray.push(curr);
}
}
}
}
}
function setMouseMove () {
mainSVG.onpointermove = (e) => {
mousePos.x = cursorPoint(e).x;
mousePos.y = cursorPoint(e).y - visibleArea.offset;
}
gsap.ticker.add(calc);
bigBaubleArray = baublePosArray.map((i) => baubleArray[i]);
mainSVG.onmousedown = null;
}
function init () {
setIntroTextColor();
mainSVG.onmousedown = (e) => {
let tl = gsap.timeline({});
tl.to('#introText', {
opacity: 0
})
.to('#whole', {
opacity: 1,
onComplete: setMouseMove
})
/* .to(mousePos, {
x: 400,
y: 300,
duration: 1
}) */
}
}
init()
External CSS
This Pen doesn't use any external CSS resources.