Live
<css-doodle grid="10x10"> :doodle { position: relative; @size: 50vmin; gap: 1px; } background: hsl(@rn(255, 1, 2), @rn(10%, 90%), @rn(10%, 90%));</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; // animation: change 10s linear infinite;}@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.