-
Notifications
You must be signed in to change notification settings - Fork 0
/
ai.a.tumbleweeds.html
61 lines (52 loc) · 2.3 KB
/
ai.a.tumbleweeds.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
<!DOCTYPE html>
<html>
<head>
<style>
.tumbleweed {
fill: none;
stroke-width: 3;
}
</style>
</head>
<body>
<svg id="mySVG" width="100%" height="100%">
<!-- Tumbleweeds will be drawn here -->
</svg>
<script>
var svgNS = "http://www.w3.org/2000/svg";
var mySVG = document.getElementById('mySVG');
// Generate a random number of tumbleweeds between 1 and 50
var numTumbleweeds = Math.floor(Math.random() * 50) + 1;
for(var t=0; t<numTumbleweeds; t++) {
// Generate a random number of lines between 8 and 360 for each tumbleweed
var numLines = Math.floor(Math.random() * 352) + 8;
// Generate a random position for each tumbleweed
var cx = Math.random() * window.innerWidth;
var cy = Math.random() * window.innerHeight;
for(var i=0; i<numLines; i+=45) {
var tumbleweed = document.createElementNS(svgNS,'ellipse');
tumbleweed.setAttributeNS(null,'cx',cx);
tumbleweed.setAttributeNS(null,'cy',cy);
tumbleweed.setAttributeNS(null,'rx',window.innerWidth/10);
tumbleweed.setAttributeNS(null,'ry',window.innerHeight/10);
tumbleweed.setAttributeNS(null,'transform','rotate('+i+','+cx+','+cy+')');
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 '+cx+' '+cy);
animate.setAttributeNS(null, 'to', '360 '+cx+' '+cy);
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>