@use: var(--base); @random(){ border-top:1px solid #000; transform:rotate(45deg); } @random(){ border-left:1px solid #000; transform:rotate(45deg); } @random(){ border-bottom:1px solid #000; transform:rotate(45deg); } @random(){ border-right:2px solid #000; transform:rotate(45deg); }

@use: var(--base); border-radius:50%; @odd { border-top:2px solid #000000; } @even { border-bottom:2px solid #000000; } :doodle { --s: paused; } :doodle(:hover) { --s: running } animation: rotation 2s linear infinite; animation-play-state:var(--s); @keyframes rotation { to { transform: rotate(360deg); } }

@use: var(--base); transform: rotate(45deg) scale(.3); background:#000000; :doodle { --s: paused; } :doodle(:hover) { --s: running } animation: rotation 2s linear calc( ( @abs(@col()-4) + @abs(@row()-4) )*300ms) infinite alternate; animation-play-state:var(--s); @keyframes rotation { to { transform: rotate(45deg) scale(1); } }

@use: var(--base); clip-path: polygon(65% 0, 65% 20%, 20% 20%, 20% 65%, 35% 65%, 35% 35%, 65% 35%, 65% 65%, 0 65%, 0 80%, 20% 80%, 20% 100%, 35% 100%, 35% 80%, 80% 80%, 80% 35%, 100% 35%, 100% 20%, 80% 20%, 80% 0); background:#000; @odd{ transform:rotate(90deg); }

@use: var(--base); @place-cell: center; @size: calc(150% / @size() * @i()); border: 1px solid #000; :doodle { --s: paused; } :doodle(:hover) { --s: running } transform: rotate(calc(@i() * 10deg)); animation: rotation 2s ease-in-out 0s infinite alternate; animation-play-state:var(--s); @keyframes rotation { to { transform: rotate(0); } }

@use: var(--base); @place-cell: @rand(100%) @rand(100%); @size: calc(100% / @size() * @i()); border: 1px solid #000; :doodle { --s: paused; } :doodle(:hover) { --s: running } animation: shrink 2s linear @rand(2000)ms infinite alternate; animation-play-state:var(--s); @keyframes shrink { to { transform: scale(.2); } }

@use: var(--base); @shape:pear; background:#000; @even { transform:scale(var(--large)); animation: scale_1 2s linear 0s infinite alternate; animation-play-state:var(--s); } @odd { transform:rotate(180deg) scale(var(--small)); animation: scale_2 2s linear 0s infinite alternate; animation-play-state:var(--s); } :doodle { --s: paused; --large:1.4; --small:.5; } :doodle(:hover) { --s: running } @keyframes scale_1 { to { transform:scale(var(--small)); } } @keyframes scale_2 { to { transform:rotate(180deg) scale(var(--large)); } }

@use: var(--base); @place-cell: center; @size: @rand(100%); border-radius:@rand(30%,50%); border:1px solid #000; :doodle { --s: paused; } :doodle(:hover) { --s: running } animation: scale-up @rand(1s,4s) linear calc(@index()*100ms) infinite; animation-play-state:var(--s); @keyframes scale-up { to { filter:blur(3px); transform: rotate(360deg) scale(2); } }