-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathai.a.tumbleweed.html
52 lines (45 loc) · 1.78 KB
/
ai.a.tumbleweed.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
<!DOCTYPE html>
<html>
<head>
<style>
.tumbleweed {
fill: none;
stroke-width: 3;
}
</style>
</head>
<body>
<svg id="mySVG" width="1600" height="1600">
<!-- Tumbleweed will be drawn here -->
</svg>
<script>
var svgNS = "http://www.w3.org/2000/svg";
var mySVG = document.getElementById('mySVG');
// Generate a random number of lines between 8 and 360
var numLines = Math.floor(Math.random() * 352) + 8;
for(var i=0; i<numLines; i+=45) {
var tumbleweed = document.createElementNS(svgNS,'ellipse');
tumbleweed.setAttributeNS(null,'cx',800);
tumbleweed.setAttributeNS(null,'cy',800);
tumbleweed.setAttributeNS(null,'rx',400);
tumbleweed.setAttributeNS(null,'ry',160);
tumbleweed.setAttributeNS(null,'transform','rotate('+i+',800,800)');
tumbleweed.setAttributeNS(null,'class','tumbleweed');
// Generate a random color
var color = '#'+Math.floor(Math.random()*16777215).toString(16);
tumbleweed.style.stroke = color;
// Create the animation
var animate = document.createElementNS(svgNS, 'animateTransform');
animate.setAttributeNS(null, 'attributeName', 'transform');
animate.setAttributeNS(null, 'type', 'rotate');
animate.setAttributeNS(null, 'from', '0 800 800');
animate.setAttributeNS(null, 'to', '360 800 800');
animate.setAttributeNS(null, 'dur', '5s');
animate.setAttributeNS(null, 'repeatCount', 'indefinite');
// Add the animation to the tumbleweed
tumbleweed.appendChild(animate);
mySVG.appendChild(tumbleweed);
}
</script>
</body>
</html>