-
Notifications
You must be signed in to change notification settings - Fork 0
/
backgroundNoise.html
72 lines (65 loc) · 2.2 KB
/
backgroundNoise.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlackHole SVG</title>
</head>
<body>
<div id="canvasContainer"></div>
<script>
const PIXELS_PER_SIDE = 200
const PIXEL_SIZE = 10
const CANVAS_SIZE = PIXELS_PER_SIDE * PIXEL_SIZE
const backgroundColors = [
"#140E0E",
"#160F0D",
"#17120E",
"#181214",
"#18130F",
"#181310",
"#181410",
"#1A1210",
"#1A1511",
"#1B1310",
"#1B1517",
"#282221",
]
function createCanvas() {
let canvasArray = []
for (let i = 0; i < PIXELS_PER_SIDE; i++) {
for (let j = 0; j < PIXELS_PER_SIDE; j++) {
let randomIndex = Math.floor(Math.random() * backgroundColors.length)
let fillColor = backgroundColors[randomIndex]
canvasArray.push(fillColor)
}
}
return canvasArray
}
function createSVG(canvas) {
let svg = `<svg width="${CANVAS_SIZE}" height="${CANVAS_SIZE}" style="background-color:transparent">`
// Black background
svg += `<rect x="0" y="0" width="${CANVAS_SIZE}" height="${CANVAS_SIZE}" fill="#000000"/>`
// Noise
for (let i = 0; i < CANVAS_SIZE / 10; i++) {
const x = Math.floor(Math.random() * PIXELS_PER_SIDE)
const y = Math.floor(Math.random() * PIXELS_PER_SIDE)
const fillColor = backgroundColors[Math.floor(Math.random() * backgroundColors.length)]
svg = svg.concat(
`<rect x="${x * PIXEL_SIZE}" y="${
y * PIXEL_SIZE
}" width="${PIXEL_SIZE}" height="${PIXEL_SIZE}" fill="${fillColor}"/>`,
)
}
svg += `</svg>`
return svg
}
document.getElementById("canvasContainer").innerHTML = ""
const canvas = document.createElement("div")
// const holeSize = Math.random() * 10 + 4
canvas.innerHTML = createSVG(createCanvas())
document.getElementById("canvasContainer").appendChild(canvas)
</script>
</body>
</html>