"background"
Bootstrap 3.3.0 Snippet by evarevirus

1
2
3
4
5
6
7
8
9
<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 ---------->
<center>
<canvas id="canvas" width="1000" height="400">
</canvas>
</center>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
body {
padding: 0px;
margin: 0px;
background: #ecf0f1;
}
#canvas {
background: #3498db;
width: 100%;
height: 400px;
}
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
/*
* Start Config Vars
*/
var yPosMax = 175;
var yPosMin = 125;
var yPosStart = 150;
var xPosStart = -50;
var yPosChangeMultiplier = 60;
var xPosChangeMin = 125;
var xPosChangeMultiplier = 25;
var yControlMultiplier = 20;
var yControlMin = 40;
/*
* End Config Vars
*/
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.fillStyle = '#ecf0f1';
var xPos = xPosStart;
var yPos = yPosStart;
context.beginPath();
context.moveTo(xPos, yPos);
while (xPos < canvas.width) {
lastX = xPos;
xPos += Math.floor(Math.random() * xPosChangeMultiplier + xPosChangeMin);
yPos += Math.floor(Math.random() * yPosChangeMultiplier - yPosChangeMultiplier/2);
while (yPos < yPosMin) {
yPos += Math.floor(Math.random() * yPosChangeMultiplier/2);
}
while (yPos > yPosMax) {
yPos -= Math.floor(Math.random() * yPosChangeMultiplier/2);
}
controlX = (lastX + xPos)/2;
controlY = yPos-Math.floor(Math.random() * yControlMultiplier + yControlMin);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: