"Dynamic SVG poster"
Bootstrap 3.1.0 Snippet by msurguy

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div id="container">
<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 1200 800" xml:space="preserve" preserveAspectRatio="xMinYMin meet" class="svg-content">
<g id="Layer_3">
<polygon class="triangle" fill="#4C72B8" stroke="#4C72B8" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1454.615,764.603 1260.432,508.089 1147.758,901.249 "/>
<polygon class="triangle" fill="#4C75BA" stroke="#4C75BA" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1454.615,764.603 1147.758,901.249 1308.378,937.211 "/>
<polygon class="triangle" fill="#4F71B7" stroke="#4F71B7" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1260.432,508.089 1107.002,541.65 1147.758,901.249 "/>
<polygon class="triangle" fill="#5375B9" stroke="#5375B9" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1147.758,901.249 1107.002,541.65 1008.711,704.668 "/>
<polygon class="triangle" fill="#484C86" stroke="#484C86" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1279.61,83.761 1123.784,-249.467 1032.686,-110.422 "/>
<polygon class="triangle" fill="#49508D" stroke="#49508D" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1279.61,83.761 1032.686,-110.422 1128.578,102.94 "/>
<polygon class="triangle" fill="#4E508E" stroke="#4E508E" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1128.578,102.94 1032.686,-110.422 1037.479,35.815 "/>
<polygon class="triangle" fill="#4661AD" stroke="#4661AD" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1301.187,342.672 1109.401,395.414 1279.61,486.512 "/>
<polygon class="triangle" fill="#495FAB" stroke="#495FAB" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1301.187,342.672 1109.401,369.043 1109.401,395.414 "/>
<polygon class="triangle" fill="#455494" stroke="#455494" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1291.598,114.926 1128.578,102.94 1265.227,237.19 "/>
<polygon class="triangle" fill="#465CA5" stroke="#465CA5" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1301.187,342.672 1265.227,289.932 1109.401,369.043 "/>
<polygon class="triangle" fill="#4965AF" stroke="#4965AF" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1279.61,486.512 1109.401,395.414 1260.432,508.089 "/>
<polygon class="triangle" fill="#465290" stroke="#465290" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1291.598,114.926 1279.61,83.761 1128.578,102.94 "/>
<polygon class="triangle" fill="#4B67B0" stroke="#4B67B0" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
1260.432,508.089 1109.401,395.414 1107.002,541.65 "/>
<polygon class="triangle" fill="#4B579B" stroke="#4B579B" stroke-width="2.3973" stroke-linejoin="round" stroke-miterlimit="1" points="
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
body{
background: #FFF;
padding: 0;
margin: 0;
}
#container{
margin:0;
padding:0;
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 67%;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
polygon {
fill-opacity: 1;
-webkit-transition: all 0.1s linear;
}
polygon:hover{
fill-opacity: 0.7;
}
.over {
-webkit-animation: demo 3s;
-moz-animation: demo 3s;
-o-animation: demo 3s;
animation: demo 3s;
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
SVGElement.prototype.hasClass = function (className) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(this.getAttribute('class'));
};
SVGElement.prototype.addClass = function (className) {
if (!this.hasClass(className)) {
this.setAttribute('class', this.getAttribute('class') + ' ' + className);
}
};
SVGElement.prototype.removeClass = function (className) {
var removedClass = this.getAttribute('class').replace(new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), '$2');
if (this.hasClass(className)) {
this.setAttribute('class', removedClass);
}
};
SVGElement.prototype.toggleClass = function (className) {
if (this.hasClass(className)) {
this.removeClass(className);
} else {
this.addClass(className);
}
};
$(function() {
var polygons = $('polygon');
var length = polygons.length;
setInterval(function(){
var polygon = polygons[Math.floor(Math.random()*length)];
polygon.toggleClass('over');
},500);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

HI ,tnx for your works ,
How can i change the text in this,

Majid () - 9 years ago - Reply 0


You would need to re-draw it in Adobe illustrator or similar vector program.

maxsurguy () - 9 years ago - Reply 0


tnx ,,, your work is the best,

Majid () - 9 years ago - Reply 0


thats really cool,but i included the css and the js(including jqeury) in my html file but the animation doesnt seems to work

Anmol Shukla () - 10 years ago - Reply 0


Hi! What browser are you using? What exactly is showing up? PS you can download the complete HTML of the snippet by registering on the site.

maxsurguy () - 10 years ago - Reply 0


had some problem with jQuery,nonetheless thanks a lot! :)

Anmol Shukla () - 10 years ago - Reply 0


Excelente !!

Stivenson Rincon Mora () - 10 years ago - Reply 0