Changes
1 changed files (+177/-0)
-
pendulum.html (new)
-
@@ -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>
-