forked from ethb3rlin/3
-
Notifications
You must be signed in to change notification settings - Fork 5
/
bg.html
57 lines (48 loc) · 1.83 KB
/
bg.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
<!DOCTYPE html>
<html>
<body>
<div id="svgContainer" style="width:100%; height:100%;"></div>
<script>
function createSinusLine(yOffset, startX, endX) {
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
var amplitude = 25; // Reduced amplitude for flatter waves
var d = `M ${startX} ${100 + yOffset}`;
for (var x = startX; x < endX; x += 200) {
d += ` Q ${x + 25} ${100 - amplitude + yOffset}, ${x + 50} ${100 + yOffset}`;
d += ` T ${x + 100} ${100 + yOffset}`;
d += ` T ${x + 150} ${100 + yOffset}`;
d += ` T ${x + 200} ${100 + yOffset}`;
}
path.setAttribute("d", d);
path.setAttribute("stroke", "url(#pinkToBlueGradient)");
path.setAttribute("fill", "none");
path.setAttribute("stroke-width", "1");
return path;
}
function createSVG() {
var svgNS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgNS, "svg");
var width = window.innerWidth;
var height = window.innerHeight;
svg.setAttribute("width", width.toString());
svg.setAttribute("height", height.toString());
var defs = document.createElementNS(svgNS, "defs");
var gradient = document.createElementNS(svgNS, "linearGradient");
gradient.setAttribute("id", "pinkToBlueGradient");
gradient.innerHTML = `
<stop offset="0%" style="stop-color:rgb(255,182,193);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(173,216,230);stop-opacity:1" />
`;
defs.appendChild(gradient);
svg.appendChild(defs);
var linesCount = Math.ceil(height / 5);
for (var i = 0; i < linesCount; i++) {
svg.appendChild(createSinusLine(i * 5, 0, width));
svg.appendChild(createSinusLine(i * 5, 50, width));
}
document.getElementById("svgContainer").appendChild(svg);
}
createSVG();
</script>
</body>
</html>