<svg viewBox="0 0 100 100">
<path d="m 56.978924,94.4725 c -1.1,0 -2.2,-0.4 -2.9,-1.1 -0.3,-0.3 -0.6,-0.7 -0.9,-1.1 -0.7,1 -1.7,1.6 -3.4,1.6 -1.9,0 -3.2,-1.2 -4,-2.7 -0.7,1.1 -1.7,1.7 -2.9,1.8 -1.1,0.1 -2.1,-0.4 -3.1,-1.6 -3.8,-4.6 -7,-20.1 -3.3,-33.9 0.5,-2 -0.2,-2.5 -2.8,-4.1 -2.7,-1.6 -6.9,-4.1 -10,-10.6 -0.9,-1.9 -2.3,-5.5 -1.2,-8.3 0.4,-1.2 1.3,-2.1 2.4,-2.6 3.8,-1.7 5.7,1.5 7.1,3.9 1.5,2.6 2.5,4.1 4.6,3.9 1.7,-0.2 2.1,-2.2 2.5,-6.4 0.6,-5.9 1.4,-14 12.1,-14 3.4,0 6,0.9 7.9,2.9 2.8,2.8 3.9,7.7 3.8,15.8 -0.1,3.7 1.3,5.4 2.7,5.5 1.3,0 2.7,-1.3 2.7,-3.8 0.2,-5.5 1,-8.9 4.9,-8.9 h 0.1 c 1.2,0 2.2,0.4 3,1.2 1.8,1.9 1.7,5.4 1.6,7.9 v 1.2 c 0,1 -0.2,9.9 -6.4,13.7 -4.6,2.7 -0.1,16.1 2.6,24.1 1.2,3.7 2.1,6.3 2.2,7.7 v 0.2 c 0.2,1.3 -0.2,3.3 -0.4,3.7 -0.7,2.2 -2.2,2.7 -3,2.8 -1.9,0.2 -3.3,-0.8 -4.2,-2.1 -0.8,1.7 -2.1,2.8 -3.7,2.8 -1.7,0.1 -3,-0.9 -3.7,-2.2 -0.9,1.6 -2.2,2.7 -3.7,2.9 -0.2,-0.2 -0.4,-0.2 -0.6,-0.2 z m -3.7,-8.5 c 0,0 0.1,0 0,0 0.7,0 1.2,0.6 1.2,1.2 0,0.9 0.1,3.4 1.2,4.4 0.4,0.4 0.9,0.5 1.6,0.5 1.2,-0.1 2.6,-2.1 2.6,-5.1 0,-0.6 0.5,-1.1 1.1,-1.2 0.6,0 1.1,0.5 1.2,1.1 0,0 0.3,4.5 2.6,4.5 h 0.1 c 1.1,0 2.3,-1.9 2.3,-4.6 0,-0.6 0.5,-1.1 1.1,-1.1 0.6,0 1.1,0.4 1.2,1 0,0 0.6,4.2 3,4 0.2,0 0.4,-0.1 0.6,-0.4 0.8,-1 0.8,-3.1 0.7,-3.6 v -0.3 -0.2 c 0,-0.9 -1,-3.9 -2,-6.9 -3.3,-9.7 -7.8,-23.1 -1.6,-26.8 4.1,-2.5 5.3,-8.5 5.3,-11.7 v -1.2 c 0.1,-2 0.2,-5.1 -1,-6.2 -0.3,-0.3 -0.7,-0.5 -1.3,-0.5 -1.1,0 -2.4,0 -2.6,6.7 -0.1,4 -2.7,6.1 -5.1,6.1 -2.6,-0.1 -5.1,-2.5 -5,-7.8 0.2,-7.4 -0.8,-11.8 -3.1,-14.2 -1.4,-1.5 -3.5,-2.2 -6.2,-2.2 -8.6,0 -9.2,6.1 -9.7,11.9 -0.4,4 -0.8,8.2 -4.6,8.5 -3.6,0.3 -5.4,-2.6 -6.8,-5 -1.7,-2.9 -2.5,-3.7 -4.1,-2.9 -0.6,0.2 -0.9,0.7 -1.2,1.3 -0.5,1.4 -0.1,3.9 1.2,6.5 2.8,5.8 6.4,8 9,9.6 2.5,1.5 4.9,2.9 3.9,6.7 -3.6,12.8 -0.7,27.6 2.7,31.7 0.5,0.6 0.9,0.8 1.1,0.8 0.8,-0.1 1.8,-1.3 2,-3.4 0.1,-0.6 0.6,-1 1.2,-1 0.6,0 1.1,0.5 1.2,1.1 0,0 0.4,4.2 2.8,4.2 1.4,0.1 2.1,-0.6 2.3,-4.3 0,-0.7 0.5,-1.2 1.1,-1.2 z"/>
<path d="m 52.320924,37.0035 c 0.2,-0.6 0.3,-1.3 0.3,-2 0,-1.9 -0.7,-2.5 -1.6,-2.5 -0.9,0 -1.6,0.6 -1.6,2.5 0,0.8 0.1,1.5 0.3,2 1.464,0.896 1.883,0.224 2.6,0 z"/>
<path d="m 47.378924,31.3725 c -0.6,0 -1.2,-0.5 -1.2,-1.2 v -2 c 0,-0.6 0.5,-1.2 1.2,-1.2 0.6,0 1.2,0.5 1.2,1.2 v 2 c 0,0.6 -0.6,1.2 -1.2,1.2 z"/>
<path d="m 54.278924,31.3725 c -0.6,0 -1.2,-0.5 -1.2,-1.2 v -2 c 0,-0.6 0.5,-1.2 1.2,-1.2 0.6,0 1.2,0.5 1.2,1.2 v 2 c 0,0.6 -0.5,1.2 -1.2,1.2 z"/>
<path fill="#f60" d="m 47.931924,45.9015 c -0.559,0.48 -1.245,0.7 -1.921,0.617 -1.556,-0.188 -2.685,-1.851 -2.535,-3.72 -0.443,0.098 -0.905,0.05 -1.335,-0.138 -1.336,-0.584 -2.036,-2.365 -1.55,-3.981 a 2.1,2.1 0 0 1 -1.011,-0.743 c -0.779,-1.042 -0.715,-2.647 0.154,-3.588 -0.393,-3.385 0.032,-6.836 1.222,-9.933 l 1.381,0.617 a 18.69,18.69 0 0 0 -0.7,7.486 c 0.449,4.013 3.505,6.824 6.834,6.294 0.915,-0.148 1.794,-0.551 2.567,-1.168 2.79,2.244 6.565,1.334 8.425,-2.029 a 8.361,8.361 0 0 0 0.97,-3.097 c 0.28,-2.525 0.042,-5.092 -0.695,-7.486 l 1.377,-0.616 c 1.19,3.096 1.62,6.548 1.227,9.932 0.296,0.325 0.511,0.75 0.622,1.218 0.3,1.357 -0.357,2.75 -1.483,3.114 0.156,0.519 0.192,1.081 0.11,1.62 -0.255,1.687 -1.597,2.801 -2.996,2.499 a 3.95,3.95 0 0 1 -0.517,2.314 c -0.906,1.527 -2.667,1.88 -3.934,0.788 -0.343,1.004 -1.007,1.803 -1.839,2.212 -1.715,0.846 -3.674,-0.146 -4.373,-2.212 z"/>
<path fill="green" d="m 34.979924,21.4035 a 1.965,1.965 0 0 1 -0.886,-2.431 1.91,1.91 0 0 1 2.486,-1.103 c 0.69,0.331 1.398,0.635 2.122,0.908 v -8.859 c 0,-2.536 2.02,-4.591 4.512,-4.591 h 14.497 c 2.492,0 4.512,2.055 4.512,4.59 v 8.861 a 26.398,26.398 0 0 0 2.123,-0.908 c 0.909,-0.36 1.942,0.03 2.39,0.898 0.5,0.952 0.14,2.135 -0.791,2.636 a 32.518,32.518 0 0 1 -30.965,0 z m 3.913,-5.514 v 2.934 a 51.191,51.191 0 0 0 8.526,1.234 v -2.947 a 51.17,51.17 0 0 1 -8.526,-1.221 z m 10.22,4.288 h 2.7 v -3.056 h -2.7 z m 2.504,-0.178 v -2.694 c -0.769,0.016 -1.539,0.016 -2.307,0 v 2.694 c 0.768,0.018 1.538,0.018 2.307,0 z m -4.009,-3.814 v 4.927 c 0,0.325 0.264,0.594 0.585,0.594 h 4.54 c 0.32,0 0.584,-0.269 0.584,-0.594 v -4.927 a 0.588,0.588 0 0 0 -0.583,-0.593 h -4.541 a 0.588,0.588 0 0 0 -0.585,0.593 z m 14.426,2.638 v -2.934 a 51.281,51.281 0 0 1 -8.525,1.222 v 2.946 a 51.195,51.195 0 0 0 8.525,-1.234 z"/>
<path stroke="#000" stroke-width=".021" stroke-dashoffset="29.631" d="m 53.523924,18.5825 0.01,-1.459 0.195,-0.01 c 0.821,-0.04 2.686,-0.227 3.823,-0.385 1.25,-0.172 3.55,-0.59 4.277,-0.777 l 0.187,-0.048 v 1.452 c 0,1.353 -0.005,1.454 -0.063,1.47 -0.124,0.038 -1.285,0.28 -1.893,0.397 -2.085,0.398 -4.063,0.648 -6.411,0.81 l -0.134,0.01 z" stroke-linecap="round" stroke-linejoin="bevel" paint-order="stroke fill markers"/>
<path stroke="#000" stroke-width=".021" stroke-dashoffset="29.631" d="m 46.136924,19.9485 c -2.354,-0.208 -4.875,-0.597 -6.909,-1.066 l -0.329,-0.076 v -2.898 l 0.703,0.152 c 2.314,0.502 5.098,0.893 7.37,1.036 l 0.41,0.026 0.008,1.45 0.01,1.448 -0.258,-0.004 a 21.087,21.087 0 0 1 -1.006,-0.07 z" stroke-linecap="round" stroke-linejoin="bevel" paint-order="stroke fill markers"/>
<path fill="#ff0" stroke="#000" stroke-width=".021" stroke-dashoffset="29.631" d="m 47.984924,21.6435 a 0.667,0.667 0 0 1 -0.354,-0.455 c -0.012,-0.084 -0.017,-1.282 -0.012,-2.663 l 0.011,-2.51 0.095,-0.143 c 0.18,-0.273 0.051,-0.26 2.73,-0.26 2.645,0 2.542,-0.01 2.727,0.233 l 0.103,0.134 0.01,2.617 0.009,2.617 -0.08,0.16 a 0.483,0.483 0 0 1 -0.24,0.24 l -0.159,0.08 -2.366,-0.002 c -1.875,0 -2.389,-0.01 -2.474,-0.048 z m 3.85,-3 0.01,-1.538 h -2.738 v 3.095 l 1.36,-0.01 1.36,-0.009 z" stroke-linecap="round" stroke-linejoin="bevel" paint-order="stroke fill markers"/>
</svg>
:root {
--angle: 15deg;
}
body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
background: radial-gradient(
circle at center,
hsl(120, 80%, 96%),
hsl(120, 80%, 20%)
);
}
svg {
display: block;
width: 70%;
height: auto;
max-width: 800px;
opacity: 0.6;
animation: ghost 1.5s infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
transform: skewX(var(--angle));
transform-origin: center;
}
@keyframes ghost {
to {
transform: skewX(calc(var(--angle) * -1));
}
}
This is an animation of a cartoonish leprechaun ghost swaying in a scary pose. This was an exploration of animating the different CSS transform functions. I have never seen an example of someone animating skew()
. That was the trigger!