summaryrefslogtreecommitdiff
path: root/pendulum.html
diff options
context:
space:
mode:
authorAnthony Wang2023-10-09 03:02:02 +0000
committerAnthony Wang2023-10-09 03:02:02 +0000
commit31e174e54ca6948de9dbed3b19eebe37d2e893e7 (patch)
treeee2da76775e82f526ead7f6b3930b51c65fa0ccf /pendulum.html
parenta09a0c8c6692c61e53ac52f50d69b0df9a37f800 (diff)
Add pendulum demo
Diffstat (limited to 'pendulum.html')
-rw-r--r--pendulum.html177
1 files changed, 177 insertions, 0 deletions
diff --git a/pendulum.html b/pendulum.html
new file mode 100644
index 0000000..3506ae2
--- /dev/null
+++ b/pendulum.html
@@ -0,0 +1,177 @@
+<!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)
+-->
+
+<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>