:doodle { @size: 100px; cursor: pointer; right: 455px; top: 510px; opacity: .66;z-index: 4; }
clip-path: @shape(
points: 18;
R: seq(.618, 1, 0);
T: seq(t-.55, t, t);
x: R * cos(T);
y: R * sin(T);
);
background: linear-gradient(lightgreen,green,lightgreen);
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); } }
:doodle { @size: auto 4em; z-index:5; top: 520px; left:190px; --geci: " css-doodle player"; --motion: cover2; --tt: 1s; }
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: green;
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color:SteelBlue;
overflow: hidden;
animation: var(--motion) var(--tt) linear forwards var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }