diff options
| author | Anthony Wang | 2023-10-09 03:02:02 +0000 |
|---|---|---|
| committer | Anthony Wang | 2023-10-09 03:02:02 +0000 |
| commit | 31e174e54ca6948de9dbed3b19eebe37d2e893e7 (patch) | |
| tree | ee2da76775e82f526ead7f6b3930b51c65fa0ccf | |
| parent | a09a0c8c6692c61e53ac52f50d69b0df9a37f800 (diff) | |
Add pendulum demo
| -rw-r--r-- | pendulum.html | 177 |
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> |