A Pen by Amit Sheen on CodePen.
Created
October 26, 2024 12:58
-
-
Save JoshOohAhhAi/388e38d611f7029f051418d6d7cb894b to your computer and use it in GitHub Desktop.
Ball on a colorful grid (CSS only)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="scene"> | |
| <div class="grid"> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| <i><i></i><i></i></i> | |
| </div> | |
| <div class="ball"> | |
| <i></i> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://assets.codepen.io/1948355/twitterButton-2.1.0.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, *::before, *::after { | |
| padding: 0; | |
| margin: 0 auto; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: #000; | |
| color: #fff; | |
| min-height: 100vh; | |
| display: grid; | |
| place-items: center; | |
| perspective: 800px; | |
| overflow: hidden; | |
| * { | |
| transform-style: preserve-3d; | |
| } | |
| } | |
| .scene { | |
| position: relative; | |
| animation: sceneRotate var(--sceneRotateDuration) infinite linear; | |
| --ballRotateDuration: 4s; | |
| --sceneRotateDuration: 48s; | |
| } | |
| @keyframes sceneRotate { | |
| 0% { transform: rotateX(60deg) rotateZ(0deg); } | |
| 100% { transform: rotateX(60deg) rotateZ(360deg); } | |
| } | |
| .grid { | |
| position: absolute; | |
| inset: -47.5vmin; | |
| aspect-ratio: 1; | |
| display: grid; | |
| grid-template-columns: repeat(16, 1fr); | |
| grid-template-rows: repeat(16, 1fr); | |
| gap: 1vmin; | |
| & > i { | |
| --dist: sqrt(var(--x) * var(--x) + var(--y) * var(--y)); | |
| --height: calc(cos(var(--dist) / 1.8) - 1); | |
| --angle: calc(sin(atan2(var(--y), var(--x)) / -6)); | |
| --delay: calc((var(--angle) - 1.75) * var(--ballRotateDuration)); | |
| --hue: calc(var(--angle) * 360); | |
| width: 100%; height: 100%; | |
| overflow: hidden; | |
| background-color: hsl(var(--hue) 100% 20%); | |
| animation: i var(--ballRotateDuration) var(--delay) infinite ease-in-out; | |
| & > i:nth-child(1) { | |
| position: absolute; | |
| inset: 0; | |
| background-color: #fff; | |
| animation: light var(--ballRotateDuration) var(--delay) infinite ease-in-out; | |
| } | |
| & > i:nth-child(2) { | |
| position: absolute; | |
| inset: -10vmin; | |
| background-image: radial-gradient(#000e 5vmin, #0000 12.5vmin); | |
| animation: shadow var(--ballRotateDuration) infinite linear; | |
| } | |
| &:nth-child(16n + 1) { --x: -7.5; } | |
| &:nth-child(16n + 2) { --x: -6.5; } | |
| &:nth-child(16n + 3) { --x: -5.5; } | |
| &:nth-child(16n + 4) { --x: -4.5; } | |
| &:nth-child(16n + 5) { --x: -3.5; } | |
| &:nth-child(16n + 6) { --x: -2.5; } | |
| &:nth-child(16n + 7) { --x: -1.5; } | |
| &:nth-child(16n + 8) { --x: -0.5; } | |
| &:nth-child(16n + 9) { --x: 0.5; } | |
| &:nth-child(16n + 10) { --x: 1.5; } | |
| &:nth-child(16n + 11) { --x: 2.5; } | |
| &:nth-child(16n + 12) { --x: 3.5; } | |
| &:nth-child(16n + 13) { --x: 4.5; } | |
| &:nth-child(16n + 14) { --x: 5.5; } | |
| &:nth-child(16n + 15) { --x: 6.5; } | |
| &:nth-child(16n + 16) { --x: 7.5; } | |
| &:nth-child(-n + 16) { --y: -7.5; } | |
| &:nth-child(n + 17):nth-child(-n + 32) { --y: -6.5; } | |
| &:nth-child(n + 33):nth-child(-n + 48) { --y: -5.5; } | |
| &:nth-child(n + 49):nth-child(-n + 64) { --y: -4.5; } | |
| &:nth-child(n + 65):nth-child(-n + 80) { --y: -3.5; } | |
| &:nth-child(n + 81):nth-child(-n + 96) { --y: -2.5; } | |
| &:nth-child(n + 97):nth-child(-n + 112) { --y: -1.5; } | |
| &:nth-child(n + 113):nth-child(-n + 128) { --y: -0.5; } | |
| &:nth-child(n + 129):nth-child(-n + 144) { --y: 0.5; } | |
| &:nth-child(n + 145):nth-child(-n + 160) { --y: 1.5; } | |
| &:nth-child(n + 161):nth-child(-n + 176) { --y: 2.5; } | |
| &:nth-child(n + 177):nth-child(-n + 192) { --y: 3.5; } | |
| &:nth-child(n + 193):nth-child(-n + 208) { --y: 4.5; } | |
| &:nth-child(n + 209):nth-child(-n + 224) { --y: 5.5; } | |
| &:nth-child(n + 225):nth-child(-n + 240) { --y: 6.5; } | |
| &:nth-child(n + 241) { --y: 7.5; } | |
| } | |
| } | |
| @keyframes shadow { | |
| from { transform: translate(calc(var(--x) * -6.2vmin), calc(var(--y) * -6.2vmin)) rotateZ(360deg) translateX(-36vmin); } | |
| to { transform: translate(calc(var(--x) * -6.2vmin), calc(var(--y) * -6.2vmin)) rotateZ(0deg) translateX(-36vmin); } | |
| } | |
| @keyframes light { | |
| 0%, 100% { opacity: 1; } | |
| 25% { opacity: calc((var(--height, 0) + 2) * 0.3 + 0.1); } | |
| } | |
| @keyframes i { | |
| 0%, 100% { transform: translateZ(2.5vmin); } | |
| 25% { transform: translateZ(calc(var(--height, 0) * 7.5vmin)); } | |
| } | |
| .ball { | |
| position: absolute; | |
| translate: 0 0 -7.5vmin; | |
| animation: ballRotate var(--ballRotateDuration) infinite linear; | |
| i { | |
| position: absolute; | |
| inset: -7.5vmin; | |
| border-radius: 50%; | |
| background-color: #ddd; | |
| background-image: radial-gradient(circle at top, #0000, #000); | |
| animation: ballCounterRotate var(--sceneRotateDuration) infinite linear; | |
| } | |
| } | |
| @keyframes ballRotate { | |
| from { transform: rotateZ(360deg) translateX(-33vmin) rotateZ(0deg); } | |
| to { transform: rotateZ(0deg) translateX(-33vmin) rotateZ(360deg); } | |
| } | |
| @keyframes ballCounterRotate { | |
| from { transform: rotateZ(360deg) rotateX(-60deg); } | |
| to { transform: rotateZ(0deg) rotateX(-60deg); } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment