title
A prototype
:root { --rgb: 255, 0, 0; --foo: green; } body{ background:#fff; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; height:95vh; } div { background: rgba(var(--rgb)); height: 8vw; width:1vw; animation-name: rotate; animation-duration: 15s; animation-delay:calc(var(--foo) * .1s); animation-iteration-count: infinite; transform-origin: center; } @keyframes rotate{ 0% {transform: rotate(0deg);} 50%{ width:calc(var(--foo) * 1vw); height:calc(var(--foo) * 1vw); border-radius:100%; } 100% {transform:rotate(calc(var(--foo) * 360deg));} }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code