Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	CSS Animated Spiral Background
ID	6350006829629440
Created	5 months ago, 1723497535845
Updated	5 months ago, 1723497738056
Code	<!DOCTYPE html> <!-- IMPORTANT: This uses pure CSS animations which may not be supported by older browsers like Internet Explorer 9. If you cannot see the animation, use Google Chrome. --> <html> <head> <meta charset="utf-8"> <title>CSS Animated Spiral Background</title> <style type='text/css'> * { --logo-lime: linear-gradient(green, lime); --logo-green: darkgreen; --logo-black: linear-gradient(black, green); --logo-hue: rgba(24, 250, 3, 1); } html, body { background: linear-gradient(green, lime); overflow: hidden; width: 100%; height: 100%; } .an-entity-container { width: 100vw; height: 100vh; animation: huerotate 10s infinite; } .an-entity { position: absolute; left: 50%; top: 50%; } @keyframes wiggles { 0% { border-radius: 0px; } 25% { border-radius: 30%; } 50% { border-radius: 0%; } 75% { border-radius: 20px; } 100% { border-radius: 0px; } } .an-entity:nth-child(0) { width: 110vmax; height: 110vmax; transform: translate(-50%, -50%) rotate(0.1013416985rad); background: var(--logo-lime); animation: rotate-0 3.2s infinite 2000ms linear, wiggles 3s infinite; } .an-entity:nth-child(1) { width: 100.3615162889vmax; height: 100.3615162889vmax; transform: translate(-50%, -50%) rotate(0rad); background: var(--logo-black); animation: rotate-1 3.2s infinite 2080ms linear, wiggles 3s infinite; } .an-entity:nth-child(2) { width: 91.5675813801vmax; height: 91.5675813801vmax; transform: translate(-50%, -50%) rotate(0.1013416985rad); background: var(--logo-lime); animation: rotate-2 3.2s infinite 2160ms linear, wiggles 3s infinite; } .an-entity:nth-child(3) { width: 83.5441937292vmax; height: 83.5441937292vmax; transform: translate(-50%, -50%) rotate(0.202683397rad); background: var(--logo-black); animation: rotate-3 3.2s infinite 2240ms linear, wiggles 3s infinite; } .an-entity:nth-child(4) { width: 76.2238359982vmax; height: 76.2238359982vmax; transform: translate(-50%, -50%) rotate(0.3040250955rad); background: var(--logo-lime); animation: rotate-4 3.2s infinite 2320ms linear, wiggles 3s infinite; } .an-entity:nth-child(5) { width: 69.5449068921vmax; height: 69.5449068921vmax; transform: translate(-50%, -50%) rotate(0.405366794rad); background: var(--logo-black); animation: rotate-5 3.2s infinite 2400ms linear, wiggles 3s infinite; } .an-entity:nth-child(6) { width: 63.4512027806vmax; height: 63.4512027806vmax; transform: translate(-50%, -50%) rotate(0.5067084925rad); background: var(--logo-lime); animation: rotate-6 3.2s infinite 2480ms linear, wiggles 3s infinite; } .an-entity:nth-child(7) { width: 57.8914447401vmax; height: 57.8914447401vmax; transform: translate(-50%, -50%) rotate(0.608050191rad); background: var(--logo-black); animation: rotate-7 3.2s infinite 2560ms linear, wiggles 3s infinite; } .an-entity:nth-child(8) { width: 52.8188470389vmax; height: 52.8188470389vmax; transform: translate(-50%, -50%) rotate(0.7093918895rad); background: var(--logo-lime); animation: rotate-8 3.2s infinite 2640ms linear, wiggles 3s infinite; } .an-entity:nth-child(9) { width: 48.1907234314vmax; height: 48.1907234314vmax; transform: translate(-50%, -50%) rotate(0.810733588rad); background: var(--logo-black); animation: rotate-9 3.2s infinite 2720ms linear, wiggles 3s infinite; } .an-entity:nth-child(10) { width: 43.9681279512vmax; height: 43.9681279512vmax; transform: translate(-50%, -50%) rotate(0.9120752865rad); background: var(--logo-lime); animation: rotate-10 3.2s infinite 2800ms linear, wiggles 3s infinite; } .an-entity:nth-child(11) { width: 40.1155271779vmax; height: 40.1155271779vmax; transform: translate(-50%, -50%) rotate(1.013416985rad); background: var(--logo-black); animation: rotate-11 3.2s infinite 2880ms linear, wiggles 3s infinite; } .an-entity:nth-child(12) { width: 36.6005012209vmax; height: 36.6005012209vmax; transform: translate(-50%, -50%) rotate(1.1147586835rad); background: var(--logo-lime); animation: rotate-12 3.2s infinite 2960ms linear, wiggles 3s infinite; } .an-entity:nth-child(13) { width: 33.3934709043vmax; height: 33.3934709043vmax; transform: translate(-50%, -50%) rotate(1.216100382rad); background: var(--logo-black); animation: rotate-13 3.2s infinite 3040ms linear, wiggles 3s infinite; } .an-entity:nth-child(14) { width: 30.4674488555vmax; height: 30.4674488555vmax; transform: translate(-50%, -50%) rotate(1.3174420805rad); background: var(--logo-lime); animation: rotate-14 3.2s infinite 3120ms linear, wiggles 3s infinite; } .an-entity:nth-child(15) { width: 27.7978124054vmax; height: 27.7978124054vmax; transform: translate(-50%, -50%) rotate(1.418783779rad); background: var(--logo-black); animation: rotate-15 3.2s infinite 3200ms linear, wiggles 3s infinite; } .an-entity:nth-child(16) { width: 25.3620963865vmax; height: 25.3620963865vmax; transform: translate(-50%, -50%) rotate(1.5201254775rad); background: var(--logo-lime); animation: rotate-16 3.2s infinite 3280ms linear, wiggles 3s infinite; } .an-entity:nth-child(17) { width: 23.1398040874vmax; height: 23.1398040874vmax; transform: translate(-50%, -50%) rotate(1.621467176rad); background: var(--logo-black); animation: rotate-17 3.2s infinite 3360ms linear, wiggles 3s infinite; } .an-entity:nth-child(18) { width: 21.1122347713vmax; height: 21.1122347713vmax; transform: translate(-50%, -50%) rotate(1.7228088745rad); background: var(--logo-lime); animation: rotate-18 3.2s infinite 3440ms linear, wiggles 3s infinite; } .an-entity:nth-child(19) { width: 19.2623263081vmax; height: 19.2623263081vmax; transform: translate(-50%, -50%) rotate(1.8241505731rad); background: var(--logo-black); animation: rotate-19 3.2s infinite 3520ms linear, wiggles 3s infinite; } .an-entity:nth-child(20) { width: 17.5745115958vmax; height: 17.5745115958vmax; transform: translate(-50%, -50%) rotate(1.9254922716rad); background: var(--logo-lime); animation: rotate-20 3.2s infinite 3600ms linear, wiggles 3s infinite; } .an-entity:nth-child(21) { width: 16.0345875617vmax; height: 16.0345875617vmax; transform: translate(-50%, -50%) rotate(2.0268339701rad); background: var(--logo-black); animation: rotate-21 3.2s infinite 3680ms linear, wiggles 3s infinite; } .an-entity:nth-child(22) { width: 14.6295956433vmax; height: 14.6295956433vmax; transform: translate(-50%, -50%) rotate(2.1281756686rad); background: var(--logo-lime); animation: rotate-22 3.2s infinite 3760ms linear, wiggles 3s infinite; } .an-entity:nth-child(23) { width: 13.3477127405vmax; height: 13.3477127405vmax; transform: translate(-50%, -50%) rotate(2.2295173671rad); background: var(--logo-black); animation: rotate-23 3.2s infinite 3840ms linear, wiggles 3s infinite; } .an-entity:nth-child(24) { width: 12.1781517239vmax; height: 12.1781517239vmax; transform: translate(-50%, -50%) rotate(2.3308590656rad); background: var(--logo-lime); animation: rotate-24 3.2s infinite 3920ms linear, wiggles 3s infinite; } .an-entity:nth-child(25) { width: 11.11107066vmax; height: 11.11107066vmax; transform: translate(-50%, -50%) rotate(2.4322007641rad); background: var(--logo-black); animation: rotate-25 3.2s infinite 4000ms linear, wiggles 3s infinite; } .an-entity:nth-child(26) { width: 10.1374899912vmax; height: 10.1374899912vmax; transform: translate(-50%, -50%) rotate(2.5335424626rad); background: var(--logo-lime); animation: rotate-26 3.2s infinite 4080ms linear, wiggles 3s infinite; } .an-entity:nth-child(27) { width: 9.2492169717vmax; height: 9.2492169717vmax; transform: translate(-50%, -50%) rotate(2.6348841611rad); background: var(--logo-black); animation: rotate-27 3.2s infinite 4160ms linear, wiggles 3s infinite; } .an-entity:nth-child(28) { width: 8.4387767251vmax; height: 8.4387767251vmax; transform: translate(-50%, -50%) rotate(2.7362258596rad); background: var(--logo-lime); animation: rotate-28 3.2s infinite 4240ms linear, wiggles 3s infinite; } .an-entity:nth-child(29) { width: 7.6993493432vmax; height: 7.6993493432vmax; transform: translate(-50%, -50%) rotate(2.8375675581rad); background: var(--logo-black); animation: rotate-29 3.2s infinite 4320ms linear, wiggles 3s infinite; } .an-entity:nth-child(30) { width: 7.0247124957vmax; height: 7.0247124957vmax; transform: translate(-50%, -50%) rotate(2.9389092566rad); background: var(--logo-lime); animation: rotate-30 3.2s infinite 4400ms linear, wiggles 3s infinite; } .an-entity:nth-child(31) { width: 6.4091890687vmax; height: 6.4091890687vmax; transform: translate(-50%, -50%) rotate(3.0402509551rad); background: var(--logo-black); animation: rotate-31 3.2s infinite 4480ms linear, wiggles 3s infinite; } .an-entity:nth-child(32) { width: 5.847599392vmax; height: 5.847599392vmax; transform: translate(-50%, -50%) rotate(3.1415926536rad); background: var(--logo-lime); animation: rotate-32 3.2s infinite 4560ms linear, wiggles 3s infinite; } @keyframes rotate-0 { 50% { transform: translate(-50%, -50%) rotate(3.142rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(6.284rad) scale(1); } } @keyframes rotate-1 { 50% { transform: translate(-50%, -50%) rotate(3.2433416985rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(6.3853416985rad) scale(1); } } @keyframes rotate-2 { 50% { transform: translate(-50%, -50%) rotate(3.344683397rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(6.486683397rad) scale(1); } } @keyframes rotate-3 { 50% { transform: translate(-50%, -50%) rotate(3.4460250955rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(6.5880250955rad) scale(1); } } @keyframes rotate-4 { 50% { transform: translate(-50%, -50%) rotate(3.547366794rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(6.689366794rad) scale(1); } } @keyframes rotate-5 { 50% { transform: translate(-50%, -50%) rotate(3.6487084925rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(6.7907084925rad) scale(1); } } @keyframes rotate-6 { 50% { transform: translate(-50%, -50%) rotate(3.750050191rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(6.892050191rad) scale(1); } } @keyframes rotate-7 { 50% { transform: translate(-50%, -50%) rotate(3.8513918895rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(6.9933918895rad) scale(1); } } @keyframes rotate-8 { 50% { transform: translate(-50%, -50%) rotate(3.952733588rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(7.094733588rad) scale(1); } } @keyframes rotate-9 { 50% { transform: translate(-50%, -50%) rotate(4.0540752865rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(7.1960752865rad) scale(1); } } @keyframes rotate-10 { 50% { transform: translate(-50%, -50%) rotate(4.155416985rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(7.297416985rad) scale(1); } } @keyframes rotate-11 { 50% { transform: translate(-50%, -50%) rotate(4.2567586835rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(7.3987586835rad) scale(1); } } @keyframes rotate-12 { 50% { transform: translate(-50%, -50%) rotate(4.358100382rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(7.500100382rad) scale(1); } } @keyframes rotate-13 { 50% { transform: translate(-50%, -50%) rotate(4.4594420805rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(7.6014420805rad) scale(1); } } @keyframes rotate-14 { 50% { transform: translate(-50%, -50%) rotate(4.560783779rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(7.702783779rad) scale(1); } } @keyframes rotate-15 { 50% { transform: translate(-50%, -50%) rotate(4.6621254775rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(7.8041254775rad) scale(1); } } @keyframes rotate-16 { 50% { transform: translate(-50%, -50%) rotate(4.763467176rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(7.905467176rad) scale(1); } } @keyframes rotate-17 { 50% { transform: translate(-50%, -50%) rotate(4.8648088745rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.0068088745rad) scale(1); } } @keyframes rotate-18 { 50% { transform: translate(-50%, -50%) rotate(4.9661505731rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.1081505731rad) scale(1); } } @keyframes rotate-19 { 50% { transform: translate(-50%, -50%) rotate(5.0674922716rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.2094922716rad) scale(1); } } @keyframes rotate-20 { 50% { transform: translate(-50%, -50%) rotate(5.1688339701rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.3108339701rad) scale(1); } } @keyframes rotate-21 { 50% { transform: translate(-50%, -50%) rotate(5.2701756686rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.4121756686rad) scale(1); } } @keyframes rotate-22 { 50% { transform: translate(-50%, -50%) rotate(5.3715173671rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.5135173671rad) scale(1); } } @keyframes rotate-23 { 50% { transform: translate(-50%, -50%) rotate(5.4728590656rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.6148590656rad) scale(1); } } @keyframes rotate-24 { 50% { transform: translate(-50%, -50%) rotate(5.5742007641rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.7162007641rad) scale(1); } } @keyframes rotate-25 { 50% { transform: translate(-50%, -50%) rotate(5.6755424626rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.8175424626rad) scale(1); } } @keyframes rotate-26 { 50% { transform: translate(-50%, -50%) rotate(5.7768841611rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(8.9188841611rad) scale(1); } } @keyframes rotate-27 { 50% { transform: translate(-50%, -50%) rotate(5.8782258596rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(9.0202258596rad) scale(1); } } @keyframes rotate-28 { 50% { transform: translate(-50%, -50%) rotate(5.9795675581rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(9.1215675581rad) scale(1); } } @keyframes rotate-29 { 50% { transform: translate(-50%, -50%) rotate(6.0809092566rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(9.2229092566rad) scale(1); } } @keyframes rotate-30 { 50% { transform: translate(-50%, -50%) rotate(6.1822509551rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(9.3242509551rad) scale(1); } } @keyframes rotate-31 { 50% { transform: translate(-50%, -50%) rotate(6.2835926536rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(9.4255926536rad) scale(1); } } @keyframes rotate-32 { 50% { transform: translate(-50%, -50%) rotate(6.3849343521rad) scale(1.3); } 100% { transform: translate(-50%, -50%) rotate(9.5269343521rad) scale(1); } } @keyframes huerotate { 100% { filter: hue-rotate(360deg); } } h1#logo-text { background: rgb(0, 0, 0, 0.6); font-size: 64px; color: rgb(255, 255, 255); text-shadow: 0px 0px 11px var(--logo-hue); position: absolute; top: 50%; left: 50%; margin: 0; width: 100%; padding: 10px 40px; text-align: center; border-radius: 20px; transform: translate(-50%, -50%); font-family: Arial; animation: logo-text-anim 2s forwards, bulge 0.5s infinite; } @keyframes bulge { 0% { font-size: 70px; } 50% { font-size: 64px; } 100% { font-size: 70px; } } @keyframes logo-text-anim { 0% { top: -40px; opacity: 0; } 100% { top: 50%; } } p#logo-desc { background: rgb(0, 0, 0, 0.6); font-size: 34px; color: rgb(255, 252, 255); text-shadow: 0px 0px 11px var(--logo-hue); position: absolute; top: calc(50% + 100px); left: 50%; margin: 0; width: 100%; padding: 10px 40px; text-align: center; border-radius: 20px; transform: translate(-50%, -50%); font-family: Arial; font-weight: 600; animation: logo-desc-anim 3s forwards; } @keyframes logo-desc-anim { 0% { top: 100%; opacity: 0; } 100% { top: calc(50% + 100px); } } </style> </head> <body> <div class='scene'> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <div class='an-entity'></div> <h1 id='logo-text'>#LeaferStudios</h1> <p id='logo-desc'>CSS Only Spiral Background</p> </div> <!-- Only for Khan Academy program thumbnail resolution --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <!-- Only for Khan Academy program thumbnail resolution --> <script type> // credit to Bluebird@birdwatcher03 for this thumbnail script (only needed on Khan Academy, makes the thumbnail resolution better) var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, }).then(e => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext('2d').drawImage(e, 0, 0, e.width, e.height, 0, 0, r, r); window.top.postMessage(c.toDataURL(), ""); }).catch(e => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), ""); } }; </script> </body> </html> <!-- Pure CSS Cool Animated Spiral Background by LeaferStudios Like this? Subscribe to get notified when I release another cool project! https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016 810+ lines of code No JavaScript, only CSS and HTML! Released Monday, August 12, 2024 on 5:20 PM Eastern Time. --> <!-- (c) 2024-Present All code by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) -->
Folds	6,735,737,804
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJvrwumjCww
Votes	4
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	5 months ago, 1723498151190
Updated	5 months ago, 1723498151190
Source Deleted	unknown