:doodle { @size: 100px; cursor: pointer; right: 1030px; top: 510px; opacity: .96;z-index: 4; }clip-path: @shape(fill: evenodd; points: 300; scale: .45; x: cos(2t) + cos(π - 7t); y: sin(2t) + sin(7t););background: linear-gradient(DeepSkyBlue,Orange,MediumPurple);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }:doodle { @size: auto 4em; z-index:5; bottom: 30px; --geci: " css-doodle player"; --motion: cover2; --tt: 1s; }display: grid;place-items: center start;:before, :after {content: var(--geci);color: Honeydew;font: bold 2em sans-serif;text-shadow: 1px 1px 2px #000;white-space: pre;}:after {position: absolute;width: 0;color: Green;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%; } }