Live
<css-doodle grid="15"> :doodle { grid-gap: 1px; width: 600px; height: 600px; } background: hsl(@rn(360, 1, 2), @rn(50%, 80%, 3), 80%); border-radius: 0 50% 0 @p(0, 50%); transform: rotate(@p(0, 90deg, 180deg, 270deg));</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.