Bootstrap Snippet SVG with Random Animation using HTML CSS

" SVG with Random Animation"
Bootstrap 3.3.0 Snippet by Divscodebd

3.3.0 animation

7.5K 2 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <svg class="map" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="171.7 147 496.7 300" xml:space="preserve"> <g id="background"> </g> <g id="US"> <g> <circle class="map-dot" fill="#333333" cx="213.9" cy="153.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="153.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="153.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="153.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="153.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="153.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="661.9" cy="153.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="196" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="644" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="661.9" cy="171.3" r="6.5"/> <circle class="map-dot" fill="#333333" cx="196" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="626.1" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="644" cy="189.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="196" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="626.1" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="644" cy="207.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="178.1" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="196" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="626.1" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="644" cy="225.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="178.1" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="196" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="572.5" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="626.1" cy="243.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="178.1" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="196" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="572.5" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="626.1" cy="261.2" r="6.5"/> <circle class="map-dot" fill="#333333" cx="196" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="572.5" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="626.1" cy="279.1" r="6.5"/> <circle class="map-dot" fill="#333333" cx="196" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="572.5" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="626.1" cy="297" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="572.5" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="626.1" cy="314.9" r="6.5"/> <circle class="map-dot" fill="#333333" cx="213.9" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="572.5" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="332.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="231.8" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="249.6" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="267.5" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="572.5" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="350.6" r="6.5"/> <circle class="map-dot" fill="#333333" cx="285.4" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="303.3" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="321.2" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="339.5" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="536.7" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="572.5" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="368.5" r="6.5"/> <circle class="map-dot" fill="#333333" cx="357.4" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="375.3" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="464.7" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="482.6" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="518.8" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="554.6" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="572.5" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="386.4" r="6.5"/> <circle class="map-dot" fill="#333333" cx="393.2" cy="404.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="404.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="404.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="446.8" cy="404.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="500.5" cy="404.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="590.4" cy="404.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="404.8" r="6.5"/> <circle class="map-dot" fill="#333333" cx="411.1" cy="422.7" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="422.7" r="6.5"/> <circle class="map-dot" fill="#333333" cx="608.2" cy="422.7" r="6.5"/> <circle class="map-dot" fill="#333333" cx="428.9" cy="440.5" r="6.5"/> </g> </g> <g id="copyright"> </g> </svg>

.map-dot { opacity: 0; animation: bouncepoint 2s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; //transform: translate(0,-100px); @for $i from 1 through 308 { &:nth-child(#{$i}) { animation-delay: random(50) * .03s; fill: hsla(221, 100, 15, random(100)/100+.1); transform: translate(0,random(100)-200px); } } } @keyframes bouncepoint { 0% { opacity: 0; } 100% { opacity: 1; transform: translate(0,0); } }

Questions / Comments:

Posting GuidelinesFormatting