@place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * -182deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: bean; } filter: drop-shadow(-1px 0 0 hsla( calc(@index() * 1.5 - 50), 70%, 65%, calc(@index() / 50) )); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * 181deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: clover 4; } filter: drop-shadow(-1px 0 0 hsla( calc(@index() * 1.5 - 50), 70%, 65%, calc(@index() / 50) )); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 2%); transform: rotate(calc(@index() * 181deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: bud 10; } filter: drop-shadow(-2px 0 0 hsla( calc(@index() * 3 - 50), 70%, 65%, calc(@index() / 50) )); @place-cell: center; @size: calc(100% - @calc(@index() -1) * 1%); transform: rotate(calc(@index() * -10deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: infinity; } --sw: 1px; --sc: hsla( calc(@index() * 2 - 50), 70%, 65%, calc(@index() / 100) ); filter: drop-shadow(0 var(--sw) 0 var(--sc)) drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc)) drop-shadow(var(--sw) 0 0 var(--sc)) drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc)); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * 10deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: bud 10; } filter: drop-shadow(-1px 0 0 hsla( calc(@index() * 2 - 50), 70%, 65%, calc(@index() / 50) )); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * 10deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: bean; } filter: drop-shadow(-1px 0 0 hsla( calc(@index() * 2 - 50), 70%, 65%, calc(@index() / 50) )); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * -20deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: star; } filter: drop-shadow(-1px 1px 0 hsla( calc(@index() * 1.5 - 50), 70%, 65%, calc(@index() / 50) )); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * -24deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: clover 5; } filter: drop-shadow(-1px 0 0 hsla( calc(@index() * 1.5 - 50), 70%, 65%, calc(@index() / 50) )); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * 260deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: hypocycloid 6; } filter: drop-shadow(0 -1px 0 hsla( calc(@index() * 1.5 - 50), 70%, 65%, calc(@index() / 50) )); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * 45deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: bean; } filter: drop-shadow(-1px 0 0 hsla( calc(@index() * 2 - 50), 70%, 65%, calc(@index() / 50) )); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 4%); transform: rotate(calc(@index() * -60deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: clover 4; } --sw: 1px; --sc: hsla( calc(@index() * 8 - 50), 70%, 65%, calc(@index() / 25) ); filter: drop-shadow(0 var(--sw) 0 var(--sc)) drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc)) drop-shadow(var(--sw) 0 0 var(--sc)) drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc)); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 2%); transform: rotate(calc(@index() * 189deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: clover 5; } --sw: 1px; --sc: hsla( calc(@index() * 3 - 50), 70%, 65%, calc(@index() / 50) ); @even { filter: drop-shadow(0 var(--sw) 0 var(--sc)) drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc)) drop-shadow(var(--sw) 0 0 var(--sc)) drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc)); } @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 2%); transform: rotate(calc(@index() * 1 * 189deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: star; } --sw: 1px; --sc: hsla( calc(@index() * 4 - 50), 70%, 65%, calc(@index() / 50) ); filter: drop-shadow(0 var(--sw) 0 var(--sc)) drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc)) drop-shadow(var(--sw) 0 0 var(--sc)) drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc)); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * -270deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: star; } --sw: 1px; --sc: hsla( calc(@index() * 2 - 50), 70%, 65%, calc(@index() / 50) ); filter: drop-shadow(var(--sw) 0 0 var(--sc)) drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc)); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 5%); transform: rotate(calc(@index() * 70deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: hypocycloid 10; } --sw: 1px; --sc: hsla( calc(@index() * 10 - 50), 70%, 65%, calc(@index() / 10) ); filter: drop-shadow(0 var(--sw) 0 var(--sc)) drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc)) drop-shadow(var(--sw) 0 0 var(--sc)) drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc)); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * -298deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: infinity; } @odd { filter: drop-shadow(-2px 0 0 hsla( calc(@index() * 2 - 50), 70%, 65%, calc(@index() / 50) )); } @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 2%); transform: rotate(calc(@index() * -123deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: alien 1 1 2; } --sw: 1px; --sc: hsla( calc(@index() * 4 - 50), 70%, 65%, calc(@index() / 25) ); filter: drop-shadow(var(--sw) 0 0 var(--sc)) drop-shadow(calc(-.5 * var(--sw)) 0 0 var(--sc)); @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * -269deg)); :after { content: ''; background: var(--doodle-bg); @size: 100%; @shape: alien 4 1 2; } filter: drop-shadow(-2px 0 0 hsla( calc(@index() * 1.5 - 50), 70%, 65%, calc(@index() / 50) ));

CSS Art with <css-doodle />