"Animated Creativity"
Bootstrap 3.3.0 Snippet by Walia5

Post to Facebook Tweet this

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 ---------->
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2304 483" enable-background="new 0 0 2304 483" xml:space="preserve">
<g>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1064.1,26.2c-1.6,3.3-0.4,6.8-0.4,10.1c0,148.9,0,297.8,0,446.7"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M433.5,464.1c-7.9-1.5-15.9-2.6-23.9-3.3c-9.2-0.8-18.4-2.8-27.6-3.5c-9.4-0.6-18.7-2.1-28-3c-8-0.8-16-1.8-23.9-2.4c-8-0.7-15.9-1.5-23.9-2.1c-9.1-0.7-18.1-1.6-27.1-2.3c-6.9-0.5-13.8-0.8-20.7-1.4c-13.5-1.2-27-0.9-40.5-2.7c-0.5-0.1-0.9,0-1.4,0c-13.8-0.5-27.6-0.7-41.4-1.4c-12.6-0.7-25.2,0.2-37.7-0.5c-17.2-1-34.3,0.3-51.5,0.3c-9.2,0-18.4,0.3-27.6,0.9c-12.4,0.8-24.8,2.1-37.3,2.7c-5.2,0.3-10.4,1.2-15.6,1.8"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1149.7,162.8c-0.2,1.8-0.4,3.7-0.4,5.5c0,104.9,0,209.8,0,314.6"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1574.7,482.9c2.6-7.3,8-11.5,14.7-14.8c5.3-2.6,10.9-3.9,16.6-4.4c4.1-0.4,4.6-2.3,4.6-5.7c-0.1-25.1,0-50.3,0-75.4c0-52.6,0.1-105.2-0.1-157.8c0-8.6-1.5-16.8-9.6-22.1c-6.8-4.5-14.3-5.8-22.1-5.3c-1.8,0.1-3.7-0.1-5.5,0.3"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M971.2,197.7c1.5-2.1,1.9-4.4,1.9-6.9c0-35.6,0-71.1,0-106.7c0-8.1,0-16.3,0-24.4c0-3.4-0.5-6.7-0.1-10.1c0.7-6.4,0.3-6.8,6.1-8.2c7.4-1.8,15-3.1,22.5-4.7c10.9-2.3,21.8-4.5,32.7-6.9c7.2-1.6,14.4-3.7,21.6-4.9c6.9-1.2,13.4,1.4,19.8,3.6c6.4,2.2,12.7,4.5,19.3,6.2c4.1,1,7.9,3.5,12,4.9c3.3,1.2,3.3,4,3.3,6.9c0,37,0,73.9,0,110.9c0,108.6,0,217.1,0,325.7"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M2302.5,456.2c-8.3-1.7-16.5-3.7-24.9-5c-15.7-2.4-31.5-4.1-47.4-5.2c-34.5-2.4-69-3.2-103.5-2.5c-12.9,0.2-25.8,0.4-38.6,0.8c-20.4,0.7-40.8,1.6-61.2,2.8c-9.8,0.6-19.6,1.5-29.4,1.8c-1.2,0-2.5,0.6-3.7,0.9"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1334.2,122.3c1.5,1.6,0.9,3.7,0.9,5.5c0,80,0,160.1,0,240.1c0,17.8,0,35.6,0,53.4c0,20.5,0,41.1,0,61.6"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1247.7,265.3c-0.8,1.6-0.4,3.4-0.4,5.1c0,70.8,0,141.7,0,212.5"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1275.3,121.4c-1.5,1.6-0.9,3.7-0.9,5.5c0,45.7,0,91.4,0,137.1c0,73,0,146,0,219"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1111.1,194.1c8-1.4,16.1-2.3,23.9-4.3c9.5-2.3,18.9-2,28,0.8c5.5,1.7,11.3,1,16.7,3.3c2.9,1.2,3.6,2.5,3.6,5.3c-0.1,20.5,0,41.1,0,61.6c0,74.1,0,148.1,0,222.2"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M894.9,84.6c0,0.8-0.3,1.9,0,2.3c8.1,8.1,12.9,18.4,19.2,27.7c7.7,11.2,15,22.7,22.6,34c3.8,5.6,6.6,12,12.3,16.3c1.5,1.1,1.3,4.4,2.5,6.3c4.9,7.9,9,16.7,15.5,23.1c4.5,4.5,5.5,10.2,9.2,14.7c3.9,4.8,7,10.3,10.2,15.6c1.1,1.7,1.5,3.8,1.5,5.9c-0.1,55.4-0.1,110.7,0,166.1c0,2-0.1,3.9-1.4,5.5"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1538.4,423.1c0-62.9,0-125.7,0-188.6c0-12.3,0.5-24.5-0.7-36.8c-0.7-7.1,10.1-15.5,17.7-15.2c8.6,0.4,16.2,6.3,17.2,14.8c0.3,2.8,0,6.1-0.2,9.2c-0.7,7.5,1.7,15.1-0.9,22.5c2.2,21.3,0.5,42.6,0.8,63.9c0.3,21.3,0.1,42.6,0.1,63.9s0,42.6,0,63.9c0,3.1,0.5,5.3,4.1,6.1c2.2,0.5,3.3,2.6,3.2,4.9c-0.3,11.5,0.6,23-0.5,34.5c-0.2,2.2,1,3.8,1.9,5.5"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M811.1,230.9c3.1,0.3,4.9,2.6,6.9,4.6c53.5,53.5,107,107,160.5,160.5c1.6,1.6,3.1,3.6,5.1,4.5c3.6,1.7,4.2,4.4,4.1,7.9c-0.1,24.8-0.1,49.7-0.1,74.5"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1460.7,285.1c-3.5,0.4-6.1,2.7-8.7,4.7c-3,2.3-1.7,6.2-1.6,9.1c0.2,5.5-0.4,11-0.4,16.6c0.2,53.8,0.1,107.6,0.1,161.5c0,2-0.3,4-0.4,6"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1448.7,309.5c-2.9-0.3-6.4-2.1-8.1,1.5c-1.1,2.2-1.6,5.4-0.9,7.7c1.1,3.2,0.2,6.2,0.2,9.3c0.1,51.7,0.1,103.3,0.1,155"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1464.3,426.8c-2-2.6-2.4-5.5-2.3-8.7c0.1-40.8,0-81.6,0.1-122.4c0-5.7-1.3-11.3-0.2-17c0.4-2.3,0.6-4.2,2.8-5.5c5.4-3.2,10.7-6.5,16.1-9.6c1.9-1.1,4.2-1.4,6.6-0.6c-0.8,2.8-0.6,5.6-0.6,8.4c0,54,0,107.9,0,161.9c0,4.3,1.1,8.7-0.9,12.9"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M807.5,285.1c-1.5-1-3.1-0.4-4.6-0.4c-26.5,0-53.1,0-79.6-0.1c-2.8,0-5.5-0.4-8.3-0.4c-3.8,0-5.6,1.6-6,5.5c-1.1,11.2-0.1,22.4-0.5,33.6c-0.3,8.3-0.8,16.7-0.5,24.8c1.2,30.8,0,61.7,0.6,92.5c0,2.1,0.4,4.3,0.4,6.4c0,6-8.4,12.5-14.2,11c-2-0.5-3.1-2.3-4.1-3.7c-2.7-3.9-6.4-5.9-10.7-7.3c-7-2.4-13,0.3-18.8,3.7c-0.1,0.1,0,0.6,0,0.9"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1314.6,158.6c0,0.5,0,2.1,0,5.5c0,20.9,0,41.7,0,62.6c0,3.7,0,6.8,0,6.9c0,0.1,0-2.4,0-6.9c0-20.5,0-41.1,0-61.6C1314.6,161.7,1314.6,159.5,1314.6,158.6"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1314.6,471.4c0,3.5,0,4.8,0,4c0-0.7,0-3.2,0-6.3c0-20.5,0-41.1,0-61.6c0-4.5,0-6.2,0-6.4c0-0.2,0,1.7,0,6c0,20.1,0,40.2,0,60.3c0,1.2,0,2.5,0,3.7"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1314.6,344.5c0,2.5,0,4.9,0,6c0,1.3,0-1.1,0-5c0-21.3,0-42.6,0-63.9c0-3.2,0-5.4,0-5.4c0,0,0,1.7,0,5.4c0,20.2,0,40.5,0,60.7c0,0.6,0,1.2,0,1.8"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M894.9,87.3c-2,0.8-3.1,2.4-4.2,4.1c-11.6,19.5-23.2,39-35,58.4c-11.7,19.4-23.6,38.6-35.4,58c-3.1,5-6.2,10.1-9.2,15.2c-0.7,1.2-1.3,2.7-1.4,4.1c-0.3,6.9-0.2,13.8-0.6,20.7c-0.7,12.4,1.4,24.9-1,37.3c-0.6,2.8,1.1,6.6,1.1,10.1c0,44.5,0.2,88.9-0.2,133.4c-0.1,7.2,0.6,14.4,0.2,21.6c-0.1,2.1-0.2,4.1-1.9,5.5"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1487.8,262.6c1.9-0.1,3.5,0.4,5.1,1.8c4.2,3.6,6.9,9.1,12.8,10.6c1.5,4.9,6.1,7.5,8.7,11.5c0.7,1,0.5,2.7,0.5,4.1c0.2,44.3,0.3,88.6,0.5,132.9"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1871,419c-1.4-0.5-2.9-0.7-4.1-1.4c-20.1-12.2-43.1-2.1-51.5,17.6c-0.5,1.2-1,2.3-2,3.3c-5.4-1-10.9-2.2-16.4-1.3c-7.7,1.2-14.7,4.3-20.3,10c-1.2,1.2-2.7,2.2-4.1,3.2"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M948.7,482.9c0-28.2,0-56.4,0-84.6c0-1.4-0.2-2.8-0.2-4.1c-0.1-2.8-1.8-3.8-4.4-3.7c-20.5,0.8-41.1,0.7-61.6,0.1c-2.5-0.1-4.9,0.3-5.2,4.1c-0.5,8.6-1.3,17.3-1.7,25.8c-0.3,7.3-0.4,14.7-0.6,22.1c-0.3,12.1-0.9,24.2-1.3,36.3c0,1.3,0.2,2.6-1.8,2.3"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M561.8,419.4c-1.5-2.3-3.1-4.6-4.6-6.9c-6.3-9.9-15.8-12.8-26.7-11.4c-9.3,1.2-16.1,6.6-19.9,15.5c-1.2,2.9-2.5,5.8-6.8,5.6c-12.4-0.4-19.9,6.4-24.4,17.4c-0.6,1.5-0.7,3.5-2.7,4.1"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1955.2,443.8c-2.6-3.4-3.2-7.7-5.9-11.1c-5-6.6-11.1-10.5-19.4-10.5c-4,0-6.4-1.6-7.9-5.5c-5.2-14.1-22.1-19.5-35.9-13.4c-7.1,3.1-10.4,9.6-14.6,15.3c-0.7,0.9,0.2,3,0.3,4.5"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M707.2,348.1c-21.2,0-42.3,0-63.5,0c-9.9,0-19.4,2.1-29,4.2c-4.8,1-9.5,2.5-14.3,3.1c-4,0.5-5.2,2.2-5.1,6.1c0.2,14.6,0,29.1,0.1,43.7c0,2.4-0.2,4.7-1,6.9"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1096.3,34.4c1.9-6.2,0.6-12.6,0.8-18.9c0.1-2-1.9-2.6-3.6-3.3c-7.9-3.3-15.6-6.9-23.5-10c-6.3-2.4-12.6-2.5-19.3-0.7c-11.6,3.1-23.6,5.1-35.4,7.5c-9.5,2-19,4.1-28.5,5.9c-2.7,0.5-3.7,1.5-3.7,4.2c0.1,6.6,0,13.2,0,19.8"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1336.5,373.4c29.1,0,58.3,0,87.4,0"/>
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 {
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
body {
background: #15181A;
-webkit-font-feature-settings: "liga", "dlig", "onum", "pnum", "salt", "swsh";
-moz-font-feature-settings: "liga", "dlig", "onum", "pnum", "salt", "swsh";
-ms-font-feature-settings: "liga", "dlig", "onum", "pnum", "salt", "swsh";
font-feature-settings: "liga", "dlig", "onum", "pnum", "salt", "swsh";
}
svg {
position: relative;
}
svg g {
stroke-dasharray: 740;
stroke-dashoffset: -740;
}
svg g path {
stroke-width: 2px;
stroke: #cacaca;
}
@media screen and (max-width: 950px) {
svg g path {
stroke-width: 4px;
}
}
@media screen and (max-width: 600px) {
svg g path {
stroke-width: 6px;
}
}
.walia {
position: relative;
text-align: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
Animated Radio tab
Animated 3d social icon in css3
Bootstrap 4 Animated Dynamic Form

Questions / Comments: