I have a custom SVG map with about 320 dot markers. I am trying to do some animations on the markers. The first is having them sprinkle load via an opacity animation (eventually add some other animations after the initial load like having one randomly glow every second or so).
After page load, the JS adds the CSS animation with a custom delay to each of the markers. When I put this on a page, the whole browser gets clunky and won't scroll and my CPU starts making all kinds of noises so somehow this needs to be better optimized to not kill users' computers. In CodePen, for some reason, it doesn't seem to cause as bad of a problem but the animation does become clunky for the second half of markers.
I have tried using jQuery animate and that didn't help as I had the same performance issues.
Is the problem simply too many markers?
HTML
<div id="map">
<div >
<!-- SVG CODE IS HERE, SEE CodePen as it is too big to fit here -->
</div>
</div>
CSS
#map {
background: radial-gradient(circle, rgba(77,75,75,1) 0%, rgba(47,47,47,1) 100%);
padding: 50px;
}
#markers circle {
fill: #4ca7fc;
stroke: rgba(255,255,255,0.44);
stroke-width: 1;
opacity: 0;
}
@keyframes enter {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS (using jQuery)
var animation_delay = 0;
jQuery( '#markers circle' ).each(function(){
animation_delay = .01;
jQuery( this ).css( 'animation', 'enter 1s ease-out ' animation_delay 's normal 1 forwards' );
});
CodePudding user response：
I solved this by putting the map markers in groups of 10 within the SVG file. Then I did the fade-in animation on the groups instead of individual markers. This changed it from 320 animations to 32 and helped the performance significantly.
CodePudding user response：
Path complexity vs. pixels
In your case a rastered/pixel based map background could also improve rendering performance.
The world map svg alone has ~200KB and ~7800 path segments.
Quite a lot of work for the svg renderer (even on a desktop I see a map progressively rendering continents).
In comparison a 2600x1422px png8 with transparency could be reduced to ~60KB.
You might use a srcset for different viewports like so:
<img id="mapBG" src="map-480px.png" srcset="map_480px.png 480w, map_640px.png 640w, map_vector.svg 2400w" alt="map">
Simplify filters
Svg filters are pretty advanced but tend to be quite expensive regarding rendering performance – particularly when applied on loads of elements.
Maybe you could achieve a visually similar result with css properties.
Delayed rendering of markers
Loading your map bg by a cachable <img> element might be a good advice if you want to use this map multiple times on your website/app.
Thus, your markers should start popping up after the map background has been loaded completely and rendered.
Example
This snippet takes a downsized png converted to a data-URL
let mapBG = document.querySelector("#mapBG");
let src = mapBG.src;
function addMapMarkers() {
let markers = document.querySelectorAll("#markers circle");
let animationDelay = 0;
markers.forEach(function(el, i) {
el.classList.add("marker-animation");
el.setAttribute("style", "animation-delay:" animationDelay "s");
animationDelay = 0.01;
});
}
checkMapLoad(mapBG);
async function checkMapLoad(img) {
// Wait for the img src to load.
await new Promise((resolve) => {
img.onload = resolve;
});
// src is loaded but let's add some extra delay for rendering
console.log("map is loaded");
img.classList.add("mapFadeIn");
setTimeout(function() {
addMapMarkers();
}, 500);
}body {
margin: 0;
}
#map {
background: radial-gradient( circle, rgba(77, 75, 75, 1) 0%, rgba(47, 47, 47, 1) 100%);
padding: 50px;
}
.container {
position: relative;
}
.mapBG {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
opacity: 0.1;
}
.mapFadeIn {
animation: fadeIn 1s forwards;
}
.marker {
fill: #4ca7fc;
stroke: rgba(255, 255, 255, 0.5);
stroke-width: 1;
filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.3));
opacity: 0;
}
.marker-animation {
animation-name: enter;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
to {
opacity: 0.1;
}
}
@keyframes enter {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div id="map" >
<div >
<img id="mapBG" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAACDAgMAAADOjX5uAAAADFBMVEUAAAD /v6KiorLy8vKps2sAAAAAXRSTlMAQObYZgAACEJJREFUWMOlmVnoDVEcx3/OzTKuy5N4UKTGvqUGyfboRXnwmzMYYyKyRJbob594scaDsZQtJVxZXq413JRHeTr2ZShlSaT yD7nMOacuedYv/XXvXfmc8/vfH/LufeCgsgRAOjzFadG8Nfqj9gEbWuI P6v2YuYauAqTOX9LdubU1NRKIjr0mb AN7BqTX4Qzncy6lyCy780gdMA6acy M fwDAcs885NyhEMwazpkV7Acs7jyGEwDIm8MHIJXTZGYHVlPO3ZjBfC2iGNc/MMZ9wl5RQ5yQ/gm5IGBXup/cN6WA3OwwZR5igD8UiBfZqgOQyzbFfezGiOrkZkxqKIUNzrgEcrU1VA5x 5yopmZFsZKp/mt/hH0WUln0gBau4LPjlK15F9lZ2Ep1XPYBoNyMblb isr3p0ylx9d8gbZrWRa2dBWTFOI7AoASPm1IFH4YOkW8syNYGhWd6s9fFXBzXWVrH95D2/2vqnxnjSvX F7tHzA527aQ74402hOz2s0kg12QdANIVG7m8JcOB2AoFBTjmgApwwU8rGJLEh sOSNRqNmDnsVCY4gBu5X o4PLHlTW5A0T52OGRGJXMfpDPURahxKT4T7cBQ9szBSsYZhwjns cnVKt 3lIF0bxIgrAThM74FQSSTpBnREWVO89EqTCHLq87afqzbiXNofGQUihx0jzxKZ03GJQk8gJ45kiUmN/Iz4BB95MabNg6kSwZbFo11rWXMKK1rCC FnLX8NtrAp3t70NV5Jq0HI5pscdXFVGikW1QS5E83IEL0H6AHDn23cH1Md5iakfEEuQAeU5R1DymEfunXLVsYzIkxs0HsQV7K5RxOLuhxeAPtvfPeLu2GQC6gouU/3QI2XChNlzNyYnjOwSwKI1fzxqengeICaK7LsMmR6lm5aAES 9uQTSSO20z8Y2SRGxEQ0iUIVbPk5eVOtJWBh LNd5qFRMBCc7LHw BhuiKCcnTQEcYuRnQzwE6YoTlds6pYy0e/geUxMGiblP0yfetsA7Kzl0nqfqjcLH0CqKk450Bu/axYQnHQLMrVJ4Wk69uZNa7moIfLZ/ l4 kiaP QePMCjGtaHI/YPV6x7kHUrjSBG hOmYLGXGjhNJAtBaOiRvDuaZBhugB3rDKsDQQ7zgZBPW6SPGWKSnUwM7KCiqw4gP24So7CUldlCaXr1X1KvrND1QxVKP5KZgAwvlia2/TKsoU5TgchTnczIyoaHlcHNk01VTXyQtCFrK2nlgfFEEwwLZNjCXDOzF3c26 EpEUlkuJxfujE0K85jTA vispR4azi4lW PM4a0kG91kQDQJGoMfqRd8fFBVmuDPB8OJuD6iorrhwAruzEW9KMhWxfJ4kOnvJSPtWJGLiHGF5T5hhtPzDSwkswaPrJruMm0I02HlJgt V70OyZp3lBFjRUUg8mowtWYZx4TqiDuULI4Qntb8TuwIM4XSntA10jMBhWl CmVg4TFc UUdAZDLALEjy/tdV8iMMSy5pgTxG2s/eV4bFt x66isogc58taIQrmRvySxsv7ahwszwpT3O9sleErUa47QeGm8nWd6josd /AS79nGK5eMGQ9z1UmEzCBUU4m76J2mlRekWF1z6jEegdcws2 PaBUmF0tnwKoHfML7wdrU39rMJhB2iUJT61eAqsU9hWA/Po5j6WU1jLz3wZBo2IOG22Sy/kZ 88ec9a DZSgCGNmXcRJ7EcjkCn0RzuETXUHI1xwv6bGW74ftODpTCpN/pVQxr8bNkg1MJtHQrkZr6yI9v18xvTojGglU3Jl5NNjeNhBocrIn4MSGSAca3X/ebThpVnI7q8fD0H3dfmHxteeYOPuZeL8GIOQ4xhBf0FRG8Yf/MF5MXzY6cKhk0SvdaRh 4eIAuMS0 OuOGFlX3G8 O4UGE0MsLkOHIv6wXDKAt4IB4PrU5CMKgs4KThmDvwHe4Vp7AHJtl18pQ8LcJNfdJgKh4M64pjyEwjbNX7uycjpTx5o/r80ngYNAzr5Z1GuMx/c5AaQ5qKLTzo1vk0dDgTGembeccSFS4thV5dekE/xwwPkKYvUwfAEGjXA6BXzQwDy5e2cbkM94Pylgj2dQCzWL50uRp9VgZAadWYUgBmEaaM0BaCpdnF 2P6p7aZ7VaHt6XOYxayoHrKnGj1hwpLHZi1EKeufm2EW6qnXUUdmM4sNvHu7mm/hukRJRDINNKNl805tqpJA0pN7Mqze0J MAQDZy96izQaZoDVw1I1n9yDdQkcxzl3fglnLR8rMDjPiQjnWaR3W4U7qnCZVatRCX3yVAeXCseZo8K9BrLmiJzZAQN1MMn2LMGuBEP5BED7/lElMtQ2FyiwMm47zGlFgGjhOEtV/pQSpagqbk8NJ00uX4FL4 Xqn HbUdr42tmtwoyHYY9XbgjsMWnwRsdU2O8Yqh Pm9PnlnnTngwnChyLKjA45ihwzBvUGSOd4nlgJniB9IyC/DN57UcyhpnhUK51iKNCBdJIdls1RPqvhJYFuMXPr99GOAQJptAJZDjblslt5fOUB30aus77cxgKK5thpsBWIcTSb2Gq3BxqWtYIKw1Mip9UfwOrl5AWL69J4fEGuJAIDApwALGyFXVTaqD7DhRO/yNgizuIfgL68AsdAegt0tFC01YtTLDUWDGHSaiFPfiNYmFioINp8ju4fJab4 qOjAnwW63nwd/SwU2/h31e9ZrOqqD3e/he mdHupXD38O7xC/1OrgOf6KSr/2WAn8ka7wOxujPVk7 AybwF2H3gD Q7Ro Dv8J3NInCfyrLJ 8/nfYhX9XmUb/Qcd1 GN9A3Bu7l76q4KgAAAAAElFTkSuQmCC'
data-srcset="map_480px.png 480w, map_640px.png 640w, map_vector.svg 2400w" alt="map">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1300 711 ">
<g id="markers" >
<circle cx="172.0056" cy="281.1911" r="3" />
<circle cx="1093.0056" cy="281.1911" r="3" />
<circle cx="670.0056" cy="247.1911" r="3" />
<circle cx="598.0056" cy="229.1911" r="3" />
<circle cx="586.0056" cy="285.1911" r="3" />
<circle cx="169.0056" cy="264.1911" r="3" />
<circle cx="1090.0056" cy="264.1911" r="3" />
<circle cx="855.0056" cy="347.1911" r="3" />
<circle cx="667.0056" cy="230.1911" r="3" />
<circle cx="595.0056" cy="212.1911" r="3" />
<circle cx="219.0056" cy="335.1911" r="3" />
<circle cx="1087.0056" cy="318.1911" r="3" />
<circle cx="905.0056" cy="418.1911" r="3" />
<circle cx="717.0056" cy="301.1911" r="3" />
<circle cx="607.0056" cy="280.1911" r="3" />
<circle cx="178.0056" cy="297.1911" r="3" />
<circle cx="1099.0056" cy="297.1911" r="3" />
<circle cx="676.0056" cy="263.1911" r="3" />
<circle cx="604.0056" cy="245.1911" r="3" />
<circle cx="228.0056" cy="368.1911" r="3" />
<circle cx="202.0056" cy="297.1911" r="3" />
<circle cx="1123.0056" cy="297.1911" r="3" />
<circle cx="888.0056" cy="380.1911" r="3" />
<circle cx="700.0056" cy="263.1911" r="3" />
<circle cx="628.0056" cy="245.1911" r="3" />
<circle cx="252.0056" cy="368.1911" r="3" />
<circle cx="313.0056" cy="306.1911" r="3" />
<circle cx="263.0056" cy="302.1911" r="3" />
<circle cx="260.0056" cy="291.1911" r="3" />
<circle cx="269.0056" cy="309.1911" r="3" />
<circle cx="277.0056" cy="288.1911" r="3" />
<circle cx="292.0056" cy="303.1911" r="3" />
<circle cx="280.0056" cy="295.1911" r="3" />
<circle cx="293.0056" cy="279.1911" r="3" />
<circle cx="280.0056" cy="295.1911" r="3" />
<circle cx="328.0056" cy="292.1911" r="3" />
<circle cx="331.0056" cy="278.1911" r="3" />
<circle cx="325.0056" cy="271.1911" r="3" />
<circle cx="169.0056" cy="289.1911" r="3" />
<circle cx="1108.0056" cy="302.1911" r="3" />
<circle cx="667.0056" cy="255.1911" r="3" />
<circle cx="595.0056" cy="237.1911" r="3" />
<circle cx="219.0056" cy="360.1911" r="3" />
<circle cx="583.0056" cy="293.1911" r="3" />
<circle cx="166.0056" cy="272.1911" r="3" />
<circle cx="1087.0056" cy="272.1911" r="3" />
<circle cx="664.0056" cy="238.1911" r="3" />
<circle cx="592.0056" cy="220.1911" r="3" />
<circle cx="157.0056" cy="270.1911" r="3" />
<circle cx="1039.0056" cy="254.1911" r="3" />
<circle cx="655.0056" cy="236.1911" r="3" />
<circle cx="583.0056" cy="218.1911" r="3" />
<circle cx="216.0056" cy="343.1911" r="3" />
<circle cx="1084.0056" cy="328.1911" r="3" />
<circle cx="1088.0056" cy="519.1911" r="3" />
<circle cx="1051.0056" cy="417.1911" r="3" />
<circle cx="991.0056" cy="414.1911" r="3" />
<circle cx="1024.0056" cy="464.1911" r="3" />
<circle cx="1239.0056" cy="619.1911" r="3" />
<circle cx="1242.0056" cy="634.1911" r="3" />
<circle cx="1135.0056" cy="640.1911" r="3" />
<circle cx="1107.0056" cy="599.1911" r="3" />
<circle cx="1158.0056" cy="579.1911" r="3" />
<circle cx="1164.0056" cy="410.1911" r="3" />
<circle cx="1152.0056" cy="608.1911" r="3" />
<circle cx="1134.0056" cy="625.1911" r="3" />
<circle cx="902.0056" cy="426.1911" r="3" />
<circle cx="714.0056" cy="309.1911" r="3" />
<circle cx="377.0056" cy="525.1911" r="3" />
<circle cx="371.0056" cy="513.1911" r="3" />
<circle cx="334.0056" cy="485.1911" r="3" />
<circle cx="359.0056" cy="582.1911" r="3" />
<circle cx="396.0056" cy="599.1911" r="3" />
<circle cx="407.0056" cy="599.1911" r="3" />
<circle cx="606.0056" cy="417.1911" r="3" />
<circle cx="673.0056" cy="531.1911" r="3" />
<circle cx="697.0056" cy="487.1911" r="3" />
<circle cx="745.0056" cy="470.1911" r="3" />
<circle cx="681.0056" cy="596.1911" r="3" />
<circle cx="589.0056" cy="279.1911" r="3" />
<circle cx="175.0056" cy="305.1911" r="3" />
<circle cx="1096.0056" cy="305.1911" r="3" />
<circle cx="649.0056" cy="256.1911" r="3" />
<circle cx="601.0056" cy="253.1911" r="3" />
<circle cx="225.0056" cy="376.1911" r="3" />
<circle cx="163.0056" cy="293.1911" r="3" />
<circle cx="1088.0056" cy="308.1911" r="3" />
<circle cx="661.0056" cy="259.1911" r="3" />
<circle cx="589.0056" cy="241.1911" r="3" />
<circle cx="213.0056" cy="364.1911" r="3" />
<circle cx="169.0056" cy="301.1911" r="3" />
<circle cx="1090.0056" cy="301.1911" r="3" />
<circle cx="667.0056" cy="267.1911" r="3" />
<circle cx="595.0056" cy="249.1911" r="3" />
<circle cx="219.0056" cy="372.1911" r="3" />
<circle cx="199.0056" cy="305.1911" r="3" />
<circle cx="1120.0056" cy="305.1911" r="3" />
<circle cx="885.0056" cy="388.1911" r="3" />
<circle cx="697.0056" cy="271.1911" r="3" />
<circle cx="625.0056" cy="253.1911" r="3" />
<circle cx="249.0056" cy="376.1911" r="3" />
<circle cx="310.0056" cy="314.1911" r="3" />
<circle cx="301.0056" cy="304.1911" r="3" />
<circle cx="295.0056" cy="327.1911" r="3" />
<circle cx="307.0056" cy="345.1911" r="3" />
<circle cx="263.0056" cy="336.1911" r="3" />
<circle cx="217.0056" cy="324.1911" r="3" />
<circle cx="1033.0056" cy="330.1911" r="3" />
<circle cx="903.0056" cy="407.1911" r="3" />
<circle cx="715.0056" cy="290.1911" r="3" />
<circle cx="643.0056" cy="272.1911" r="3" />
<circle cx="193.0056" cy="314.1911" r="3" />
<circle cx="1101.0056" cy="313.1911" r="3" />
<circle cx="879.0056" cy="397.1911" r="3" />
<circle cx="691.0056" cy="280.1911" r="3" />
<circle cx="619.0056" cy="262.1911" r="3" />
<circle cx="243.0056" cy="385.1911" r="3" />
<circle cx="190.0056" cy="293.1911" r="3" />
<circle cx="1111.0056" cy="293.1911" r="3" />
<circle cx="688.0056" cy="259.1911" r="3" />
<circle cx="616.0056" cy="241.1911" r="3" />
<circle cx="240.0056" cy="364.1911" r="3" />
<circle cx="181.0056" cy="271.1911" r="3" />
<circle cx="1102.0056" cy="271.1911" r="3" />
<circle cx="867.0056" cy="354.1911" r="3" />
<circle cx="679.0056" cy="237.1911" r="3" />
<circle cx="607.0056" cy="219.1911" r="3" />
<circle cx="231.0056" cy="342.1911" r="3" />
<circle cx="169.0056" cy="252.1911" r="3" />
<circle cx="1090.0056" cy="252.1911" r="3" />
<circle cx="667.0056" cy="218.1911" r="3" />
<circle cx="595.0056" cy="200.1911" r="3" />
<circle cx="219.0056" cy="323.1911" r="3" />
<circle cx="1030.0056" cy="316.1911" r="3" />
<circle cx="905.0056" cy="406.1911" r="3" />
<circle cx="717.0056" cy="289.1911" r="3" />
<circle cx="645.0056" cy="271.1911" r="3" />
<circle cx="220.0056" cy="226.1911" r="3" />
<circle cx="646.0056" cy="174.1911" r="3" />
<circle cx="295.0056" cy="241.1911" r="3" />
<circle cx="325.0056" cy="300.1911" r="3" />
<circle cx="316.0056" cy="298.1911" r="3" />
<circle cx="393.0056" cy="402.1911" r="3" />
<circle cx="349.0056" cy="383.1911" r="3" />
<circle cx="340.0056" cy="383.1911" r="3" />
<circle cx="337.0056" cy="376.1911" r="3" />
<circle cx="323.0056" cy="375.1911" r="3" />
<circle cx="390.0056" cy="390.1911" r="3" />
<circle cx="390.0056" cy="386.1911" r="3" />
<circle cx="390.0056" cy="383.6911" r="3" />
<circle cx="390.0056" cy="383.6911" r="3" />
<circle cx="322.0056" cy="284.1911" r="3" />
<circle cx="181.0056" cy="284.1911" r="3" />
<circle cx="1082.0056" cy="282.1911" r="3" />
<circle cx="867.0056" cy="367.1911" r="3" />
<circle cx="679.0056" cy="250.1911" r="3" />
<circle cx="607.0056" cy="232.1911" r="3" />
<circle cx="231.0056" cy="355.1911" r="3" />
<circle cx="178.0056" cy="267.1911" r="3" />
<circle cx="1099.0056" cy="267.1911" r="3" />
<circle cx="676.0056" cy="233.1911" r="3" />
<circle cx="604.0056" cy="215.1911" r="3" />
<circle cx="228.0056" cy="338.1911" r="3" />
<circle cx="187.0056" cy="300.1911" r="3" />
<circle cx="1108.0056" cy="300.1911" r="3" />
<circle cx="685.0056" cy="266.1911" r="3" />
<circle cx="613.0056" cy="248.1911" r="3" />
<circle cx="237.0056" cy="371.1911" r="3" />
<circle cx="211.0056" cy="300.1911" r="3" />
<circle cx="1132.0056" cy="300.1911" r="3" />
<circle cx="930.0056" cy="371.1911" r="3" />
<circle cx="709.0056" cy="266.1911" r="3" />
<circle cx="637.0056" cy="248.1911" r="3" />
<circle cx="647.0056" cy="242.1911" r="3" />
<circle cx="193.0056" cy="284.1911" r="3" />
<circle cx="1126.0056" cy="287.1911" r="3" />
<circle cx="691.0056" cy="250.1911" r="3" />
<circle cx="619.0056" cy="232.1911" r="3" />
<circle cx="322.0056" cy="309.1911" r="3" />
<circle cx="307.0056" cy="322.1911" r="3" />
<circle cx="319.0056" cy="340.1911" r="3" />
<circle cx="313.0056" cy="334.1911" r="3" />
<circle cx="349.0056" cy="420.1911" r="3" />
<circle cx="328.0056" cy="420.1911" r="3" />
<circle cx="334.0056" cy="432.1911" r="3" />
<circle cx="275.0056" cy="331.1911" r="3" />
<circle cx="229.0056" cy="319.1911" r="3" />
<circle cx="205.0056" cy="309.1911" r="3" />
<circle cx="1111.0056" cy="307.1937" r="3" />
<circle cx="891.0056" cy="392.1911" r="3" />
<circle cx="703.0056" cy="275.1911" r="3" />
<circle cx="631.0056" cy="257.1911" r="3" />
<circle cx="202.0056" cy="288.1911" r="3" />
<circle cx="1123.0056" cy="288.1911" r="3" />
<circle cx="888.0056" cy="371.1911" r="3" />
<circle cx="700.0056" cy="254.1911" r="3" />
<circle cx="628.0056" cy="236.1911" r="3" />
<circle cx="252.0056" cy="359.1911" r="3" />
<circle cx="193.0056" cy="266.1911" r="3" />
<circle cx="1120.0056" cy="279.1911" r="3" />
<circle cx="691.0056" cy="232.1911" r="3" />
<circle cx="619.0056" cy="214.1911" r="3" />
<circle cx="243.0056" cy="337.1911" r="3" />
<circle cx="181.0056" cy="247.1911" r="3" />
<circle cx="1137.0056" cy="283.1911" r="3" />
<circle cx="679.0056" cy="213.1911" r="3" />
<circle cx="607.0056" cy="195.1911" r="3" />
<circle cx="232.0056" cy="221.1911" r="3" />
<circle cx="307.0056" cy="236.1911" r="3" />
<circle cx="337.0056" cy="295.1911" r="3" />
<circle cx="340.0056" cy="281.1911" r="3" />
<circle cx="349.0056" cy="270.1911" r="3" />
<circle cx="340.0056" cy="269.1911" r="3" />
<circle cx="346.0056" cy="264.1911" r="3" />
<circle cx="346.0056" cy="275.1911" r="3" />
<circle cx="349.0056" cy="269.1911" r="3" />
<circle cx="413.0056" cy="249.1911" r="3" />
<circle cx="343.0056" cy="246.1911" r="3" />
<circle cx="334.0056" cy="223.1911" r="3" />
<circle cx="178.0056" cy="292.1911" r="3" />
<circle cx="1099.0056" cy="292.1911" r="3" />
<circle cx="703.0056" cy="245.1911" r="3" />
<circle cx="676.0056" cy="258.1911" r="3" />
<circle cx="604.0056" cy="240.1911" r="3" />
<circle cx="228.0056" cy="363.1911" r="3" />
<circle cx="175.0056" cy="275.1911" r="3" />
<circle cx="1105.0056" cy="296.1911" r="3" />
<circle cx="673.0056" cy="241.1911" r="3" />
<circle cx="601.0056" cy="223.1911" r="3" />
<circle cx="225.0056" cy="346.1911" r="3" />
<circle cx="603.0056" cy="288.1911" r="3" />
<circle cx="184.0056" cy="308.1911" r="3" />
<circle cx="1064.0056" cy="297.1911" r="3" />
<circle cx="976.0056" cy="387.1911" r="3" />
<circle cx="994.0056" cy="487.1911" r="3" />
<circle cx="1030.0056" cy="605.1911" r="3" />
<circle cx="682.0056" cy="274.1911" r="3" />
<circle cx="610.0056" cy="256.1911" r="3" />
<circle cx="234.0056" cy="379.1911" r="3" />
<circle cx="208.0056" cy="308.1911" r="3" />
<circle cx="1094.0056" cy="309.1911" r="3" />
<circle cx="922.0056" cy="371.1911" r="3" />
<circle cx="706.0056" cy="274.1911" r="3" />
<circle cx="634.0056" cy="256.1911" r="3" />
<circle cx="646.0056" cy="262.1911" r="3" />
<circle cx="199.0056" cy="317.1911" r="3" />
<circle cx="1033.0056" cy="302.1911" r="3" />
<circle cx="885.0056" cy="400.1911" r="3" />
<circle cx="697.0056" cy="283.1911" r="3" />
<circle cx="625.0056" cy="265.1911" r="3" />
<circle cx="319.0056" cy="317.1911" r="3" />
<circle cx="317.0056" cy="317.1911" r="3" />
<circle cx="319.0056" cy="309.1911" r="3" />
<circle cx="315.0056" cy="306.1911" r="3" />
<circle cx="319.0056" cy="314.1911" r="3" />
<circle cx="365.0056" cy="423.1911" r="3" />
<circle cx="343.0056" cy="438.1911" r="3" />
<circle cx="331.0056" cy="441.1911" r="3" />
<circle cx="304.0056" cy="330.1911" r="3" />
<circle cx="316.0056" cy="348.1911" r="3" />
<circle cx="312.0056" cy="342.1911" r="3" />
<circle cx="281.0056" cy="382.1911" r="3" />
<circle cx="295.0056" cy="369.1911" r="3" />
<circle cx="286.0056" cy="370.1911" r="3" />
<circle cx="292.0056" cy="393.1911" r="3" />
<circle cx="310.0056" cy="408.1911" r="3" />
<circle cx="304.0056" cy="414.1911" r="3" />
<circle cx="272.0056" cy="339.1911" r="3" />
<circle cx="238.0056" cy="377.1911" r="3" />
<circle cx="226.0056" cy="327.1911" r="3" />
<circle cx="652.0056" cy="275.1911" r="3" />
<circle cx="202.0056" cy="317.1911" r="3" />
<circle cx="1036.0056" cy="340.1911" r="3" />
<circle cx="962.0056" cy="374.1911" r="3" />
<circle cx="888.0056" cy="400.1911" r="3" />
<circle cx="700.0056" cy="283.1911" r="3" />
<circle cx="628.0056" cy="265.1911" r="3" />
<circle cx="252.0056" cy="388.1911" r="3" />
<circle cx="199.0056" cy="296.1911" r="3" />
<circle cx="1120.0056" cy="296.1911" r="3" />
<circle cx="885.0056" cy="379.1911" r="3" />
<circle cx="697.0056" cy="262.1911" r="3" />
<circle cx="625.0056" cy="244.1911" r="3" />
<circle cx="672.0056" cy="194.1911" r="3" />
<circle cx="675.0056" cy="197.1911" r="3" />
<circle cx="249.0056" cy="367.1911" r="3" />
<circle cx="190.0056" cy="274.1911" r="3" />
<circle cx="1120.0056" cy="288.1911" r="3" />
<circle cx="688.0056" cy="240.1911" r="3" />
<circle cx="616.0056" cy="222.1911" r="3" />
<circle cx="240.0056" cy="345.1911" r="3" />
<circle cx="178.0056" cy="255.1911" r="3" />
<circle cx="1099.0056" cy="255.1911" r="3" />
<circle cx="676.0056" cy="221.1911" r="3" />
<circle cx="604.0056" cy="203.1911" r="3" />
<circle cx="163.0056" cy="256.1911" r="3" />
<circle cx="1084.0056" cy="256.1911" r="3" />
<circle cx="661.0056" cy="222.1911" r="3" />
<circle cx="589.0056" cy="204.1911" r="3" />
<circle cx="228.0056" cy="326.1911" r="3" />
<circle cx="229.0056" cy="229.1911" r="3" />
<circle cx="304.0056" cy="244.1911" r="3" />
<circle cx="334.0056" cy="303.1911" r="3" />
<circle cx="328.0056" cy="308.1911" r="3" />
<circle cx="322.0056" cy="308.1911" r="3" />
<circle cx="334.0056" cy="304.1911" r="3" />
<circle cx="328.0056" cy="301.1911" r="3" />
<circle cx="316.0056" cy="298.1911" r="3" />
<circle cx="304.0056" cy="288.1911" r="3" />
<circle cx="292.0056" cy="283.1911" r="3" />
<circle cx="274.0056" cy="268.1911" r="3" />
<circle cx="289.0056" cy="293.1911" r="3" />
<circle cx="290.0056" cy="269.1911" r="3" />
<circle cx="334.0056" cy="287.1911" r="3" />
<circle cx="316.0056" cy="290.1911" r="3" />
<circle cx="284.0056" cy="281.1911" r="3" />
<circle cx="68.0056" cy="145.1911" r="3" />
<circle cx="38.0056" cy="165.1911" r="3" />
<circle cx="78.0056" cy="175.1911" r="3" />
</g>
</svg>
</div>
</div>