Live
<css-doodle grid="15x15"> :doodle { gap: 5px; width: 80vmin; height: 80vmin; } border-radius: @rn(0%, 50%); background: hsl(@rn(360, 1, 3), 80%, 80%); transform: scale(@rn(.1, 2, 3)); filter: blur(@rn(1px, 20px));</css-doodle>
Live
x
html,body { position: relative; margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #000; filter: contrast(5);}@keyframes change { 10% { filter: hue-rotate(360deg); }}
Live
xxxxxxxxxx6
const doodle = document.querySelector('css-doodle');document.addEventListener('click', function(e) { doodle.update();});
External CSS
This Pen doesn't use any external CSS resources.