Snippets Ranger loading animation
<div class="peephole">
<svg viewBox="0 0 1500 1500">
<defs id="defs37">
<linearGradient id="linearGradient4280">
<stop id="stop4276" offset="0" stop-color="#ff873a" />
<stop id="stop4860" offset=".527" stop-color="#b94900" />
<stop id="stop4278" offset="1" stop-color="#aa4400" />
</linearGradient>
<linearGradient
id="path60_1_"
x1="455.09"
x2="455.09"
y1="413.457"
y2="1539.916"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1 0 0 -1 2 2482)"
>
<stop id="stop1017" stop-color="#cb7052" offset="0" />
<stop id="stop1019" stop-color="#7d2638" offset="1" />
</linearGradient>
<linearGradient id="linearGradient3434">
<stop id="stop3438" offset="0" stop-color="#ff0" />
<stop id="stop3440" offset="1" />
</linearGradient>
<linearGradient id="linearGradient1855">
<stop id="stop1859" offset="0" stop-color="#b3b3b3" />
<stop id="stop1861" offset="1" stop-color="#f0f0f0" />
</linearGradient>
<linearGradient
id="rect17_1_"
x1="1755.49"
x2="1755.49"
y1="-.39"
y2="2482"
gradientTransform="matrix(1.424 0 0 -1 0 2482.066)"
gradientUnits="userSpaceOnUse"
>
<stop id="stop4" offset="0" stop-color="#de9f60" />
<stop id="stop6" offset=".186" stop-color="#dc9b5f" />
<stop id="stop8" offset=".364" stop-color="#d6905b" />
<stop id="stop10" offset=".539" stop-color="#cc7c54" />
<stop id="stop12" offset=".712" stop-color="#bd614a" />
<stop id="stop14" offset=".881" stop-color="#ab3f3e" />
<stop id="stop16" offset="1" stop-color="#9c2234" />
</linearGradient>
<linearGradient
id="path69_1_"
x1="1563.255"
x2="1563.255"
y1="377.096"
y2="1267.209"
gradientTransform="matrix(1 0 0 -1 3305.78 2533.83)"
gradientUnits="userSpaceOnUse"
>
<stop id="stop60" offset="0" stop-color="#cb7052" />
<stop id="stop62" offset="1" stop-color="#7d2638" />
</linearGradient>
<linearGradient
id="path80_1_"
x1="3036.341"
x2="3036.341"
y1="327.65"
y2="808.805"
gradientTransform="matrix(1 0 0 -1 2146 2482)"
gradientUnits="userSpaceOnUse"
>
<stop id="stop68" offset="0" stop-color="#d66d51" />
<stop id="stop70" offset="1" stop-color="#d3404a" />
</linearGradient>
<radialGradient
id="circle43_1_"
cx="1037.824"
cy="1294.293"
r="271.397"
gradientTransform="matrix(1 0 0 -1 0 2194)"
gradientUnits="userSpaceOnUse"
>
<stop id="stop34" offset="0" stop-color="#fefcfa" />
<stop id="stop36" offset=".243" stop-color="#fefaf6" />
<stop id="stop38" offset=".475" stop-color="#fdf4eb" />
<stop id="stop40" offset=".703" stop-color="#fde9d7" />
<stop id="stop42" offset=".926" stop-color="#fbdbbd" />
<stop id="stop44" offset="1" stop-color="#fbd5b2" />
</radialGradient>
<linearGradient
id="path60_1_-3"
x1="455.09"
x2="455.09"
y1="413.457"
y2="1539.916"
gradientTransform="rotate(180 2497.032 1241)"
gradientUnits="userSpaceOnUse"
>
<stop id="stop53-6" offset="0" stop-color="#cb7052" />
<stop id="stop55-7" offset="1" stop-color="#7d2638" />
</linearGradient>
<linearGradient
id="linearGradient1057"
x1="1755.49"
x2="1755.49"
y1="-.39"
y2="2482"
xlink:href="#rect17_1_"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.424 0 0 -1 0 2482.066)"
/>
<linearGradient
id="linearGradient1028"
x1="2492.439"
x2="2490.711"
y1="2457.368"
y2="2291.695"
xlink:href="#path60_1_"
gradientUnits="userSpaceOnUse"
/>
<radialGradient
id="radialGradient4282"
cx="797.615"
cy="779.02"
r="123.771"
xlink:href="#linearGradient4280"
fx="797.615"
fy="779.02"
gradientTransform="matrix(1.648 -.012 .002 .245 -434.444 582.75)"
gradientUnits="userSpaceOnUse"
/>
</defs>
<filter
id="filter4604"
width="1.063"
height="1.063"
x="-.031"
y="-.031"
color-interpolation-filters="sRGB"
>
<feGaussianBlur id="feGaussianBlur4606" stdDeviation="11.043" />
</filter>
<g id="right-arm" fill-rule="evenodd">
<path
id="path6-6"
fill="#eb1473"
stroke="#000000"
stroke-width="7.299"
d="M740.25 482.037c11.006 29.245 5.97 30.435 27.502 55.09-19.594 19.88-41.364 46.693-62.193 65.262l-24.86 24.166-14.14 12.686 21.523 24.42c22.04-10.427 44.026-20.858 64.194-34.402 29.352-13.915 53.976-32.913 78.554-53.596 2.28-43.354-3.052-59.563-9.935-98.395-31.652 9.31-52.732 16.63-80.645 4.77z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path8-7"
fill="#e6e6e6"
stroke="#000000"
stroke-width="7.299"
d="M688.39 666.41l-22.45-26.07c26.075-26.02 52.78-50.904 77.937-77.808l41.047 49.516c-31.59 19.62-62.756 38.94-96.535 54.36z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path10-5"
fill="#eb1473"
stroke="#000000"
stroke-width="2.876"
d="M777.24 616.967l-24.007-2.27-8.91 21.984z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path80-5"
fill="#ffffff"
stroke-width="4.867"
d="M669.127 643.357l87.806-65.148-13.162-15.41-77.975 76.805z"
/>
<path
id="path104-1"
fill="#e6e6e6"
stroke="#000000"
stroke-width="7.299"
d="M686 669.627l-17.174 20.334c-2.8 10.49-5.767 22.717-10.23 31.768-1.308 2.65-9.38 1.377-12.615 1.83-4.87-1.267-5.086 2.328-10.77-2.82-.48-.436-10.985-1.192-11.11-1.24-.305-.114-4.97-5.39-5.596-5.467-4.717-2.147-3.94-12.657-4.05-21.315-.16.172 1.702-4.576 2.88-5.84 2.75-1.923 7.196-5.63 6.46-7.69-1.125-3.155-8.38-5.103-12.282-6.313-8.494.663-12.874-9.796-12.632-13.805 4.78.138 4.396 1.46 9.585 1.79.87.057 14.65 4.23 19.187 3.385 7.074-1.186 14.564-7.5 15.16-8.272.89-1.15 13.07-9.134 13.07-9.134l6.065-5.18z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path160-2"
fill="#eb1473"
stroke="#000000"
stroke-width="4.867"
d="M752.178 613.09l5.465-20.83-21.567 1.62-8.394 20.268z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path164-7"
fill="#ff318c"
stroke="#000000"
stroke-width="4.867"
d="M712.758 595.035l21.528-3.11 5.075-21.643-2.8.418c-2.248 3.133-22.11 22.878-23.8 24.333z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path168-0"
fill="#e6e6e6"
stroke="#000000"
stroke-width="4.867"
d="M618.408 714.714c5.71-3.974 15.865-16.508 15.865-16.508 1.5-6.26 2.544-10.738 1.514-16.468-2.08-3.5-9.092 1.17-9.753 9.75-.07.91-6.51 5.678-6.377 6.668"
stroke-linejoin="round"
/>
<path
id="path170-9"
fill="#e6e6e6"
stroke="#000000"
stroke-width="4.867"
d="M630.087 720.217c5.712-5.64 11.21-9.79 13.266-15.726.233-.676 1.777-3.32 1.674-3.914-.767-4.382-2.95-3.778-2.745-7.36"
stroke-linejoin="round"
/>
<g id="g190-3" transform="rotate(-97 727.39 243.87) scale(4.867)">
<g id="g180-6" stroke-linejoin="round">
<path
id="path174-0"
fill="#ffffff"
stroke="#000000"
stroke-width=".5"
d="M53.662 21.322l3.485 2.157"
/>
<path
id="path176-6"
fill="#ffffff"
stroke="#000000"
stroke-width=".5"
d="M53.755 23.875l2.28.79"
/>
<path
id="path178-2"
fill="#808080"
stroke="#808080"
stroke-width=".2"
d="M59.377 20.22c.555.106 1.214.484 1.423.58.488.22.235 1.3-.522 1.416-.35.053-1.245-.218-1.788-.256"
/>
</g>
<path
id="path182-6"
fill="#cccccc"
d="M58.097 21.895l1.133-1.88c.14.064.22.093.31.11-.242.665-.555 1.044-.917 1.64-.118.1-.408.28-.526.13z"
/>
<path
id="path184-1"
fill="#666666"
d="M56.833 23.57l1.133-1.88c.14.064.232.082.322.1-.243.664-.633 1.242-.995 1.837a.336.336 0 0 1-.46-.057z"
/>
<path
id="path186-8"
fill="#666666"
stroke="#666666"
stroke-width=".2"
d="M58.154 21.946c.634.027 1.55.908 1.502 1.133-.124.6-1.195.83-2.51.49"
stroke-linejoin="round"
/>
</g>
<path
id="path206-2"
fill="#666666"
stroke="#666666"
stroke-width=".974"
d="M653.99 708.324c1.06-4.17 1.877-11.203 2.99-11.118 2.977.22 4.478 6.886 3.67 13.446"
stroke-linejoin="round"
/>
</g>
<g id="lower-right-leg">
<path
id="path36"
fill="#e6e6e6"
fill-rule="evenodd"
stroke="#000000"
stroke-width="7.3"
d="M666.867 941.93c-7.623 24.65-11.86 50.197-17.197 75.45-5.455 19.034-6.934 30.517-11.634 41.805-33.57-10.12-66.38-1.74-97.906 14.01-6.3 14.286 16.528 39.58 40.13 54.78 29.107 16.25 51.577 24.097 85.445 34.41l28.07 8.75c16.484-37.01 32.502-74.442 45.78-112.67 10.49-30.05 21.705-55.99 32.353-85.982l-52.233-14.932z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path38-3"
fill="#ffffff"
fill-rule="evenodd"
stroke="#000000"
stroke-width="1.46"
d="M539.09 1070.144c-2.015 1.402-7.14 9.56-9.305 17.716-.553 2.085 2.106 9.907 9.77 19.696 0 0 22.14 25.074 40.76 34.077 20.138 9.74 35.19 19.55 49.033 24.49l10.25-8 .18 10.172 50.71 15.245 5.914-12.65c-52.726-14.15-112.928-31.714-146.746-70.546-12.853-15.264-10.954-23.095-10.563-30.2z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path40"
fill="none"
stroke="#000000"
stroke-width="3.893"
d="M540.34 1071.072c-3.93 2.5-14.394 13.387-11.53 18.664 21.093 37.486 68.546 62.452 99.775 76.57l11.296-7.347-.386 10.546c16.965 4.54 33.93 9.75 51.126 13.833l5.683-13.316"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path90"
fill="#ff318c"
fill-rule="evenodd"
stroke="#000000"
stroke-width="7.299"
d="M666.894 941.922l52.28 15.12 52.766 15.428 12.95-33.904 14.59-3.616-29.324-47.465-11.226-10.08-15.62-24.615c-31.504 26.445-57.128 53.524-76.416 89.132z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path234"
fill="#eb1473"
fill-rule="evenodd"
stroke-width="4.867"
d="M751.417 962.494c3.297-9.86 17.55-36.55 17.55-36.55s11.654-14.424 14.87-9.67c3.215 4.754 13.47 18.993 13.47 18.993-.09 1.652-12.476 1.37-13.265 3.523l-11.082 30.23z"
opacity=".996"
/>
</g>
<g id="horse-head">
<g id="horse-mane">
<path
id="path16-9"
fill="#00ff00"
stroke="#00db58"
stroke-width="5.005"
d="M397.606 660.31c-18.27-25.074-22.208-43.157-21.172-72.407l59.044 10.025 50.126 7.773-10.025-33.416c126.514 4.99 133.48 16.947 216.103 95.795l-20.605 46.246c-89.73-66.01-87.58-78.49-189.93-96.342l-44.56 11.137z"
/>
<g
id="g24"
fill="#20dd20"
fill-rule="evenodd"
transform="translate(294.563 402.658) scale(5.005)"
>
<path id="path18-1" d="M68.545 55.2l3.226-8.928 3.36 3.182z" />
<path id="path20-4" d="M75.13 49.453l-3.36 9.192 7.425-5.384z" />
<path id="path22-9" d="M68.015 42.957l3.756 3.315-7.02 6.23z" />
</g>
<path
id="path28-1"
fill="#20dd20"
fill-rule="evenodd"
stroke-width="5.005"
d="M490.51 572.89l14.155 47.337 12.613-44.68z"
/>
<path
id="path30-0"
fill="#20dd20"
fill-rule="evenodd"
stroke-width="5.005"
d="M388.877 647.022c1.767-1.326 47.838-30.68 47.838-30.68l-57.222 3.628c1.2 7.908 6.556 18.97 9.36 27.052z"
/>
<path
id="path32-7"
fill="#20dd20"
fill-rule="evenodd"
stroke-width="5.005"
d="M378.872 612.413c1.767-1.787 63.263 6.877 63.263 6.877l-64.2-26.902c.45 10.21.937 20.02.937 20.02z"
/>
<path
id="path78"
fill="#20dd20"
fill-rule="evenodd"
stroke-width="5.005"
d="M526.244 576.277l26.762 2.652-14.816 42.47z"
/>
<path
id="path82-5"
fill="#20dd20"
fill-rule="evenodd"
stroke-width="5.005"
d="M563.18 581.367l25.21 5.97-24.108 45.126z"
/>
<path
id="path162"
fill="#20dd20"
fill-rule="evenodd"
stroke-width="5.005"
d="M577.605 636.822s15.045-46.016 16.817-45.57c1.767.44 21.23 11.28 21.23 11.28z"
/>
<path
id="path166"
fill="#20dd20"
fill-rule="evenodd"
stroke-width="5.005"
d="M599.437 648.984l16.592-46.446 18.566 14.364z"
/>
</g>
<g
id="g1146"
stroke="#d0d0d0"
stroke-width=".4"
transform="translate(295.313 401.537) scale(5.005)"
>
<path
id="path192"
d="M10.645 79.08c.922-21.69.556-19.787 17.583-33.608l.445-10.015 8.458 7.79C58.97 45.374 59.88 49.6 76.53 63.5c0 0-14.75-13.853 1.206 4.947-.18 7.89-18.272 21.152-23.09 23.208L44.7 71.957c-8.622 1.49-14.418 7.5-18.25 13.13-4.99 1.977-16.17-.66-15.803-6.008z"
/>
</g>
<ellipse
id="ellipse194"
cx="454.973"
cy="675.906"
fill="#ffffff"
stroke="#d0d0d0"
stroke-width="3.784"
ry="10.581"
stroke-linecap="square"
stroke-linejoin="round"
paint-order="stroke fill markers"
rx="11.697"
/>
<ellipse
id="horse-pupil"
cx="456.97"
cy="678.149"
stroke-width="2.743"
rx="4.59"
ry="4.625"
stroke-linecap="square"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path204"
fill="#333333"
stroke-width="5.005"
d="M406.09 794.605c0 5.69-4.986 10.31-11.142 10.31s-11.136-4.62-11.136-10.31 12.512-19.595 11.136-10.31c-.9 6.09 11.14 4.62 11.14 10.31"
paint-order="stroke fill markers"
/>
<path
id="path276"
fill="#565656"
fill-opacity=".516"
fill-rule="evenodd"
stroke-width="5.005"
d="M573.09 681.817l102.603 92.593 13.764-15.015z"
/>
<path
id="path278"
fill="#3e3e3e"
fill-opacity=".5"
fill-rule="evenodd"
stroke-width="5.005"
d="M558.72 713.684c31.28 17.517 85.692 95.76 85.692 95.76l13.764-13.763z"
/>
<path
id="path200"
fill="#1a1a1a"
fill-rule="evenodd"
stroke-width="5.005"
d="M625.3 817.17c-44.78-47.437-77.75-100.948-100.112-85.093 0 0-40.37 18.304-73.473 42.333-18.118 14.154-28.83 30.13-38.79 50.05-22.406-3.664-37.737-14.114-58.457-22.823-4.974 20.278 54.49 34.743 72.91 24.56 6.347-8.845 10.107-16.062 22.335-29.195 16.766-12.948 27.707-28.81 70.37-37.903l27.527 45.344 24.91 47.467z"
/>
<path
id="path202"
fill="#aa4400"
stroke-width="5.005"
d="M360.413 708.954c15.04 6.682 61.832 44.58 61.832 44.58 37.277-15.315 67.718-39.274 99.7-62.963l-16.622-67.21c4.305-.215 8.188.926 12.097 1.91l14.565 69.196-2.95 89.258-6.215-12.165c-3.52-14.197.673-31.14.817-46.47 0-2.786-1.122-23.947-1.122-23.947-27.562 24.984-58.943 41.936-91.566 58.853l10.784 10.236c6.85 5.638 13.7 11.275 20.55 16.91-.387.55-1 .81-1.405 1.254-5.51 4.86-2.36 1.962-6.94 6.11-29.857-23.718-51.504-41.868-52.57-42.932-3.335-3.338-43.51-32.598-43.51-32.598.45-2.252 1.24-5.425 2.572-10.025z"
/>
</g>
<g id="horse-body">
<path
id="rect985"
fill="#000000"
stroke-width="2"
d="M1105.184 739.773l-422.334 4.672.013.235.274-.61c-25.712 52.322-70.294 86.966-113.944 115.082l129.14 164.666v.053h.04l.024.033v-.03l406.787 8.593c-34.912-94.768-66.68-189.787 0-292.69z"
/>
<ellipse
id="path983"
cx="1105.662"
cy="885.598"
fill="#000000"
stroke="#d0d0d0"
stroke-width="2"
rx="51.634"
ry="145.792"
/>
<ellipse
id="path1065"
cx="1119.343"
cy="888.748"
fill="#808080"
stroke-width=".259"
rx="27.501"
ry="100.001"
/>
<ellipse
id="path1046"
cx="1120.217"
cy="887.748"
fill="#333333"
stroke-width=".289"
rx="15.946"
ry="91.879"
/>
<path
id="path11294"
fill="none"
fill-rule="evenodd"
stroke="#d0d0d0"
stroke-width="2"
d="M684.382 744.115l420.8-4.34"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path11294-3"
fill="none"
fill-rule="evenodd"
stroke="#d0d0d0"
stroke-width="2"
d="M698.333 1023.87l379.16 7.412 29.237.16"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<path
id="path11294-3-7"
fill="none"
fill-rule="evenodd"
stroke="#d0d0d0"
stroke-width="2"
d="M568.64 859.707l128.844 164.177"
stroke-linecap="round"
stroke-linejoin="round"
/>
<g id="horse-seat">
<path
id="rect8080"
fill="#aa4400"
fill-rule="evenodd"
stroke-width="2.85"
d="M613.857 911.182L787.17 823.27l5.333 10.443-176.386 89.002z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<ellipse
id="path1044"
cx="881.332"
cy="764.182"
fill="url(#radialGradient4282)"
stroke-width=".289"
rx="123.771"
ry="30.373"
/>
<path
id="rect8773-6"
fill="#aa4400"
fill-rule="evenodd"
stroke-width="2.85"
d="M767.742 779.428l14.43-2.215-4.87 247.023-10.88-.11z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="rect8773"
fill="#aa4400"
fill-rule="evenodd"
stroke-width="2.85"
d="M966.867 786.146c3.255-.77 7.132-1.776 10.15-2.683l-6.537 244.284-10.88-.112z"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<g id="upper-left-leg" fill-rule="evenodd">
<path
id="path92"
fill="#ff318c"
stroke="#000000"
stroke-width="6"
d="M953.22 683.738c8.73 17.078 19.175 33.728 20.546 52.648 4.13 52.205-29.36 70.275-67.54 99.387l-46.74 26.45c-10.18 14.743-15.466 16.51-12.69 22.01-59.854 3.843-70.83 9.074-111.51 7.06-5.86-24.698-2.397-41.92 5.81-64.65 20.595-40.97 35.092-75.958 66.51-104.9l32.615-2.31 19.26-3.083c33.186-6.717 66.506-16.103 93.74-32.615z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<g id="g150" transform="translate(226.237 252.808) scale(4.867)">
<path
id="path142"
fill="#e6e6e6"
stroke="#000000"
stroke-width=".5"
d="M137.59 93.81l1.26 3.205 3.544-.97-.776-3.53c-1.125.523-2.4.98-4.028 1.294z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path144"
fill="#ff31af"
d="M130.075 125.22l13.78-8.03s7.603-7.84 8.59-9.958c.353-.754.94-2.596 1.13-4.574.245-2.526-.26-5.314-.482-5.977l-1.3-3.34-2.343-4.57-2.256 1.646c4.46 5.563 4.216 8.563 3.56 15.214L147.13 111l-7 5.75c-3.62 2.08-8.045 4.52-9.86 6.152-1.958 1.76-2.168 4.274-1.423 4.087.195-.05.962-1.63 1.228-1.77z"
opacity=".996"
/>
<path
id="path146"
fill="#e6e6e6"
stroke="#000000"
stroke-width=".5"
d="M134.28 98.713c-.367 1.36.255 2.54.97 3.507 3.016-.8 8.21-2.26 13.29-3.652.21-1.328-.138-2.627-1.103-3.66-2.928.8-10.257 2.91-13.157 3.805z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path148"
fill="#e6e6e6"
stroke="#000000"
stroke-width=".8"
d="M135.55 102.59c3.12 6.143 5.39 8.325 8.302 14.6 1.454.95 4.487-.14 5.378-1.72l-.77-16.537z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
</g>
<g
id="g158"
fill="#ffffff"
transform="translate(226.237 252.808) scale(4.867)"
paint-order="stroke fill markers"
>
<path
id="path152"
d="M140.34 93.062a23.05 23.05 0 0 0 1.31-.53l.712 3.475-1.082.336z"
/>
<path
id="path154"
d="M145.83 95.373a21.25 21.25 0 0 1 1.68-.448c.98 1.217 1.082 2.22 1.044 3.62l-1.66.466z"
/>
<path
id="path156"
d="M147.04 99.328l1.455-.373.168 5.28.522 11.213-.447.597z"
/>
</g>
<path
id="path232"
fill="#eb1473"
stroke-width="4.867"
d="M828.02 724.278l-13.31.114-15.94 6.337c-23.6 24.35-43.985 64.545-55.51 92.222-5.44 13.062-6.57 23.003-9.442 27.79-2.26 10.54 16.53 17.21 16.927 14.71 3.347-39.96 19.052-84.687 77.275-141.18z"
opacity=".996"
/>
</g>
<g id="lower-left-leg" transform="translate(.737 1.168)">
<path
id="path3444"
fill="#ff318c"
d="M733.985 886.61l64.892-14.264 53.674-10.19c7.49 31.96 22.467 69.81 36.69 95.69l-89.51 67.64c-19.947-32.893-57.193-102.953-65.744-138.87z"
/>
<path
id="path106"
fill="#e6e6e6"
fill-rule="evenodd"
stroke="#000000"
stroke-width="7.3"
d="M777.923 987.384l86.35 143.816c-30.62 25.33-36.375 65.617-34.555 90.953 0 0 21.61 2.66 41.226-2.807 39.84-15.814 51.173-28.492 81.24-53.392l37.5-38.96-49.31-70.367-59.66-115.584c-26.663 25.235-63.64 44.187-102.793 46.34z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path112"
fill="#b3b3b3"
fill-rule="evenodd"
stroke-width="4.867"
d="M838.173 1222.25c3.304-35.15 5.232-64.843 33.642-93.48l-79.61-142.787c-4.964.86-9.672 1.26-14.637.77l84.747 142.784c-25.59 29.526-34.926 56.75-32.358 92.452z"
paint-order="stroke fill markers"
/>
<path
id="path114"
fill="#ffffff"
fill-rule="evenodd"
stroke="#000000"
stroke-width="1.46"
d="M826.785 1222.786c.514 4.938-.75 6.385 3.416 8.43 5.24 2.572 23.415 2.04 42.748-2.17 42.437-17.752 57.023-30.606 85.712-51.206l-2.437-11.002 14.784.106 28.328-31.597-8.09-10.924c-15.937 19.39-41.775 47.65-71.044 68.503-10.216 7.282-26.73 16.31-35.92 21.006-23.306 11.912-40.526 9.51-57.492 8.85z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path130"
fill="#eb1473"
fill-rule="evenodd"
stroke="#000000"
stroke-width="2.433"
d="M782.157 993.954l47.253 24.14-7.7 42.118z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path132"
fill="#f9f9f9"
fill-rule="evenodd"
stroke-width="4.867"
d="M868.005 953.56l12.7-11.97 59.66 115.045 48.28 69.6-5.778 6.933-53.8-76.02z"
paint-order="stroke fill markers"
/>
<path
id="path134"
fill="#ff318c"
fill-rule="evenodd"
stroke="#000000"
stroke-width="2.433"
d="M831.213 1016.682l1.284-40.19 34.413 23.497 1.03 43.27z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path136"
fill="#ff318c"
fill-rule="evenodd"
stroke="#000000"
stroke-width="2.433"
d="M868.98 999.114l-.185-42.334 31.017 23.24 2.165 3.893 4.063 41.56z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path140"
fill="none"
stroke="#000000"
stroke-width="4.867"
d="M827.904 1220.694c-1.273 12.46 7.157 13.57 18.34 13.074 13.58-.84 25.858-4.485 38.5-9.08 27.126-12.087 50.36-28.974 73.724-46.85l-2.544-10.896 14.71.185 28.146-31.96-11.075-14.347"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path23742"
fill="#ffff00"
fill-rule="evenodd"
stroke="#000000"
stroke-width="4"
d="M854.087 869.51l24.198 68.514"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path23742-5"
fill="#ffff00"
fill-rule="evenodd"
stroke="#000000"
stroke-width="2.8"
d="M734.884 892.985c13.738 31.138 27.088 62.497 42.276 90.913"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<g id="neck" fill-rule="evenodd">
<path
id="path98-9"
fill="#e6e6e6"
stroke="#000000"
stroke-width="7.3"
d="M727.288 466.966l15.344 16.333c12.534 4.28 42.698-23.567 71.206-33.677-16.946-5.836-43.414-42.32-40.382-58.237-2.087.538-10.98-3.523-12.986-2.69-19.75 8.183-74.948 22.038-65.92 36.332 5.68 9.15 13.22 16.814 18.654 24.337z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path210-2"
fill="#ffffff"
stroke-width="4.867"
d="M812.13 458.414l-3.916-1.36-5.222-1.81-9.1-5.563c-5.767-2.617-18.478-15.422-21.862-18.834l-13.823-11.194c-15.24-13.872 15.88-19.52 15.33-22.782-.954 15.76 25.994 48.944 38.593 61.543z"
/>
</g>
<g id="head">
<path
id="path236-9"
fill="#ff318c"
fill-rule="evenodd"
stroke="#000000"
stroke-width="7.3"
d="M784.025 269.043c20 24.826 25.86 69.94 17.526 99.328-4.74 21.41-15.966 22.567-27.55 24.07-23.91.816-30.672 3.52-35.47 6.93-15.14 10.767-2.804 24.447-42.823 26.86-9.235.06-11.154 2.346-18.373-1.09-27.767-13.2-49.46-50.69-56.58-71.89-26.99-80.35 94.127-162.732 163.272-84.21z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path216-1"
fill="#ff31af"
fill-rule="evenodd"
stroke-width="4.867"
d="M766.6 390.45c8.46-32.114 65.194-72.634-46.36-146.532l-9.772-5.838c13.63-2.957 41.316 4.556 48.32 9.364 5.86 3.355 25.046 16.034 35.705 36.483 10.057 26.77 16.08 42.07 8.898 71.48.247 12.23-12.86 31.693-12.86 31.693z"
opacity=".996"
/>
<path
id="path254-1"
fill="#ffffff"
fill-rule="evenodd"
stroke-width="4.266"
d="M712.825 329.398c-21.766 22.277-63.582 26.75-93.798 20.646-4.47-21.78-1.55-44.97 29.07-67.397 79.343-41.06 78.514 34.71 64.723 46.75z"
opacity=".996"
/>
<path
id="path256-9"
fill-rule="evenodd"
stroke="#000000"
stroke-width="3.413"
d="M614.628 338.146c.015-4.893.73-15.577 4.676-21.56 15.152-22.973 59.335-44.387 78.296-38.306 16.134 8.305 13.81 45.893 5.466 54.94-30.986 19.042-87.263 16.185-88.438 4.926z"
opacity=".996"
stroke-linejoin="round"
/>
<path
id="path3268"
fill="#808080"
stroke-width="1.155"
d="M630.31 374.398c15.375-.766 26.8-3.283 52.045-8.974 9.127 23.892-5.042 58.398-16.83 51.915-15.187-9.41-28.995-30.56-35.214-42.94z"
/>
<path
id="path3270"
fill="none"
stroke="#000000"
stroke-width="3.465"
d="M636.615 388.742c10.316 1.528 17.972 1.95 27.568-1.717-7.976 14.03-8.81 11.644-15.923 15.41"
/>
<path
id="path3442"
fill="#ffffff"
d="M635.285 278.978c8.655-13.636 25.475-27.084 43.14-33.755 28.3-10.685 43.88-7.95 54.075-6.58l-5.875 7.54c-20.104-.07-59.11 5.195-83.822 30.42z"
/>
</g>
<g id="flame">
<path
id="path1998"
fill="#ff6600"
stroke-width="10.749"
d="M1191.52 813.877a61.828 68.336 0 0 0-61.83 68.337 61.828 68.336 0 0 0 61.83 68.336 61.828 68.336 0 0 0 23.433-5.155l.04.504 55.646-33.787 53.76-36.713-57.083-31.3-58.676-28.2.017.71a61.828 68.336 0 0 0-17.14-2.73z"
/>
<path
id="path1998-2"
fill="#eccc43"
stroke-width="7.177"
d="M1191.23 836.057a41.28 45.625 0 0 0-41.28 45.624 41.28 45.625 0 0 0 41.28 45.627 41.28 45.625 0 0 0 15.644-3.446l.027.337 37.154-22.556 35.895-24.51-38.114-20.897-39.175-18.83.01.473a41.28 45.625 0 0 0-11.44-1.825z"
/>
</g>
<g id="torso" fill-rule="evenodd">
<path
id="path88-2"
fill="#ff318c"
stroke="#000000"
stroke-width="7.3"
d="M731.708 598.292c24.954 19.4 28.41 53.422 36.637 74.9l52.695 16.758 81.327-11.968 41.476-15.518c-35.23-32.51-48.884-126.422-53.62-141.907-1.96-14.593-45.84-80.953-71.432-77.527-43.075 14.884-72.953 29.88-92.586 25.282-.99-.23 2.58 23.558-9.73 50.205-12.423 33.86 5.794 71.54 15.24 79.78z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path198"
fill="#eb1473"
stroke-width="4.867"
d="M791.166 642.45l-28.064 14.61c4.673-29.002-5.817-42.98-22.827-60.268-8.035-8.207-17.7-33.925-17.62-44.97-2.628-23.785.158-50.102 3.34-74.75.027-.207.132-8.367.16-8.575.11.722 5.29 2.138 9.95 1.487 1.842-.257 5.456-.702 7.606-1.124 4.535-.89 10.485-2.787 15.15-4.105 3.46-1.106 7.287-2.243 10.407-3.464-.313 58.878 4.998 134.247 21.9 181.16z"
opacity=".996"
/>
<g
id="g224-3"
stroke="#000000"
stroke-width=".4"
transform="translate(229.312 249.478) scale(4.867)"
stroke-linejoin="round"
>
<path
id="path218-7"
fill="#e6e6e6"
d="M106.33 46.784l-3.266 10.247 3.743 11.14 3.65-12.48z"
opacity=".996"
/>
<path
id="path220-5"
fill="#e6e6e6"
d="M101.153 52.293l1.75 4.54-1.477 7.52-1.83-2.45c-.467-1.797-.19-3.38.114-5.16.657-1.68.93-2.722 1.443-4.45z"
opacity=".996"
/>
<path
id="path222-9"
fill="#ffffff"
d="M110.706 55.644l2.865-10.072c-.69 7.172.2 14.21 1.25 20.808z"
opacity=".996"
/>
</g>
<path
id="path226-2"
fill="#e6e6e6"
stroke-width="4.867"
d="M776.034 506.654l-2.585 13.84 5.016 16.272z"
opacity=".996"
/>
<path
id="path230-2"
fill="#ff31af"
stroke-width="4.867"
d="M921.644 664.582l15.487-9.25s-16.56-23.873-18.07-29.464c-1.502-5.592-11.4-32.907-11.4-32.907l-14.41-57.425-6.45-23.66-10.752-19.356-13.765-19.573 20.003 38.284 10.324 41.51 12.044 45.813 10.97 39.36z"
opacity=".996"
/>
<path
id="path96"
fill="#e6e6e6"
stroke="#000000"
stroke-width="3.893"
d="M939.75 655.73c10.132 10 14.36 13.125 16.4 23.102-24.53 24.363-93.937 32.218-155.53 43.003l20.83-39.623 4.49 18.26c27.47-15.75 74.21-13.303 113.81-44.737z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path228"
fill="#ffffff"
stroke-width="4.867"
d="M927.388 664.664l12.166-8.516 9.43 9.43 6.083 8.21.912 5.476-12.168 8.82-3.65 1.218z"
opacity=".996"
/>
</g>
<g id="left-arm">
<path
id="path100"
fill="#ff318c"
fill-rule="evenodd"
stroke="#000000"
stroke-width="7.3"
d="M682.353 699.762s34.967-23.902 40.88-27.5c24.964-24.14 52.103-20.326 83.227-34.746-22.014-42.997-17.193-87.52-22.153-134.696-.53-30.774.015-46.902 25.817-57.427 12.87-3.257 25.425 1.14 29.322 5.92 56.4 69.19 44.718 150.362 32.855 232.878-46.345 32.827-87.382 25.135-140.352 39.79l-30.834 5.857z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path118"
fill="#ffffff"
fill-rule="evenodd"
stroke="#000000"
stroke-width="4.867"
d="M695.863 687.547l36.2-23.878c8.74-7.533 30.95-12.9 52.33-20.337l40.08 62.44c-20.332 11.173-47.714 5.53-70.545 14.206l-37.824 6.767c-14.137-4.455-13.502-26.136-20.247-39.203z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path102"
fill="#ffffff"
fill-rule="evenodd"
stroke="#000000"
stroke-width="7.3"
d="M652.014 756.474c-1.44 8.34 5.19 7.558 12.07 10.016 0 0 10.095-4.98 11.557-7.704 5.488-10.213 6.25-12.993 17.02-21.055 7.3-5.465 17.66-9.68 17.66-9.68-4.538-10.153-11.83-29.704-18.458-38.515l-27.777 14.293c-14.27-4.033-28.898-4.865-41.263 4.693-4.244 10.546-2.38 19.45 7.617 19.45-6.446 8.047-5.228 15.31 8.11 16.804-3.026 5.133-3.04 4.74 1.647 10.674 4.866 2.686 7.596 2.504 11.816 1.028z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path120"
fill="#ff318c"
fill-rule="evenodd"
stroke="#000000"
stroke-width="2.85"
d="M737.765 659.803l33.71 6.573 12.92-23.042c-17.72 5.004-37.667 11.01-46.63 16.47z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path122"
fill="#e6e6e6"
fill-rule="evenodd"
stroke-width="4.867"
d="M701.712 698.3l43.583-13.066 30.914-5.35 22.472-14.803 25.79 40.694c-4.21 1.996-9.018 4.034-15.37 5.506-7.07 1.495-14.558 2.26-23.154 2.897-2.446.025-4.633.382-7.046.627-7.763.787-16.546 2.082-24.976 5.176l-5.523 1.072-30.164 4.346-9.275-5.308z"
opacity=".739"
paint-order="stroke fill markers"
/>
<path
id="path124"
fill="#ff318c"
fill-rule="evenodd"
stroke="#000000"
stroke-width="3.65"
d="M817.42 696.282l-31.78-1.998-16.162 21.573z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path126"
fill="#ff318c"
fill-rule="evenodd"
stroke="#000000"
stroke-width="3.65"
d="M772.633 669.463l-20.34 21.457 31.706.46 15.567-22.912z"
stroke-linecap="round"
stroke-linejoin="round"
paint-order="stroke fill markers"
/>
<path
id="path128"
fill="#e6e6e6"
fill-rule="evenodd"
stroke-width="4.867"
d="M693.104 702.554l5.906 20.034 7.704 6.933-23.11 14.384s-6.17 12.84-7.197 13.868c-1.028 1.03-12.33 8.733-12.33 8.733-3.464-2.506-8.727-2.317-9.758-8.475-10.88-3.266-15.23-6.076-14.747-15.685-10.784-3.728-8.52-8.45-7.596-15.267-11.54-4.6-10.523-12.858-4.794-16.002 20.652-5.805 44.64-5.012 65.916-8.523z"
opacity=".739"
paint-order="stroke fill markers"
/>
<path
id="path214"
fill="none"
stroke="#000000"
stroke-width="3.067"
d="M803.76 636.544c8.084-2.338 14.284-3.11 18.927-2.58"
stroke-linejoin="round"
/>
<path
id="path216"
fill="#ff31af"
fill-rule="evenodd"
stroke-width="4.867"
d="M821.297 695.67c8.556-5.412 43.43-22.885 43.43-22.885-12.005-75.624 28.916-137.86-43.064-228.66l12.448 3.87c6.885 2.505 24.083 30.42 28.994 37.088 3.47 4.71 10.5 28.805 15.197 53.364 7.8 51.36 1.85 93.785-5.34 145.328-15.53 10.877-25.42 15.342-45.893 21.843z"
opacity=".996"
/>
</g>
</svg>
</div>
<p>Rounding em up!</p>@font-face {
font-family: "Grandstander";
src: url("./Grandstander-SemiBold.ttf");
font-weight: 600;
font-style: normal;
}
:root {
--color1: #aa00ff;
--color2: #440066;
}
html {
height: 100dvh;
width: 100%;
display: grid;
place-items: center;
}
body {
margin: 0;
padding: 4px;
display: grid;
place-items: center;
grid-template-rows: repeat(2, min-content);
background-color: hsl(280, 100%, 90%);
}
.peephole {
width: 100%;
max-height: 600px;
aspect-ratio: 1/1;
border-radius: 50%;
background-image: url(img/bg.webp);
background-size: 200%;
background-position: 200% 50%;
animation: bg-scroll 3s infinite;
animation-timing-function: linear;
overflow: hidden;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(0, 0, 0, 0.1),
0 0 0 6px rgba(0, 0, 0, 0.05);
}
@keyframes bg-scroll {
to {
background-position: 0% 50%;
}
}
svg {
display: block;
width: 100%;
filter: drop-shadow(0 0 6px yellow)
drop-shadow(0 8px 12px hsl(270, 100%, 71%))
drop-shadow(-8px 0 12px hsl(330, 100%, 71%));
}
#head {
animation: head 0.25s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: center left;
}
@keyframes head {
to {
transform: translate(-3px, -1px);
}
}
#neck {
animation: head 0.25s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: center left;
}
@keyframes neck {
to {
transform: translate(0.001rem, 0);
}
}
#left-arm,
#right-arm {
animation: left-arm 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: center left;
}
@keyframes left-arm {
to {
transform: translate(-4px, 1px) rotate(0.15deg);
}
}
#torso {
animation: torso 0.25s ease-in-out infinite alternate-reverse;
transform-origin: center;
}
@keyframes torso {
to {
transform: translate(-3px, -1px) rotate(1deg);
}
}
#flame {
animation: flaming;
animation-duration: 0.1s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: center center;
}
@keyframes flaming {
to {
transform: scaleX(1.02);
}
}
@keyframes hop {
to {
transform: rotate(0.5deg) rotateX(2deg);
}
}
#upper-left-leg {
animation: hop;
animation-duration: 0.25s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: top center;
}
#lower-left-leg,
#lower-right-leg {
animation: lower-leg;
animation-duration: 0.25s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: top center;
}
@keyframes lower-leg {
to {
transform: rotate(0.5deg) rotateX(-5deg);
}
}
#horse-body,
#horse-head {
transform: rotate(0deg);
animation: bob 0.25s;
animation-iteration-count: infinite;
}
@keyframes bob {
to {
transform: rotate(0.25deg) rotateX(5deg);
}
}
p {
--color1: hsl(290, 100%, 34%);
--color2: hsl(295, 100%, 34%);
-webkit-background-clip: text;
background-image: repeating-linear-gradient(
0deg,
var(--color1),
var(--color1) 20%,
var(--color2) 20%,
var(--color2) 50%
);
background-position: center;
font-family: "Grandstander", serif;
font-size: 2rem;
font-weight: 600;
color: transparent;
filter: drop-shadow(0 -2px 1px hsl(280deg 100% 0% / 0.75));
text-align: center;
margin: 1rem;
padding: 2rem;
}Description
This is a silly CSS animation of a female space ranger on a rocket-propelled horse. I made this as a loading animation for a VS Code extension called Snippets Ranger.
The objective was to focus on the smaller movements of body parts to create more realistic animation. The trotting action is composed of approxmiately a dozen discrete animations.