html,body{height:100%;margin:0}body{align-content:center}@keyframes --foot{0%{rotate:-25deg}to{rotate:10deg}}@keyframes --leg{to{translate:0 -5px}}@keyframes --body{0%{translate:0 -3px}to{translate:0 -8px}}@keyframes --star{to{rotate:270deg}}@keyframes --circle{0%{stroke-dasharray:20 250;stroke-dashoffset:0;rotate:-120deg}50%{stroke-dashoffset:0;stroke-dasharray:110 250}to{stroke-dasharray:20 250;stroke-dashoffset:-270;rotate:240deg}}svg{display:block;max-height:90vh;max-width:90vw;margin:auto;--color: rgb(150, 117, 240);--circle-time: linear(0, .011 5.7%, .043 11.7%, .156 24%, .498 50%, .842 75.9%, .955 88.3%, .987 94.3%, .999);--foot-time: linear(0, .011 5.2%, .044 9.5%, .158 16.4%, .319 21.4%, .503 25.4%, .688 29.5%, .849 34.3%, .964 40.9%, .996 45.1%, 1.007 50.1%, .997 54.1%, .965 57.5%, .852 63.2%, .509 72.2%, .325 76.9%, .164 82.6%, .049 90.1%, .016 94.7%, .004)}svg *{transform-box:fill-box;animation-duration:1.4s;animation-iteration-count:infinite}svg .foot{animation-name:--foot;transform-origin:95% 50%;animation-delay:.2s;animation-timing-function:var(--foot-time);fill:var(--color, #ffe243)}svg .leg{animation-name:--leg;animation-timing-function:var(--foot-time);fill:var(--color, #ff9200)}svg .star{animation-name:--star;transform-origin:50% 50%;animation-timing-function:var( --circle-time);translate:2px -2px;fill:var(--color, #c500ff)}svg .circle{fill:none;stroke:var(--color, #ff0084);opacity:.5;stroke-width:10px;transform-origin:50% 50%;stroke-linecap:round;stroke-dasharray:180 260;animation-name:--circle;animation-timing-function:var(--circle-time)}svg .body{animation-name:--body;animation-timing-function:var(--foot-time);fill:var(--color, #ff2900)}