Live
<css-doodle grid="100x100"> :doodle { @size: 100vw 100vmin; perspective: 10px; } position: absolute; top: @r(1%, 100%); left: @r(1%, 100%); width: 2px; height: 2px; background: #000; border-radius: 50%; background: hsl(@r(1, 255, 3), @r(10%, 90%), @r(10%, 90%)); transform: rotate(@r(360deg)) translate(@r(-50, 50)vmin, @r(-50, 50)vmin); animation: move @r(5, 15)s infinite @r(-10, 0)s @p(linear, ease-in, ease-in-out) alternate; zoom: @rn(.1, 5, 3); @keyframes move { 100% { transform: rotate(0) translate(0, 0); } }</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.