Bootstrap Snippet SVG with Random Animation using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
<!------ Include the above in your HEAD tag ---------->
<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"/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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);
    }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

" SVG with Random Animation"
Bootstrap 3.3.0 Snippet by Divscodebd

Related: See More

Questions / Comments:

" SVG with Random Animation" Bootstrap 3.3.0 Snippet by Divscodebd

Related: See More

Questions / Comments:

" SVG with Random Animation"
Bootstrap 3.3.0 Snippet by Divscodebd