"SVG ANIMATED ICONS"
Bootstrap 4.1.1 Snippet by koshikojha

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<a href="#" target="#">
</a>
<a href="#" target="_blank">
<svg version="1.1" id="info" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<circle class="st0 circle" cx="101.204" cy="98.6" r="87.151"/>
<g class="letter">
<path class="st2" d="M110.887,60.375c0,6.195-5.017,11.212-11.212,11.212c-6.193,0-11.212-5.017-11.212-11.212
s5.019-11.212,11.212-11.212C105.87,49.163,110.887,54.18,110.887,60.375z"/>
<path class="st1" d="M105.553,98c0-0.552-0.448-1-1-1h-10c-0.552,0-1,0.448-1,1v51c0,0.553,0.448,1,1,1h10c0.552,0,1-0.447,1-1V98z
"/>
<path class="st0" d="M105.553,98c0-0.552-0.448-1-1-1h-10c-0.552,0-1,0.448-1,1v51c0,0.553,0.448,1,1,1h10c0.552,0,1-0.447,1-1V98z
"/>
</g>
</svg>
</a>
<a href="#" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="demo" x="0px" y="0px" width="200px" height="200 px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<rect x="25.5" y="30.5" class="st3 square" width="144" height="144"/>
<rect x="113.5" y="30.5" class="st0" width="56" height="56"/>
<g class="arrow">
<polyline class="st3" points="173.5,75.5 173.5,26.5 125.5,26.5 "/>
<line class="st3" x1="83.599" y1="113.68" x2="173.918" y2="29.317"/>
</g>
</svg>
</a>
<a href="#" target="_blank">
<svg version="1.1" id="setting" class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 60 57.476" style="enable-background:new 0 0 60 57.476;" xml:space="preserve">
<path class="st0" d="M58.869,28.755c0-0.716-0.056-1.419-0.111-2.122l-9.313-2.222l7.095-6.544
c-0.732-1.637-1.622-3.192-2.655-4.648l-9.63,2.624l2.808-9.365c-1.446-1.017-2.991-1.903-4.624-2.65l-7.172,7.067l-2.532-9.644
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
26
27
28
29
30
31
32
33
34
35
36
37
html, body,.container{
height:100%;
}
body{
margin:0;
background:#2c3e50;
}
.container{
margin: 0 auto;
width:1100px;
display: flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
.container a{
text-decoration:none;
}
/*info*/
#info .bg{fill:transparent;}
#info .st0{fill:none;stroke:#fff;stroke-width:6;stroke-miterlimit:10;}
#info .st1{fill:#fff;}
#info .st2{fill:#fff;stroke:#fff;stroke-width:4;stroke-miterlimit:10;}
#info .circle{
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform: 50% 50%;
transition:0.5s;
}
#info:hover .circle{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: