Live
<css-doodle grid="30x30"> :doodle { @size: 90vmin; perspective: 10px; } position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; top: @rn(1%, 100%, 1.5); left: @rn(1%, 100%, 1.5); transform: scale(@rn(.1, 5, 2)); background: hsl(@rn(1, 255, 3), @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: #fff; cursor: pointer; // 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.