-
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
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
<!DOCTYPE html>
<!--
Code mostly taken from:
https://www.geeksforgeeks.org/multiple-pendulum-animation-using-css/
Unbelievable, geeksforgeeks actually producing quality content for once?
I adjusted the numbers based on this demo:
https://sciencedemonstrations.fas.harvard.edu/presentations/pendulum-waves
Also, the lengths are physically accurate (assuming pendulums obey simple harmonic motion which they pretty much do at small angles)
Technically, the angle should vary as a cosine function (assuming the small-angle approximation), but due to CSS limitations it's instead a linear function
Using a piecewise linear function for the animation would be more accurate, but no one can really tell the difference anyways
-->
<html>
<head>
<title>
Multiple Pendulum Animation using CSS
</title>
<style>
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*.pendulum-base {
width: 500px;
height: 300px;
margin: auto;
border-top: 3px solid #66d63e;
}*/
.pendulum {
position: absolute;
right: 50%;
transform: translate(-50%) rotate(20deg);
width: 2px;
height: calc(1000000px / 65 / 65);
background: #b5ff9a;
animation: moveIt calc(60s / 65) ease-in-out infinite;
transform-origin: 50% 0;
}
.pendulum:nth-of-type(2) {
height: calc(1000000px / 64 / 64);
animation-duration: calc(60s / 64);
}
.pendulum:nth-of-type(3) {
height: calc(1000000px / 63 / 63);
animation-duration: calc(60s / 63);
}
.pendulum:nth-of-type(4) {
height: calc(1000000px / 62 / 62);
animation-duration: calc(60s / 62);
}
.pendulum:nth-of-type(5) {
height: calc(1000000px / 61 / 61);
animation-duration: calc(60s / 61);
}
.pendulum:nth-of-type(6) {
height: calc(1000000px / 60 / 60);
animation-duration: calc(60s / 60);
}
.pendulum:nth-of-type(7) {
height: calc(1000000px / 59 / 59);
animation-duration: calc(60s / 59);
}
.pendulum:nth-of-type(8) {
height: calc(1000000px / 58 / 58);
animation-duration: calc(60s / 58);
}
.pendulum:nth-of-type(9) {
height: calc(1000000px / 57 / 57);
animation-duration: calc(60s / 57);
}
.pendulum:nth-of-type(10) {
height: calc(1000000px / 56 / 56);
animation-duration: calc(60s / 56);
}
.pendulum:nth-of-type(11) {
height: calc(1000000px / 55 / 55);
animation-duration: calc(60s / 55);
}
.pendulum:nth-of-type(12) {
height: calc(1000000px / 54 / 54);
animation-duration: calc(60s / 54);
}
.pendulum:nth-of-type(13) {
height: calc(1000000px / 53 / 53);
animation-duration: calc(60s / 53);
}
.pendulum:nth-of-type(14) {
height: calc(1000000px / 52 / 52);
animation-duration: calc(60s / 52);
}
.pendulum:nth-of-type(15) {
height: calc(1000000px / 51 / 51);
animation-duration: calc(60s / 51);
}
@keyframes moveIt {
0%,
100% {
transform: translate(-50%) rotate(30deg);
}
50% {
transform: translate(-50%) rotate(-30deg);
}
}
.pendulum:before {
content: "";
position: absolute;
border-radius: 50%;
transform: translate(-50%);
left: 50%;
top: 100%;
width: 15px;
height: 15px;
background:
radial-gradient(circle at 70% 35%,
white, #66d63e 30%, #40a31d 50%);
}
.pendulum:after {
content: "";
position: absolute;
left: 50%;
transform: translate(-50%);
top: 115%;
border-radius: 50%;
filter: blur(5px);
width: 25px;
height: 3px;
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="pendulum-base">
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
</div>
</body>
</html>