:doodle { @grid: 10 / 100vmax; } background: @pick(#ffB6F6, #Ffc8d5, #5E35B1, #FFCCBC, #E8EAF6, #c20F0B, #ff0000, #ff79FF); opacity: @r(.9); @shape: heart; animation: move infinite @r(60s, 180s) linear; @keyframes move { 0% { transform: translate3d(0, 0, 0) scale(@r(.1, .9)) rotate(@r(45deg, 360deg)); } 50% { transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0) rotate(@r(45deg, 360deg)); } 100% { transform: translate3d(0, 0, 0); } } :doodle { @grid: 100x100 / 100vmax; } --hue: calc(100 + .5 * @row() * @col()); background: hsla(var(--hue), 50%, 40%, @r(.25, .1)); clip-path: ellipse(100% 100% at @pick('0 0', '0 100%', '100% 0', '100% 100%'));

generative art | henry koh | me@henrykoh.com


January 2022: new collection on Opensea.io https://opensea.io/collection/flowing-animated

animated generated art 61 of 100.

animated generated art 87 of 100.

animated generated art 90 of 100.








website background and animations generated using css-doodle.
please visit css-doodle.com and support its incredibly talented developer Yuan Chuan