html5+css做出的一些效果

下面是一些用 css 做出的效果，挺有意思，记录一下。

1. 发散特效

<div class="loader rainbow">
  <div class="circle" style="--i: 1"></div>
  <div class="circle" style="--i: 2"></div>
  <div class="circle" style="--i: 3"></div>
  <div class="circle" style="--i: 4"></div>
  <div class="circle" style="--i: 5"></div>
  <div class="circle" style="--i: 6"></div>
  <div class="circle" style="--i: 7"></div>
  <div class="circle" style="--i: 8"></div>
  <div class="circle" style="--i: 9"></div>
  <div class="circle" style="--i: 10"></div>
  <div class="circle" style="--i: 11"></div>
  <div class="circle" style="--i: 12"></div>
  <div class="circle" style="--i: 13"></div>
  <div class="circle" style="--i: 14"></div>
  <div class="circle" style="--i: 15"></div>
  <div class="circle" style="--i: 16"></div>
  <div class="circle" style="--i: 17"></div>
  <div class="circle" style="--i: 18"></div>
  <div class="circle" style="--i: 19"></div>
  <div class="circle" style="--i: 20"></div>
  <div class="circle" style="--i: 21"></div>
  <div class="circle" style="--i: 22"></div>
  <div class="circle" style="--i: 23"></div>
  <div class="circle" style="--i: 24"></div>
  <div class="circle" style="--i: 25"></div>
  <div class="circle" style="--i: 26"></div>
  <div class="circle" style="--i: 27"></div>
  <div class="circle" style="--i: 28"></div>
  <div class="circle" style="--i: 29"></div>
  <div class="circle" style="--i: 30"></div>
  <div class="circle" style="--i: 31"></div>
  <div class="circle" style="--i: 32"></div>
  <div class="circle" style="--i: 33"></div>
  <div class="circle" style="--i: 34"></div>
  <div class="circle" style="--i: 35"></div>
  <div class="circle" style="--i: 36"></div>
  <div class="circle" style="--i: 37"></div>
  <div class="circle" style="--i: 38"></div>
  <div class="circle" style="--i: 39"></div>
  <div class="circle" style="--i: 40"></div>
  <div class="circle" style="--i: 41"></div>
  <div class="circle" style="--i: 42"></div>
  <div class="circle" style="--i: 43"></div>
  <div class="circle" style="--i: 44"></div>
  <div class="circle" style="--i: 45"></div>
  <div class="circle" style="--i: 46"></div>
  <div class="circle" style="--i: 47"></div>
  <div class="circle" style="--i: 48"></div>
  <div class="circle" style="--i: 49"></div>
  <div class="circle" style="--i: 50"></div>
  <div class="circle" style="--i: 51"></div>
  <div class="circle" style="--i: 52"></div>
  <div class="circle" style="--i: 53"></div>
  <div class="circle" style="--i: 54"></div>
  <div class="circle" style="--i: 55"></div>
  <div class="circle" style="--i: 56"></div>
  <div class="circle" style="--i: 57"></div>
  <div class="circle" style="--i: 58"></div>
  <div class="circle" style="--i: 59"></div>
  <div class="circle" style="--i: 60"></div>
  <div class="circle" style="--i: 61"></div>
  <div class="circle" style="--i: 62"></div>
  <div class="circle" style="--i: 63"></div>
  <div class="circle" style="--i: 64"></div>
  <div class="circle" style="--i: 65"></div>
  <div class="circle" style="--i: 66"></div>
  <div class="circle" style="--i: 67"></div>
  <div class="circle" style="--i: 68"></div>
  <div class="circle" style="--i: 69"></div>
  <div class="circle" style="--i: 70"></div>
  <div class="circle" style="--i: 71"></div>
  <div class="circle" style="--i: 72"></div>
  <div class="circle" style="--i: 73"></div>
  <div class="circle" style="--i: 74"></div>
  <div class="circle" style="--i: 75"></div>
  <div class="circle" style="--i: 76"></div>
  <div class="circle" style="--i: 77"></div>
  <div class="circle" style="--i: 78"></div>
  <div class="circle" style="--i: 79"></div>
  <div class="circle" style="--i: 80"></div>
  <div class="circle" style="--i: 81"></div>
  <div class="circle" style="--i: 82"></div>
  <div class="circle" style="--i: 83"></div>
  <div class="circle" style="--i: 84"></div>
  <div class="circle" style="--i: 85"></div>
  <div class="circle" style="--i: 86"></div>
  <div class="circle" style="--i: 87"></div>
  <div class="circle" style="--i: 88"></div>
  <div class="circle" style="--i: 89"></div>
  <div class="circle" style="--i: 90"></div>
  <div class="circle" style="--i: 91"></div>
  <div class="circle" style="--i: 92"></div>
  <div class="circle" style="--i: 93"></div>
  <div class="circle" style="--i: 94"></div>
  <div class="circle" style="--i: 95"></div>
  <div class="circle" style="--i: 96"></div>
  <div class="circle" style="--i: 97"></div>
  <div class="circle" style="--i: 98"></div>
  <div class="circle" style="--i: 99"></div>
  <div class="circle" style="--i: 100"></div>
</div>

body {
  background: #333333;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;

  --from: 80px;
  --to: 200px;
  --size: 32px;
  --time: 7s;
  --count: 51; /* up to 100 */
  --turns: 6;
}

.circle {
  position: absolute;

  --delay: calc(var(--time) / var(--count) * -1 * var(--i));
  rotate: calc(var(--turns) * 1turn / var(--count) * var(--i));

  animation: circle var(--time) var(--delay) ease-in-out infinite;
}
.circle:nth-child(n + var(--count)) {
  display: none;
}
.circle::before {
  content: '';
  display: block;
  width: var(--size);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: white;
  transform-origin: center center;

  animation: circleSize var(--time) var(--delay) ease-in-out infinite;
}

/* rainbow */
.rainbow .circle::before {
  background-color: hsl(calc(1turn / (var(--count) / var(--turns)) * var(--i)) 100% 70%);
}

/* animations */
@keyframes circle {
  from {
    transform: translate(0, var(--from));
  }
  to {
    transform: translate(0, var(--to));
  }
}
@keyframes circleSize {
  0%,
  100% {
    transform: scale(0);
  }
  25%,
  50% {
    transform: scale(1);
  }
}

2. 404

<a target="_blank" href="http://www.thedresscounter.com">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-12 mt-5 mb-5">
        <svg width="100%" height="auto" viewBox="0 0 636 324" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="OBJECTS">
            <g id="Group">
              <path
                id="Vector"
                d="M101.3 255.2C101.3 255.2 111.1 272.6 181.8 280.5C252.5 288.4 288.2 314.9 333.1 322.8C378 330.7 433.6 278.5 481.8 286.5C530 294.4 588.2 264.2 592.8 255.2H101.3Z"
                fill="#2F1829"
              />
              <path
                id="Vector_2"
                d="M611.9 251.7H601.4L140.8 251.8C140.8 251.8 136.1 248.1 128.9 241.8C125.8 239.1 122.2 235.9 118.3 232.3C116.9 231 115.4 229.6 113.9 228.2C100.2 215.3 83.6 198.2 70.1 180.1C55.9 161 45.1 140.6 44.8 122.6C44.8 122.2 44.8 121.8 44.8 121.4C45 104 48.4 85.1 56.9 67.7C61.9 57.5 68.5 47.8 77.3 39C100.1 16.2 137.1 0.300011 194.5 0.800011C261.4 1.30001 330.8 26.3 393.5 60.8C406.6 68 419.4 75.7 431.9 83.6C441.1 89.5 450.1 95.5 458.8 101.6C483.1 118.6 505.6 136.4 525.5 153.8C570.6 193.1 602.3 230.4 611.9 251.7Z"
                fill="url(#paint0_linear)"
              />
              <path
                id="Vector_3"
                opacity="0.45"
                d="M611.9 251.7H601.4L140.8 251.8C140.8 251.8 136.1 248.1 128.9 241.8C125.8 239.1 122.2 235.9 118.3 232.3C116.9 231 115.4 229.6 113.9 228.2C100.2 215.3 83.6 198.2 70.1 180.1C55.9 161 45.1 140.6 44.8 122.6C50.5 119.6 63.9 113.5 75 116.3C89.5 119.9 92.6 137.2 92.6 137.2C92.6 137.2 103 128.8 113.9 132.8C124.8 136.8 126.5 148.4 126.5 148.4C126.5 148.4 139.4 141.8 150.9 144.6C162.5 147.4 171.8 158.6 159.4 165.9C147.1 173.1 133.3 167.5 132.9 167.4C133.1 167.6 137.9 174.2 129.1 182.2C120.1 190.4 154.6 197.5 154.6 197.5C154.6 197.5 155.9 175.1 179 177.6C202.1 180.1 220.8 192.6 220.8 192.6C220.8 192.6 222 158.3 240.5 152C259 145.7 268.5 165.9 268.5 165.9C268.5 165.9 309.5 139.4 323.4 164.1C337.3 188.8 337.9 193.5 337.9 193.5C337.9 193.5 349.8 128.5 387 131.5C424.2 134.5 431.1 160.3 430.5 162.9C429.9 165.5 441.2 146.2 452.4 156.7C463.6 167.2 470.1 181.8 470.1 181.8L529 174.9C529 174.9 523 163.3 525.4 153.8C570.6 193.1 602.3 230.4 611.9 251.7Z"
                fill="url(#paint1_linear)"
              />
              <path
                id="Vector_4"
                d="M431.9 83.6H257.8C279.6 83.6 283.9 75.7 296.8 71.4C297.4 71.2 298 71 298.6 70.9C310.7 67.8 320.6 74.7 328.3 74.4C336.4 74.1 345.3 65.5 354.6 62.5C357.7 61.5 361 61.8 364.3 62.6C370.8 64.1 377.6 67.4 384.5 66.1C390.5 65 391 62.5 393.4 60.8C406.6 68 419.5 75.6 431.9 83.6Z"
                fill="url(#paint2_linear)"
              />
              <path
                id="Vector_5"
                d="M206.5 67.7H56.9C61.8 57.7 68.3 48.1 76.9 39.4C77 39.3 77.2 39.1 77.3 39C80.8 38.3 84.6 37.8 88.7 37.6C112.4 36.6 117.4 54.5 117.4 54.5C117.4 54.5 123.6 46.2 134.8 50.2C146 54.2 142.1 59.1 151 61.8C152.2 62.1 153.4 62.2 154.7 62.1C163.2 61.4 173.9 52.1 183.4 55.5C194.4 59.4 187.3 67.7 206.5 67.7Z"
                fill="url(#paint3_linear)"
              />
              <path
                id="Vector_6"
                d="M631.8 258.5H75.5C73.6 258.5 72.1 257 72.1 255.1C72.1 253.2 73.6 251.7 75.5 251.7H631.8C633.7 251.7 635.2 253.2 635.2 255.1C635.2 257 633.7 258.5 631.8 258.5Z"
                fill="#2F1829"
              />
              <path
                id="Vector_7"
                opacity="0.25"
                d="M364.4 62.5C354.5 65 343.3 75.8 336 77.4C326.9 79.4 316.3 74.8 306 72.2C302.9 71.4 300.5 71 298.6 70.8C310.7 67.7 320.6 74.6 328.3 74.3C336.4 74 345.3 65.4 354.6 62.4C357.8 61.4 361 61.7 364.4 62.5Z"
                fill="white"
              />
              <path
                id="Vector_8"
                opacity="0.25"
                d="M154.7 62.1C145.8 66.8 141.6 56.2 133.9 52.7C125 48.7 118.7 61.2 116.1 59C113.5 56.9 112.3 47.6 102.2 42.8C96.5 40.1 85.4 39.5 77 39.5C77.1 39.4 77.3 39.2 77.4 39.1C80.9 38.4 84.7 37.9 88.8 37.7C112.5 36.7 117.5 54.6 117.5 54.6C117.5 54.6 123.7 46.3 134.9 50.3C146.1 54.3 142.2 59.2 151.1 61.9C152.2 62.1 153.5 62.2 154.7 62.1Z"
                fill="white"
              />
              <path
                id="Vector_9"
                d="M394.9 40.3C394.9 40.3 457.4 96.1 482.1 88.5C507 80.9 351.2 7.20001 394.9 40.3Z"
                fill="url(#paint4_linear)"
              />
              <path
                id="Vector_10"
                d="M35 97C35 97 13.7 134.4 50.9 173.8C59.5 182.9 60.5 199.9 43.3 200.8C26.1 201.7 -0.599994 159.8 0.300006 126.1C1.30001 92.4 40.8 77.1 35 97Z"
                fill="url(#paint5_linear)"
              />
              <path
                id="Vector_11"
                d="M461 295.7C461 295.7 425 303.6 415.8 315.9C411.3 321.9 429.2 321 444.5 314.4C460.5 307.5 473.6 294.9 461 295.7Z"
                fill="#2F1829"
              />
              <path
                id="Vector_12"
                d="M200.2 293.4C200.2 293.4 214.2 293.1 226.5 297.9C238.8 302.7 241.5 317.4 229.2 319.2C217 321 189.1 304.7 190.7 298.1C191.9 293.1 200.2 293.4 200.2 293.4Z"
                fill="#2F1829"
              />
            </g>
            <path
              id="Vector_13"
              d="M136.3 213.7L128.4 241.1C125.3 238.4 121.7 235.2 117.8 231.6L116.1 228.4C116.1 228.4 119.1 193.2 109.2 179.1C118.7 185.7 123.3 212.4 123.3 212.4L121.8 214.4H123.3C123.3 214.4 125.7 218.9 126.6 225.5C132.7 193.9 126.8 178.6 126.6 178.1C126.8 178.4 131.6 184.2 134.4 193.8C137.3 203.6 136.2 209.7 136.2 209.7L133.8 213.6H136.3V213.7Z"
              fill="black"
            />
            <g id="Group_2">
              <g id="Group_3">
                <path
                  id="Vector_14"
                  d="M376.1 240.6C376.1 240.6 378.7 238.3 380.6 235.8C380.9 235.4 381.3 234.9 381.5 234.5L382.7 235.9L382.3 233.7C382.3 233.7 390.4 230.9 393.3 223.1C391.5 231.6 388.1 238 384.1 240.9C382.3 242.2 380.5 242.8 378.6 242.7C372.3 242.5 376.1 240.6 376.1 240.6Z"
                  fill="#F3475C"
                />
                <g id="Group_4" opacity="0.25">
                  <path
                    id="Vector_15"
                    opacity="0.25"
                    d="M393.3 223.1C392.6 225.3 391.8 227.5 390.8 229.6C389.8 231.7 388.7 233.7 387.4 235.6C386.1 237.5 384.5 239.3 382.6 240.6C380.7 242 378.3 242.7 376 242.6C375.9 242.6 375.8 242.5 375.8 242.4C375.8 242.3 375.9 242.2 376 242.2C378.3 242.4 380.5 241.7 382.4 240.4C384.3 239.1 385.9 237.4 387.2 235.5C388.6 233.6 389.7 231.6 390.7 229.5C391.7 227.5 392.5 225.3 393.3 223.1Z"
                    fill="white"
                  />
                </g>
                <path
                  id="Vector_16"
                  opacity="0.25"
                  d="M376.1 240.6C376.1 240.6 378.7 238.3 380.6 235.8C381.4 238.2 383.1 240 384.1 240.9C382.3 242.2 380.5 242.8 378.6 242.7C372.3 242.5 376.1 240.6 376.1 240.6Z"
                  fill="black"
                />
              </g>
              <path
                id="Vector_17"
                d="M313.5 225.2C313.5 225.2 294.9 207.7 297.9 184.4C299.8 195.2 307.7 208.1 307.7 208.1L306.7 211L310.2 210.3C310.2 210.3 314.6 183.7 304.7 170.8C318.1 184.6 317.9 205.1 317.9 205.1L315.4 208.9L317.9 210C317.9 210 315 220 323.7 216.1C332.4 212.3 337.9 179.2 330 170.8C339.4 178.9 337.9 206.8 337.9 207.7C337.9 208.6 333.8 212.4 333.8 212.4L336.9 214.7C336.9 214.7 335 233.6 313.5 225.2Z"
                fill="black"
              />
              <path
                id="Vector_18"
                d="M398.8 250C398.8 250 392.3 243.9 393.4 235.8C394.1 239.6 396.8 244 396.8 244L396.5 245L397.7 244.8C397.7 244.8 399.2 235.5 395.8 231.1C400.4 235.9 400.4 243 400.4 243L399.5 244.3L400.4 244.7C400.4 244.7 399.4 248.2 402.4 246.8C405.4 245.5 407.3 234 404.6 231.1C407.9 233.9 407.3 243.6 407.3 243.9C407.3 244.2 405.9 245.5 405.9 245.5L407 246.3C406.9 246.4 406.3 253 398.8 250Z"
                fill="black"
              />
              <g id="Group_5">
                <path
                  id="Vector_19"
                  d="M374 241.1L368.7 241.5C372.5 238.1 371.9 234.8 371.4 233.3C371.2 232.8 371 232.4 371 232.4L373.5 232L372.1 230.1C372.1 230.1 376.6 224.9 378.3 211.1C383.6 220.4 381.5 228.8 378.7 234.3C376.6 238.6 374 241.1 374 241.1Z"
                  fill="#FFCA51"
                />
                <g id="Group_6" opacity="0.25">
                  <path
                    id="Vector_20"
                    opacity="0.25"
                    d="M378.3 211.1C378.9 213.7 379.2 216.3 379.3 218.9C379.4 221.5 379.4 224.2 379 226.8C378.6 229.4 378 232 377 234.4C376 236.8 374.5 239.1 372.7 241.1C372.6 241.2 372.5 241.2 372.4 241.1C372.3 241 372.3 240.9 372.4 240.8C374.2 238.9 375.6 236.7 376.7 234.3C377.7 231.9 378.4 229.3 378.8 226.8C379.2 224.2 379.3 221.6 379.2 219C379.1 216.3 378.9 213.7 378.3 211.1Z"
                    fill="white"
                  />
                </g>
                <path
                  id="Vector_21"
                  opacity="0.25"
                  d="M374 241.1L368.7 241.5C372.5 238.1 371.9 234.8 371.4 233.3C374.2 235 377 234.8 378.7 234.3C376.6 238.6 374 241.1 374 241.1Z"
                  fill="black"
                />
              </g>
              <path
                id="Vector_22"
                d="M408.3 251.1H323L336.7 240C336.7 240 354.9 230.6 362.5 232.6C370.1 234.5 368.9 240.9 368.9 240.9C368.9 240.9 369.4 240.4 370.1 239.8C371.8 238.5 375 236.7 378.2 238.6C382.8 241.4 382.1 245 382.1 245.2C382.2 245.1 385 242.4 387.3 243.2C389.6 244.1 390.5 246.6 390.5 246.6C390.5 246.6 393.5 242.5 396 244C398.5 245.5 400 248.6 400 248.6C400 248.6 404 244.6 408.3 251.1Z"
                fill="#982245"
              />
              <path
                id="Vector_23"
                opacity="0.25"
                d="M391.9 251.1H323.1L336.8 240C336.8 240 355 230.6 362.6 232.6C370.2 234.5 369 240.9 369 240.9C369 240.9 369.5 240.4 370.2 239.8C370.4 241.2 370.4 242.6 370.2 244C370.2 244 374.1 242.5 376.6 244.6C379.1 246.7 378.4 248.6 378.4 248.6C378.4 248.6 381.8 246.6 385.7 248.6C386.8 249.3 389.3 250.2 391.9 251.1Z"
                fill="black"
              />
            </g>
            <g id="Group_7">
              <path
                id="Vector_24"
                d="M237.3 191.1V97.5H201.8V97.8L159 166.6L140.3 196.7L142.4 218.4H201.8V251H237.3V218.4H253V191H237.3V191.1ZM201.8 191.1H174.2L199.6 147.4L201.8 143.8V191.1Z"
                fill="url(#paint6_linear)"
              />

              <path
                id="Vector_26"
                d="M487.5 191.1V97.5H452V97.8L390.5 196.7L392.6 218.4H452V251H487.5V218.4H503.1V191H487.5V191.1ZM452 191.1H424.4L449.8 147.4L452 143.8V191.1V191.1Z"
                fill="url(#paint8_linear)"
              />
              <path
                id="Vector_27"
                opacity="0.25"
                d="M230.7 97.5C225.9 103.6 209.6 101.4 206 101.8C201.8 102.2 172.9 153.1 169 159.6C166.4 163.8 161.9 165.8 159.1 166.7L201.9 97.9V97.6H230.7V97.5Z"
                fill="white"
              />
              <path
                id="Vector_28"
                opacity="0.25"
                d="M487.5 97.5V168.3C478.4 160.7 483.4 104.9 482 103.1C480.5 101.1 461.5 102.4 458 101.3C455.7 100.6 453.8 98.6 452.8 97.4H487.5V97.5Z"
                fill="white"
              />
              <path
                id="Vector_29"
                opacity="0.25"
                d="M329.1 232.4C300.5 233.7 303.8 192.4 303.8 192.4C304 202.9 305.4 210.6 308.1 215.6C311 220.9 315.6 223.6 321.8 223.6C327.8 223.6 332.3 221 335.2 215.8C338.1 210.6 339.6 202.5 339.6 191.5V153.5C339.6 142.5 338.2 134.2 335.3 128.8C332.4 123.3 327.8 120.6 321.6 120.6C321.6 120.6 339.3 118.4 346.6 144.7C353.8 171 357.8 231.1 329.1 232.4Z"
                fill="black"
              />
            </g>
            <g id="zero">
              <path
                id="Vector_25"
                d="M361.2 110.3C351.9 99 338.7 93.3 321.6 93.3C304.6 93.3 291.4 98.9 282.1 110.2C272.8 121.5 268.1 137.4 268.1 158.2V186.3C268.1 206.9 272.8 222.9 282.1 234.2C291.5 245.5 304.7 251.2 321.8 251.2C338.7 251.2 351.9 245.6 361.2 234.3C370.5 223 375.2 207.1 375.2 186.3V158.3C375.2 137.6 370.5 121.6 361.2 110.3ZM303.8 151.3C304 141 305.5 133.4 308.3 128.3C311.1 123.2 315.5 120.7 321.6 120.7C327.9 120.7 332.4 123.4 335.3 128.9C338.2 134.4 339.6 142.6 339.6 153.6V191.6C339.5 202.6 338.1 210.7 335.2 215.9C332.3 221.1 327.8 223.7 321.8 223.7C315.5 223.7 311 221 308.1 215.7C305.4 210.7 303.9 202.9 303.8 192.5C303.8 191.9 303.8 191.2 303.8 190.6V151.3V151.3Z"
                fill="url(#paint7_linear)"
              />
              <path
                id="Vector_30"
                d="M291.5 110.1C291.5 110.1 279.6 101.5 278.3 88.1C286.9 90.5 291.5 101 291.5 101C291.5 101 289.3 91.4 291.5 84.9C297.8 94.1 296.1 101.6 291.5 110.1Z"
                fill="url(#paint9_linear)"
              />
            </g>
            <g id="Group_8">
              <g id="Group_9">
                <path
                  id="Vector_31"
                  d="M569.9 241.4V244.7C569.3 244.6 567.9 244.7 566.7 244.9C565.9 245 565.2 245 564.8 245.1L564.5 242.3L565.8 242.1L569.9 241.4Z"
                  fill="url(#paint10_linear)"
                />
                <g id="handboy">
                  <path
                    id="Vector_32"
                    d="M529.1 188C529.1 188 529.2 188.3 528.8 188.7C528.5 189 528 189.3 527.1 189.7C521.7 191.8 510.6 186.7 504.5 183.3C498.5 179.9 481.3 182.7 469.7 181.1C458.1 179.5 453.2 173.3 442.8 170.7C432.4 168.1 393.6 179.3 391.4 170.6C389.2 161.9 432.8 77.2 436.6 83.1C440.3 89 453.2 89.4 462.3 94.1C471.4 98.8 479.1 122.1 489.2 124.4C490.6 124.7 491.9 125.2 493.2 125.9C501.2 130.2 507 140.9 507.2 149.7C507.4 159.9 521.4 168.1 526.5 173.6C531.5 179.2 529.1 188 529.1 188Z"
                    fill="url(#paint11_linear)"
                  />
                  <path
                    id="Vector_33"
                    opacity="0.25"
                    d="M529.1 188C529.1 188 529.2 188.3 528.8 188.7C530.6 177.5 520.3 172.2 510.8 164.4C501.1 156.3 505.2 150.2 503.2 141.9C502 137 497 130.5 493.2 126C501.2 130.3 507 141 507.2 149.8C507.4 160 521.4 168.2 526.5 173.7C531.5 179.2 529.1 188 529.1 188Z"
                    fill="white"
                  />
                  <path
                    id="Vector_34"
                    d="M528.9 186.5L526.3 188.9C525.9 189.2 526.1 189.8 526.5 190L528.7 190.7L533.7 196.2C533.9 196.4 534.3 196.5 534.5 196.2L535.3 195.4C535.5 195.2 535.6 194.8 535.3 194.6L530.3 189.1L529.8 186.9C529.8 186.3 529.2 186.1 528.9 186.5Z"
                    fill="#2F1829"
                  />
                  <path
                    id="Vector_35"
                    d="M548.7 190C548 190.9 547.2 192 546.3 193.1C546 193.5 545.6 193.9 545.3 194.3C543.9 196 542.7 197.4 542.3 197.5C541.3 197.7 535.7 194.5 534.9 194.5C534.1 194.5 532.2 195.9 531.7 195.7C531.2 195.6 528.5 193.1 528.6 192.4C528.7 191.8 531.1 189.6 532.3 189.3C532.6 189.2 533.4 189.3 534.3 189.5H534.4C536.7 190 540.1 191.1 540.6 190.8C540.9 190.7 541.4 189.8 542 188.7C542.2 188.3 542.4 187.9 542.6 187.5C542.9 187 543.1 186.5 543.4 186C543.6 185.5 543.8 185.1 544 184.8C544.5 185.6 545.3 186.6 546.2 187.5C547.2 188.8 548.2 189.8 548.7 190Z"
                    fill="url(#paint12_linear)"
                  />
                </g>
                <path
                  id="Vector_36"
                  d="M571.4 196.6C571.4 198.4 571.4 200.2 571.3 201.6C570.9 207.3 570.4 211.9 568.5 212C566.6 212.1 566.2 196.7 566.3 195.8C566.3 195.6 566.3 195.2 566.4 194.7C566.5 193 566.5 190 566.5 188.7C566.5 188.4 566.5 188.2 566.5 188.1L566.9 187.9L571.1 185.2C571.1 185.2 571.3 188.8 571.5 193C571.5 193.6 571.5 194.1 571.5 194.7C571.4 195.3 571.4 195.9 571.4 196.6Z"
                  fill="url(#paint13_linear)"
                />
                <path
                  id="Vector_37"
                  opacity="0.25"
                  d="M571.4 196.6C570.4 197.4 568.8 198.5 567.2 198.6C564.6 198.7 568.4 193.2 569.3 193.1C569.6 193.1 570.4 193 571.3 193C571.3 193.6 571.3 194.1 571.3 194.7C571.4 195.3 571.4 195.9 571.4 196.6Z"
                  fill="black"
                />
                <path
                  id="Vector_38"
                  d="M571.4 194.7C570.3 195.1 568.9 195.3 567 194.9C566.7 194.8 566.5 194.8 566.3 194.6C564.7 193.7 565.3 191 566.4 188.6C566.5 188.3 566.7 188 566.8 187.8L571 185.1C571 185.1 571.3 189.8 571.4 194.7Z"
                  fill="#2F1829"
                />
                <path
                  id="Vector_39"
                  d="M562.5 164.2C562.4 164.8 562.2 165.5 561.7 166.2C561.2 167.1 560.4 168 559.7 168.6C559.1 169 558.6 169.3 558.2 169.3C556.9 169.1 555.2 166.9 555.1 166.5C555.1 166.1 556.5 165.9 556.4 164.7C556.2 163.5 555.4 163.3 554.9 163.5C554.3 163.7 553.6 165 553.6 166.2C553.2 166.1 552.5 164.7 551.1 163.8C550.7 163.6 550.3 163.4 549.8 163.3C549.2 163.2 548.5 163.2 547.7 163.5C547.3 159.1 550 157.2 552 158C552 158 551.3 156.5 550.2 156.2C552.7 156.6 553.3 158.7 553.3 158.7C553.3 158.7 554 155.8 557.1 155.4C560.2 155 560.8 159.1 560.8 159.1C560.8 159.1 561.5 157.1 561.2 155.9C561.8 157.5 561.1 160.2 561.1 160.2C561.1 160.2 562.6 160.6 563 162.6C561.7 161.6 561.7 161.7 561.7 161.7C561.7 161.7 562.6 162.3 562.5 164.2Z"
                  fill="#2F172B"
                />
                <path
                  id="Vector_40"
                  d="M559.7 168.5C559.5 169.2 559.2 169.8 559.1 170.1C558.8 170.7 555.6 173.4 553.3 170.3C551.4 167.7 551.1 164.7 551.1 163.8C552.5 164.6 553.2 166.1 553.6 166.2C553.6 165 554.3 163.8 554.9 163.5C555.5 163.3 556.2 163.5 556.4 164.7C556.6 165.9 555.1 166.1 555.1 166.5C555.1 166.9 556.8 169.1 558.2 169.3C558.6 169.2 559.1 169 559.7 168.5Z"
                  fill="url(#paint14_linear)"
                />
                <path
                  id="Vector_41"
                  d="M561.3 155.6C561.2 155.4 561.2 155.3 561.1 155.2C561.2 155.3 561.2 155.5 561.3 155.6Z"
                  fill="#2F172B"
                />
                <path
                  id="Vector_42"
                  d="M572.4 184.6C572.1 185.2 571.7 185.7 571.4 186.2C571.3 186.3 571.2 186.5 571.1 186.6C570.1 187.8 569.2 188.5 569.2 188.5C569.2 188.5 569.2 188.5 569.2 188.6C569.2 188.7 569.2 188.8 569.3 189C569.4 189.4 569.5 190.1 569.6 191C569.6 191.1 569.6 191.3 569.7 191.4C569.8 191.8 569.8 192.2 569.8 192.6C569.8 192.8 569.9 193.1 569.9 193.3C569.9 193.4 569.9 193.6 569.9 193.7C570 194.4 570 195 570 195.7C570 195.8 570 196 570 196.1C570 196.9 569.9 197.6 569.8 198.1C569.8 198.3 569.7 198.4 569.7 198.5C569.6 198.7 569.6 198.8 569.5 198.9C569.4 199 569.2 199.1 569 199.2C567.5 199.9 563.7 199.9 559.8 199.7C556.5 199.5 553.2 199.2 551.5 198.9C551 198.8 550.6 198.7 550.3 198.5C550.1 198.4 549.9 198.2 549.8 198.1C549.7 198 549.6 197.9 549.6 197.8C549.3 197.3 549.2 196.8 549.2 196.1C549.2 196 549.2 195.8 549.2 195.7C549.3 195.1 549.4 194.5 549.5 193.8V193.7C549.5 193.6 549.6 193.4 549.6 193.3C549.8 192.6 550 192 550.1 191.3C550.1 191.2 550.1 191.1 550.2 191V190.9C550.4 190.1 550.5 189.4 550.5 188.9C550.5 188.7 550.5 188.6 550.6 188.5C550.7 187.2 550.6 186.8 550.6 186.8C550.6 186.8 550.3 187.6 549.8 188.5C549.7 188.6 549.6 188.8 549.6 188.9C549.3 189.4 548.9 189.9 548.7 189.9C548.7 189.9 548.6 189.9 548.5 189.9C548.2 189.8 547.8 189.4 547.3 188.9C547.2 188.8 547 188.6 546.9 188.5C546.6 188.2 546.3 187.9 546 187.5C545.7 187.2 545.4 186.8 545.1 186.5C545 186.4 544.9 186.2 544.8 186.1C544.4 185.6 544.1 185.2 543.8 184.8C543.6 184.5 543.5 184.3 543.4 184.1C543.3 184 543.3 183.9 543.3 183.8V183.7C543.4 183.4 543.6 182.6 543.9 181.7C544 181.6 544 181.4 544.1 181.3C544.3 180.7 544.6 180 545 179.3C545.1 179.2 545.1 179 545.2 178.9C545.5 178.3 545.9 177.6 546.2 176.9C546.3 176.8 546.4 176.6 546.4 176.5C546.8 175.8 547.2 175.1 547.6 174.5C547.7 174.4 547.8 174.2 547.9 174.1C548.5 173.3 549 172.6 549.6 172.1C549.8 171.9 549.9 171.8 550.1 171.7C550.2 171.6 550.3 171.6 550.4 171.5C551.2 171 552 170.6 552.8 170.3C555.5 169.3 557.8 169.4 557.8 169.4C559.1 169.4 560.4 169.7 561.7 170.2C562.6 170.6 563.5 171.1 564.4 171.7C564.6 171.8 564.8 172 565 172.1C565.7 172.7 566.4 173.3 567 174.1C567.1 174.2 567.2 174.4 567.4 174.5C567.9 175.1 568.4 175.8 568.8 176.5C568.9 176.6 569 176.8 569.1 176.9C569.5 177.5 569.8 178.2 570.2 178.9C570.3 179 570.3 179.2 570.4 179.3C570.7 179.9 571 180.6 571.3 181.3C571.4 181.4 571.4 181.6 571.5 181.7C571.7 182.3 572 183 572.2 183.7C572.2 183.8 572.3 184 572.3 184.1C572.4 184.3 572.4 184.5 572.4 184.6Z"
                  fill="#FFCA51"
                />
                <g id="Group_10">
                  <path
                    id="Vector_43"
                    opacity="0.25"
                    d="M565.2 172.2H549.9C550.1 172 550.2 171.9 550.4 171.8H564.6C564.8 171.9 565 172 565.2 172.2Z"
                    fill="white"
                  />
                  <path
                    id="Vector_44"
                    opacity="0.25"
                    d="M567.6 174.6H548C548.1 174.5 548.2 174.3 548.3 174.2H567.3C567.3 174.3 567.4 174.4 567.6 174.6Z"
                    fill="white"
                  />
                  <path
                    id="Vector_45"
                    opacity="0.25"
                    d="M569.2 177H546.4C546.5 176.9 546.6 176.7 546.6 176.6H569C569.1 176.7 569.1 176.8 569.2 177Z"
                    fill="white"
                  />
                  <path
                    id="Vector_46"
                    opacity="0.25"
                    d="M570.5 179.4H545.2C545.3 179.3 545.3 179.1 545.4 179H570.3C570.4 179.1 570.4 179.2 570.5 179.4Z"
                    fill="white"
                  />
                  <path
                    id="Vector_47"
                    opacity="0.25"
                    d="M571.5 181.8H544.2C544.3 181.7 544.3 181.5 544.4 181.4H571.4C571.4 181.5 571.5 181.7 571.5 181.8Z"
                    fill="white"
                  />
                  <path
                    id="Vector_48"
                    opacity="0.25"
                    d="M572.3 184.2H543.6C543.5 184.1 543.5 184 543.5 183.9V183.8H572.2C572.2 183.9 572.3 184 572.3 184.2Z"
                    fill="white"
                  />
                  <path
                    id="Vector_49"
                    opacity="0.25"
                    d="M571.4 186.2C571.3 186.3 571.2 186.5 571.1 186.6H545.4C545.3 186.5 545.2 186.3 545.1 186.2H571.4Z"
                    fill="white"
                  />
                  <path
                    id="Vector_50"
                    opacity="0.25"
                    d="M547.1 188.6H550C549.9 188.7 549.8 188.9 549.8 189H547.5C547.4 188.9 547.3 188.7 547.1 188.6Z"
                    fill="white"
                  />
                  <path
                    id="Vector_51"
                    opacity="0.25"
                    d="M569.3 189H550.7C550.7 188.8 550.7 188.7 550.8 188.6H569.3C569.3 188.7 569.3 188.8 569.3 189Z"
                    fill="white"
                  />
                  <path
                    id="Vector_52"
                    opacity="0.25"
                    d="M569.7 191.4H550.3C550.3 191.3 550.3 191.2 550.4 191.1V191H569.7C569.7 191.1 569.7 191.3 569.7 191.4Z"
                    fill="white"
                  />
                  <path
                    id="Vector_53"
                    opacity="0.25"
                    d="M570 193.8H549.7C549.7 193.7 549.8 193.5 549.8 193.4H570C569.9 193.6 570 193.7 570 193.8Z"
                    fill="white"
                  />
                  <path
                    id="Vector_54"
                    opacity="0.25"
                    d="M570.1 195.8C570.1 195.9 570.1 196.1 570.1 196.2H549.3C549.3 196.1 549.3 195.9 549.3 195.8H570.1Z"
                    fill="white"
                  />
                  <path
                    id="Vector_55"
                    opacity="0.25"
                    d="M569.9 198.2C569.9 198.4 569.8 198.5 569.8 198.6H550.5C550.3 198.5 550.1 198.3 550 198.2H569.9Z"
                    fill="white"
                  />
                </g>
                <path
                  id="Vector_56"
                  d="M570.3 238.7C569.4 239.3 563.3 239.9 563.3 239.9L563.1 238.8L562 232.1L559.3 216.4L556.6 236.1L555.8 241.9C555.8 241.9 548.3 242.3 548.3 240.5C548.3 240.3 548.3 239.5 548.4 238.2C548.6 230.2 549.5 203.9 549.7 198C550 198.6 550.7 199 551.7 199.1C551.8 199.1 551.9 199.1 552 199.1C555.8 199.7 566.5 200.6 569.1 199.4C569.2 200.4 569.3 201.9 569.4 203.8C569.8 211.4 570.1 225.2 570.3 232.9C570.3 236.4 570.3 238.7 570.3 238.7Z"
                  fill="#2F1829"
                />
                <path
                  id="Vector_57"
                  opacity="0.25"
                  d="M562 232.1L559.3 216.4C559.3 216.4 560 210.1 560.3 209.3C560.6 208.6 562.5 209.1 563.3 208.6C563.7 209.6 561 211 560.8 214.3C560.7 216.6 561.5 226.7 562 232.1Z"
                  fill="black"
                />
                <path
                  id="Vector_58"
                  opacity="0.25"
                  d="M551.1 201.4C551.1 201.4 550.9 205 553.8 206.7"
                  stroke="white"
                  stroke-width="0.4635"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <g id="Group_11" opacity="0.25">
                  <g id="Group_12" opacity="0.25">
                    <path
                      id="Vector_59"
                      opacity="0.25"
                      d="M551.8 206.2L551.7 206.9"
                      stroke="white"
                      stroke-width="0.4635"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      id="Vector_60"
                      opacity="0.25"
                      d="M551.7 208.2L550.3 238"
                      stroke="white"
                      stroke-width="0.4635"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-dasharray="1.39 1.39"
                    />
                    <path
                      id="Vector_61"
                      opacity="0.25"
                      d="M550.2 238.7V239.4"
                      stroke="white"
                      stroke-width="0.4635"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </g>
                </g>
                <path
                  id="Vector_62"
                  opacity="0.25"
                  d="M562 209.6L564.7 237.9"
                  stroke="white"
                  stroke-width="0.4635"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-dasharray="1.39 1.39"
                />
                <path
                  id="Vector_63"
                  opacity="0.25"
                  d="M564.3 201.9C564.3 201.9 564 205.4 564.3 206C564.6 206.7 565.9 207.2 566.2 207.4C566.5 207.5 567.7 206.4 567.8 205.7C567.9 205 567.9 202 567.9 202C567.9 202 565.7 201.6 564.3 201.9Z"
                  stroke="white"
                  stroke-width="0.4635"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  id="Vector_64"
                  opacity="0.25"
                  d="M570.3 238.7C569.4 239.3 563.3 239.9 563.3 239.9L563.1 238.8C564.9 237.8 568.4 235.6 570.2 232.9C570.3 236.4 570.3 238.7 570.3 238.7Z"
                  fill="black"
                />
                <path
                  id="Vector_65"
                  d="M570.7 241.3L569.9 241.4L564.5 242.2L564.1 242.3C563.3 242.4 562.6 241.9 562.4 241.1V241C562.3 240.2 562.8 239.5 563.6 239.3L570.2 238.3C571 238.2 571.7 238.7 571.9 239.5V239.6C572 240.4 571.5 241.2 570.7 241.3Z"
                  fill="#4C3146"
                />
                <path
                  id="Vector_66"
                  opacity="0.25"
                  d="M556.7 236L555.9 241.8C555.9 241.8 548.4 242.2 548.4 240.4C548.4 240.2 548.4 239.4 548.5 238.1C550.2 238 554.3 237.5 556.7 236Z"
                  fill="black"
                />
                <path
                  id="Vector_67"
                  d="M556.5 242.2V242.3C556.4 243.1 555.7 243.7 554.9 243.6L549.2 243.1L548.3 243C547.5 242.9 546.9 242.2 547 241.4V241.3C547.1 240.5 547.8 239.9 548.6 240L555.2 240.6C556 240.7 556.6 241.4 556.5 242.2Z"
                  fill="#4C3146"
                />
                <path
                  id="Vector_68"
                  opacity="0.25"
                  d="M569.4 203.8C560.2 205 554 200.8 551.9 199.1C555.7 199.7 566.4 200.6 569 199.4C569.2 200.4 569.3 201.9 569.4 203.8Z"
                  fill="black"
                />
                <path
                  id="Vector_69"
                  opacity="0.25"
                  d="M550.4 191.1C551.1 187.8 550.8 186.9 550.8 186.9C550.8 186.9 549.6 189.9 548.9 190C548.6 190 547.4 188.9 546.2 187.6C547.2 187.3 548.7 186.8 549.5 185.9C550.7 184.5 550.6 178.5 551.1 178.5C551.6 178.5 552.7 189.6 549.6 193.9C549.9 193 550.2 192 550.4 191.1Z"
                  fill="black"
                />
                <path
                  id="Vector_70"
                  opacity="0.25"
                  d="M572.4 184.6C571 187.2 569.2 188.5 569.2 188.5C569.2 188.5 567.6 179.9 567.1 179.1C566.7 178.4 567.3 177.8 568.2 180.7C568.9 183 570.7 184.7 572.3 184.3C572.4 184.3 572.4 184.4 572.4 184.6Z"
                  fill="black"
                />
                <path
                  id="Vector_71"
                  opacity="0.25"
                  d="M569.5 199.1C569.4 199.2 569.2 199.3 569 199.4C567.5 200.1 563.7 200.1 559.8 199.9C562.4 199.6 568.7 198.2 569.8 192.7C570.1 195.2 570.3 198.2 569.5 199.1Z"
                  fill="black"
                />
                <path
                  id="Vector_72"
                  opacity="0.25"
                  d="M562 170.2C561.7 170.6 561.1 170.8 560.1 170.6C558.2 170.2 555.7 171 554.5 170.8C553.8 170.7 553.4 170.5 553.1 170.3C555.8 169.3 558.1 169.4 558.1 169.4C559.4 169.4 560.7 169.7 562 170.2Z"
                  fill="black"
                />
                <path
                  id="Vector_73"
                  d="M548.7 190C548 190.9 547.2 192 546.3 193.1C544.4 192 542.9 190 542 188.8C542.8 187.4 543.6 185.7 544 184.9C544.5 185.7 545.3 186.7 546.2 187.6C547.2 188.8 548.2 189.8 548.7 190Z"
                  fill="#2F1829"
                />
                <path
                  id="Vector_74"
                  opacity="0.25"
                  d="M548.7 190C548 190.9 547.2 192 546.3 193.1C546 193.5 545.6 193.9 545.3 194.3C545.4 190.8 544.2 187.7 543.5 186.1C543.7 185.6 543.9 185.2 544.1 184.9C544.6 185.7 545.4 186.7 546.3 187.6C547.2 188.8 548.2 189.8 548.7 190Z"
                  fill="black"
                />
                <path
                  id="Vector_75"
                  opacity="0.25"
                  d="M542.7 187.6C542.7 188.6 541.7 190.1 541.5 190.5C541.2 191 541.4 193.3 541.1 193C540.8 192.7 540.7 191.6 540.3 191.2C539.9 190.9 535.3 189.7 534.5 189.5C536.8 190 540.2 191.1 540.7 190.8C541 190.7 541.5 189.8 542.1 188.7C542.3 188.5 542.5 188.1 542.7 187.6Z"
                  fill="white"
                />
                <path
                  id="Vector_76"
                  opacity="0.25"
                  d="M561.7 166.2C561.2 167.1 560.4 168 559.7 168.6C559.1 169 558.6 169.3 558.2 169.3C556.9 169.1 555.2 166.9 555.1 166.5C555.1 166.1 556.5 165.9 556.4 164.7C556.2 163.5 555.4 163.3 554.9 163.5C554.3 163.7 553.6 165 553.6 166.2C553.2 166.1 552.5 164.7 551.1 163.8C550.7 163.6 550.3 163.4 549.8 163.3C550.5 163.2 551.4 163.2 551.9 163.4C553.1 163.9 553.2 164.4 553.2 164.4C553.2 164.4 553.4 162.6 555.4 162.2C557.1 161.9 558.4 166.5 561.7 166.2Z"
                  fill="black"
                />
                <path
                  id="Vector_77"
                  d="M555.9 251.1H542.8C542.8 251.1 542.7 250.7 542.7 250.2C542.7 249.5 542.9 248.6 544 248.2C544.4 248 544.8 247.9 545.2 247.7C546.8 246.9 548.6 245.9 548.9 245.3C548.9 245.3 549 245.3 549.2 245.4C549.5 245.5 550.1 245.8 550.8 246C551.1 246.1 551.4 246.1 551.7 246.1C552.4 246.1 553.9 245.7 554.8 245.6C555.2 245.5 555.5 245.5 555.6 245.7C555.8 246 556 248.7 556.1 250.2C555.8 250.7 555.9 251.1 555.9 251.1Z"
                  fill="#1F3247"
                />
                <path
                  id="Vector_78"
                  d="M554.9 243.6C554.8 244.2 554.7 244.9 554.5 245.5C553.8 245.6 552.9 245.8 552.2 245.9C551.9 245.9 551.7 246 551.5 246C550.7 246 549.6 245.5 549.1 245.3C549.1 244.6 549.2 243.7 549.2 243L551.5 243.2L554.9 243.6Z"
                  fill="url(#paint15_linear)"
                />
                <path
                  id="Vector_79"
                  d="M571.6 251.1H563.7C563.7 251.1 563.6 250.7 563.6 250.2C563.6 249.8 563.7 249.4 563.9 248.9C564.5 247.6 564.2 245.6 564.4 245.2C564.4 245.2 564.5 245.2 564.8 245.2C565.9 245.1 569 244.8 569.9 244.8C570 244.8 570 244.8 570.1 244.8C570.6 245 571.2 248.4 571.5 250.2C571.6 250.6 571.6 250.9 571.6 251.1Z"
                  fill="#1F3247"
                />
                <path
                  id="Vector_80"
                  opacity="0.25"
                  d="M555.8 250.1C555.8 250.7 555.9 251 555.9 251H542.8C542.8 251 542.7 250.6 542.7 250.1H555.8Z"
                  fill="black"
                />
                <path
                  id="Vector_81"
                  opacity="0.25"
                  d="M571.6 251.1H563.7C563.7 251.1 563.6 250.7 563.6 250.2H571.5C571.6 250.6 571.6 250.9 571.6 251.1Z"
                  fill="black"
                />
                <path
                  id="Vector_82"
                  d="M550.6 245.9C549.4 246.7 547.1 248.1 546.3 248.1C545.7 248.1 545.3 247.8 545 247.6C546.6 246.8 548.4 245.8 548.7 245.2C548.7 245.2 548.8 245.2 549 245.3C549.4 245.5 550 245.7 550.6 245.9Z"
                  fill="#122230"
                />
                <path
                  id="Vector_83"
                  opacity="0.25"
                  d="M554.9 243.6C554.8 244.2 554.7 244.9 554.5 245.5C553.8 245.6 552.9 245.8 552.2 245.9L551.4 243.2L554.9 243.6Z"
                  fill="black"
                />
                <path
                  id="Vector_84"
                  opacity="0.25"
                  d="M569.9 241.4V244.7C569.3 244.6 567.9 244.7 566.7 244.9L565.8 242.1L569.9 241.4Z"
                  fill="black"
                />
              </g>
            </g>
            <g id="Group_13">
              <g id="Group_14">
                <path
                  id="Vector_85"
                  d="M98.3 163.3C98.3 163.3 98.2 164.3 98.1 165.5C97.9 167.1 97.5 169.2 96.8 170.2C96.8 170.2 96.8 170.3 96.7 170.3C95.6 171.7 93.6 171.4 92.6 169.6C93.2 168.8 93.5 167.9 93.1 167.5C92.3 166.7 92.5 164.4 93.7 164.7C94.9 165 95.1 168.2 95.5 168.1C95.8 168.2 97.6 165.3 98.3 163.3Z"
                  fill="url(#paint16_linear)"
                />
                <path
                  id="Vector_86"
                  d="M98.7 161.9C98.7 162.2 98.6 162.7 98.4 163.3C98.3 163.6 98.1 164 98 164.3C97.2 166.1 95.9 168.1 95.6 168.2C95.2 168.3 95 165 93.8 164.8C92.6 164.5 92.4 166.8 93.2 167.6C93.6 168 93.3 168.9 92.7 169.7C92 170.5 91 171.1 89.9 170.4C87.9 169.2 87.5 161.4 87.5 160.8C87.5 160.8 87.5 160.3 87.6 159.6C87.8 158.6 88.5 157.4 90.2 156.6C93.2 155.3 98.7 155.6 98.7 161.9Z"
                  fill="#2F1829"
                />
                <path
                  id="Vector_87"
                  d="M114.4 194.3C114.4 194.4 114.4 194.5 114.3 194.5C114.2 194.9 114.1 195.1 114 195.1C113.9 195.1 113.3 195.1 112.4 195C111.2 194.8 109.4 194.6 107.8 194.3C105.8 193.9 104 193.5 103.4 193.2C102.9 192.9 102.1 191.9 101.3 190.7C101.1 190.4 100.9 190.1 100.7 189.7C99.7 188.1 98.9 186.5 98.7 186.1C98.7 186 98.6 186 98.6 186C98.6 186 98.6 186 98.6 186.1C98.6 186.5 98.4 188.1 97.9 189.7C97.8 190 97.7 190.4 97.5 190.7C97.4 191 97.2 191.3 97 191.5C96.5 192.3 96.6 193.3 96.9 194.3C96.9 194.4 97 194.5 97 194.7C97.1 194.9 97.2 195.1 97.3 195.3C97.5 195.7 97.6 196 97.8 196.3C98.3 197.3 98.7 198.2 98.6 198.7C98.6 198.8 98.5 198.8 98.4 198.9C98.3 199 98.3 199 98.2 199.1C97.9 199.3 97.3 199.6 96.6 199.9C92.7 201.5 83.9 203.4 80.1 199.9C80 199.8 80 199.8 79.9 199.7C79.7 199.4 79.6 199.2 79.6 198.9C79.6 198.5 79.8 198.2 80.1 197.7C80.5 197 81.2 196.3 81.7 195.2C81.9 194.9 82 194.6 82.1 194.2C82.3 193.7 82.5 193.1 82.5 192.4C82.6 191.8 82.6 191.1 82.7 190.5C82.7 190.2 82.8 189.8 82.8 189.5C82.9 188.2 82.9 187 82.9 185.9C82.9 185.6 82.9 185.2 82.9 184.9C82.9 183.6 82.8 182.4 82.8 181.3C82.8 181 82.8 180.6 82.8 180.3C82.8 179 82.8 177.8 82.9 176.7C82.9 176.4 83 176 83 175.7C83.3 174.2 83.9 173 85 172.1L85.1 172C85.5 171.7 85.9 171.4 86.2 171.1C86.6 170.8 87 170.6 87.3 170.3C89.7 168.9 90.9 169.1 90.9 169.1C90.9 169.1 91.6 169.1 92.7 169.3C93.8 169.5 95.1 169.8 96.5 170.3C96.7 170.4 96.8 170.4 97 170.5C97.4 170.7 97.7 170.8 98.1 171C98.3 171.1 98.6 171.3 98.8 171.4C99.1 171.6 99.4 171.8 99.6 172C100.3 172.5 100.8 173.1 101.3 173.8C101.6 174.3 102 175 102.3 175.6C102.5 175.9 102.6 176.2 102.8 176.6C103.3 177.8 103.9 179 104.4 180.2C104.5 180.5 104.7 180.9 104.8 181.2C105.3 182.5 105.8 183.8 106.1 184.8C106.2 185.1 106.3 185.5 106.4 185.8C106.8 186.9 107 187.6 107.1 187.9C107.2 188.3 108.1 188.7 109.2 189.1C109.6 189.2 109.9 189.3 110.3 189.4C111.1 189.6 111.8 189.8 112.5 190C113 190.1 113.5 190.3 113.9 190.4C114.3 190.5 114.5 190.6 114.6 190.7C114.6 190.7 114.6 190.8 114.7 190.9C114.7 191.8 114.6 193.3 114.4 194.3Z"
                  fill="#F5B539"
                />
                <g id="Group_15" opacity="0.25">
                  <g id="Group_16" opacity="0.25">
                    <path
                      id="Vector_88"
                      opacity="0.25"
                      d="M98.1 171.4C98.4 171.6 98.7 171.7 99 171.9H85.7C85.9 171.7 86.2 171.5 86.4 171.4H98.1ZM98.1 171.2H86.2C85.8 171.5 85.5 171.7 85.1 172.1L85 172.2H99.7C99.2 171.8 98.7 171.5 98.1 171.2Z"
                      fill="white"
                    />
                  </g>
                  <g id="Group_17" opacity="0.25">
                    <path
                      id="Vector_89"
                      opacity="0.25"
                      d="M102.1 176.1C102.2 176.3 102.3 176.4 102.4 176.6H83.1C83.1 176.4 83.2 176.2 83.2 176.1H102.1ZM102.3 175.8H83C82.9 176.1 82.9 176.4 82.9 176.8H102.8C102.6 176.5 102.4 176.1 102.3 175.8Z"
                      fill="white"
                    />
                  </g>
                  <g id="Group_18" opacity="0.25">
                    <path
                      id="Vector_90"
                      opacity="0.25"
                      d="M104.2 180.7C104.3 180.9 104.3 181 104.4 181.2H83.1C83.1 181 83.1 180.9 83.1 180.7H104.2ZM104.3 180.5H82.8C82.8 180.8 82.8 181.1 82.8 181.5H104.7C104.6 181.1 104.4 180.8 104.3 180.5Z"
                      fill="white"
                    />
                  </g>
                  <g id="Group_19" opacity="0.25">
                    <path
                      id="Vector_91"
                      opacity="0.25"
                      d="M105.9 185.3L106 185.7L106.1 185.9H83.3C83.3 185.7 83.3 185.6 83.3 185.4H105.9V185.3ZM106 185.1H83C83 185.4 83 185.7 83 186.1H106.4C106.3 185.8 106.1 185.4 106 185.1Z"
                      fill="white"
                    />
                  </g>
                  <g id="Group_20" opacity="0.25">
                    <path
                      id="Vector_92"
                      opacity="0.25"
                      d="M97.6 189.9C97.5 190.1 97.5 190.3 97.4 190.4H83.1C83.1 190.2 83.1 190.1 83.1 189.9H97.6ZM97.9 189.7H82.9C82.9 190 82.9 190.3 82.8 190.7H97.5C97.7 190.4 97.8 190 97.9 189.7Z"
                      fill="white"
                    />
                  </g>
                  <g id="Group_21" opacity="0.25">
                    <path
                      id="Vector_93"
                      opacity="0.25"
                      d="M110.2 189.9C110.8 190.1 111.4 190.2 111.9 190.4L112.1 190.5H101.5C101.4 190.3 101.3 190.2 101.2 190H110.2V189.9ZM110.2 189.7H100.7C100.9 190 101.1 190.4 101.3 190.7H113.7C113.3 190.6 112.9 190.4 112.3 190.3C111.8 190.1 111 189.9 110.2 189.7Z"
                      fill="white"
                    />
                  </g>
                  <g id="Group_22" opacity="0.25">
                    <path
                      id="Vector_94"
                      opacity="0.25"
                      d="M96.9 194.6C96.9 194.6 96.9 194.7 97 194.7V194.8C97 194.9 97.1 195 97.1 195.1H82.2C82.3 194.9 82.4 194.8 82.4 194.6H96.9V194.6ZM97 194.3H82.2C82.1 194.7 81.9 195 81.8 195.3H97.4C97.3 195.1 97.2 194.9 97.1 194.7C97.1 194.6 97.1 194.5 97 194.3Z"
                      fill="white"
                    />
                  </g>
                  <g id="Group_23" opacity="0.25">
                    <path
                      id="Vector_95"
                      opacity="0.25"
                      d="M114.1 194.6C114 194.9 113.9 195 113.9 195C113.9 195 113.9 195 113.8 195C113.6 195 113.1 195 112.4 194.9C111.8 194.8 111.2 194.7 110.5 194.6H114.1V194.6ZM114.4 194.3H107.8C109.4 194.6 111.2 194.9 112.4 195C113.1 195.1 113.6 195.1 113.8 195.1C113.9 195.1 113.9 195.1 114 195.1C114.1 195.1 114.2 194.8 114.3 194.5C114.4 194.5 114.4 194.4 114.4 194.3Z"
                      fill="white"
                    />
                  </g>
                  <g id="Group_24" opacity="0.25">
                    <path
                      id="Vector_96"
                      opacity="0.25"
                      d="M97.8 199.2C97.5 199.4 97.1 199.5 96.7 199.7H80.4L80.3 199.6L80.1 199.8L80.2 199.6C80.1 199.5 80 199.4 80 199.2H97.8ZM98.5 199H79.7C79.7 199.3 79.8 199.5 80 199.8C80.1 199.9 80.1 199.9 80.2 200H96.7C97.4 199.7 97.9 199.4 98.3 199.2C98.4 199.1 98.4 199 98.5 199Z"
                      fill="white"
                    />
                  </g>
                </g>
                <path
                  id="Vector_97"
                  d="M99.9 242.3C99.8 242.5 99.8 242.7 99.7 242.8C98.6 244.7 95.6 244.9 94.5 244.5C94.4 244.5 94.2 244.4 94.2 244.3C93.5 243.7 93 238.9 89.4 211.7C89.4 211.8 89.4 211.8 89.4 211.9C89.3 215.8 88.5 222.6 87.7 228.9C86.8 235.9 85.8 242.2 85.6 243.2C85.6 243.5 85.4 243.8 85.2 244.1C84.2 245.2 81.7 245.5 80.2 243.7C80.1 243.6 80 243.4 79.9 243.2C80.5 238.2 80.8 222.8 79.8 213.6C79.4 210.2 79.4 207.2 79.5 204.8C79.6 202.3 79.9 200.5 80.1 199.5C83.9 203.3 93.1 201.3 97 199.6C97.6 199.3 98 199.1 98.3 198.9C99.3 203.5 98.9 216.4 99.9 242.3Z"
                  fill="#2F1829"
                />
                <path
                  id="Vector_98"
                  opacity="0.25"
                  d="M97.1 170.7C90.7 170.9 88.9 180.8 88.9 180.8L87.4 170.4C89.8 169 91 169.2 91 169.2C91 169.2 94.1 169.4 97.1 170.7Z"
                  fill="black"
                />
                <path
                  id="Vector_99"
                  d="M107.2 251C107.2 251 96.3 251 94.5 251C94.4 250.6 94.4 250.1 94.4 249.5C94.4 249.3 94.4 249.1 94.4 248.8C94.4 247.3 94.4 245.5 94.5 244.6C94.8 244.7 95.2 244.8 95.7 244.7C96.7 244.7 97.9 244.4 98.8 243.8C99.1 243.6 99.4 243.2 99.6 242.9C100.4 244.6 102 245.7 103.5 246.5C104.8 247.2 106.1 247.7 106.6 248.1C107.1 248.5 107.3 249 107.3 249.5C107.5 250.2 107.2 251 107.2 251Z"
                  fill="#1F3247"
                />
                <path
                  id="Vector_100"
                  d="M85.3 249.5C85.3 250.5 85.2 251 85.2 251H77.9C78 250.5 78.1 250 78.2 249.5C78.8 247 79.7 244.8 80.1 243.9C80.6 244.5 81.2 244.8 81.8 245C82.5 245.2 83.2 245.2 83.9 245C84.4 244.8 84.9 244.6 85.2 244.2C85.4 246.3 85.3 248.2 85.3 249.5Z"
                  fill="#1F3247"
                />
                <path
                  id="Vector_101"
                  opacity="0.25"
                  d="M98.7 198.7C98.7 198.8 98.5 199 98.3 199.1C96 200.7 84.4 204.1 80.1 199.7C79.5 199.1 79.8 198.5 80.3 197.8C80.9 198.3 82 198.8 84 199.2C87.9 199.8 94.7 198.8 98 196.4C98.4 197.4 98.8 198.2 98.7 198.7Z"
                  fill="black"
                />
                <g id="girllight">
                  <path
                    id="Vector_102"
                    d="M121.8 188C121.8 188 119.4 179.3 124.5 173.8C129.6 168.3 143.5 160.1 143.8 149.9C144.1 139.7 151.7 126.9 161.8 124.5C171.9 122.2 179.6 98.8 188.7 94.2C197.8 89.5 210.7 89.1 214.4 83.2C218.1 77.3 261.7 162 259.6 170.7C257.4 179.4 218.6 168.2 208.2 170.8C197.8 173.4 192.9 179.6 181.3 181.2C169.7 182.8 152.5 180 146.5 183.4C140.5 186.8 129.4 191.8 123.9 189.8C121.6 188.8 121.8 188 121.8 188Z"
                    fill="url(#paint17_linear)"
                  />
                  <path
                    id="Vector_103"
                    d="M123.9 189.6L121.4 187.1C121 186.7 120.4 186.9 120.3 187.4L119.7 189.6L114.4 194.9C114.2 195.1 114.2 195.5 114.4 195.7L115.2 196.5C115.4 196.7 115.8 196.7 116 196.5L121.3 191.2L123.5 190.6C124.1 190.6 124.3 190 123.9 189.6Z"
                    fill="#2F1829"
                  />
                  <path
                    id="Vector_104"
                    d="M121.2 192.6C121.1 193.4 118.2 195.9 117.3 195.7C117.2 195.7 117 195.6 116.9 195.5C116.3 195.2 115.6 194.6 114.4 194.5C114.6 193.5 114.7 191.7 114.6 191.1C114.8 191 115 190.9 115.2 190.8C116.2 190.4 117.5 189.8 118 189.9C118.9 190.2 121.4 191.8 121.2 192.6Z"
                    fill="url(#paint18_linear)"
                  />
                  <path
                    id="Vector_105"
                    opacity="0.25"
                    d="M114.4 194.6C114.3 195 114.2 195.2 114.1 195.2C114 195.2 113.4 195.2 112.5 195.1C113.1 192.8 112.7 191.1 112.5 190.3C113.6 190.6 114.4 190.8 114.5 191C114.5 191 114.5 191.1 114.6 191.2C114.7 191.8 114.6 193.6 114.4 194.6Z"
                    fill="black"
                  />
                </g>
                <path
                  id="Vector_106"
                  opacity="0.25"
                  d="M97.2 194.7C95.7 193.3 96.4 192.1 97.2 189.3C98 186.4 96.4 185.2 96.1 182C95.8 178.8 96.2 177 98.1 174.9C95.7 181.1 98.7 186 98.7 186C98.7 186 98.6 189.4 97.1 191.6C96.5 192.4 96.7 193.6 97.2 194.7Z"
                  fill="black"
                />
                <path
                  id="Vector_107"
                  opacity="0.25"
                  d="M97.9 164.4C97.1 166.2 95.8 168.2 95.5 168.3C95.1 168.4 94.9 165.1 93.7 164.9C92.5 164.6 92.3 166.9 93.1 167.7C93.5 168.1 93.2 169 92.6 169.8C91.9 170.6 90.9 171.2 89.8 170.5C87.8 169.3 87.4 161.5 87.4 160.9C87.4 160.9 87.4 160.4 87.5 159.7C88.5 159.6 90.8 159.8 91.3 161.8C91.8 163.8 91.8 164.7 91.8 165.1C91.9 164.5 92.4 162.8 94.3 163.2C95.4 163.3 96.7 164.1 97.9 164.4Z"
                  fill="black"
                />
                <g id="hairgirl">
                  <path
                    id="Vector_108"
                    d="M89.6 161.6C89.6 161.6 88.8 159.9 86.1 160.4C83.5 160.9 82.3 164.3 83.5 169.8C83.5 164.9 84.2 163.8 84.2 163.8C84.2 163.8 83.1 166.8 84.5 173.5C85.9 180.2 86.8 186.7 83.2 189.5C90.3 185.5 90.8 180.7 90.3 174.9C90 169.1 91.3 164 89.6 161.6Z"
                    fill="#2F1829"
                  />
                </g>
                <path
                  id="Vector_109"
                  opacity="0.25"
                  d="M93.9 167.5C93.8 167.9 95.2 169.8 96.7 170.2C96.7 170.2 96.7 170.3 96.6 170.3C96.6 170.4 96.5 170.4 96.5 170.5C95.1 170 93.7 169.6 92.7 169.5C93.2 168.8 93.4 168 93 167.6C92.2 166.8 92.4 164.5 93.6 164.8C94.8 165.1 95 168.3 95.4 168.2C95.7 168.1 97.5 165.3 98.2 163.3C98.2 163.3 98.1 164.3 98 165.5C97.6 166.2 96.7 167.7 96 168.3C95.1 169.1 94.7 168.1 94.5 167.5C94.4 167 94 167 93.9 167.5Z"
                  fill="black"
                />
                <path
                  id="Vector_110"
                  opacity="0.25"
                  d="M81.5 204.9C81.5 204.9 81.3 208.6 81.8 209.6C82.3 210.6 83.7 211.3 83.7 211.3C83.7 211.3 85.5 210.5 86 209.4C86.5 207.2 86.4 204.5 86.4 204.5C86.4 204.5 82.8 203.7 81.5 204.9Z"
                  stroke="white"
                  stroke-width="0.4635"
                  stroke-miterlimit="10"
                />
                <path
                  id="Vector_111"
                  opacity="0.25"
                  d="M97.2 201.9C97.2 201.9 97.4 205 94.7 206.5"
                  stroke="white"
                  stroke-width="0.4635"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  id="Vector_112"
                  opacity="0.25"
                  d="M96.5 204.6L98.7 241.6"
                  stroke="white"
                  stroke-width="0.4635"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  id="Vector_113"
                  opacity="0.25"
                  d="M89.3 212C89.2 215.9 88.4 222.7 87.6 229.1C87.5 221.7 86.4 212.6 86.8 211.1C87.9 212.1 89.3 212 89.3 212Z"
                  fill="black"
                />
                <path
                  id="Vector_114"
                  opacity="0.25"
                  d="M87.4 213L84.3 243.2"
                  stroke="white"
                  stroke-width="0.4635"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  id="Vector_115"
                  opacity="0.25"
                  d="M96.9 199.9C95.1 201.7 89.5 206.1 79.4 205.1C79.5 202.6 79.8 200.8 80 199.8C83.8 203.6 93.1 201.5 96.9 199.9Z"
                  fill="black"
                />
                <path
                  id="Vector_116"
                  opacity="0.25"
                  d="M78.3 249.5H85.3C85.3 250.5 85.2 251 85.2 251H77.9C78 250.5 78.1 250 78.3 249.5Z"
                  fill="black"
                />
                <path
                  id="Vector_117"
                  opacity="0.25"
                  d="M107.2 251C107.2 251 96.3 251 94.5 251C94.4 250.6 94.4 250.1 94.4 249.5H107.4C107.5 250.2 107.2 251 107.2 251Z"
                  fill="black"
                />
                <path
                  id="Vector_118"
                  opacity="0.25"
                  d="M103.6 246.4C101.3 247.5 99.7 245.2 98.9 243.7C99.2 243.5 99.5 243.1 99.7 242.8C100.5 244.5 102.1 245.6 103.6 246.4Z"
                  fill="white"
                />
                <path
                  id="Vector_119"
                  opacity="0.25"
                  d="M83.9 245C83.7 248.4 82.5 248.5 81.9 248.1C81.3 247.8 81.7 245.6 81.9 244.9C82.5 245.2 83.2 245.2 83.9 245Z"
                  fill="black"
                />
                <path
                  id="Vector_120"
                  opacity="0.25"
                  d="M94.4 248.8C94.4 247.3 94.4 245.5 94.5 244.6C94.8 244.7 95.2 244.8 95.7 244.7C95.9 245.8 96 248.3 94.4 248.8Z"
                  fill="black"
                />
                <path
                  id="Vector_121"
                  opacity="0.25"
                  d="M114.4 194.6C114.6 193.6 114.7 191.8 114.6 191.2C114.8 191.1 115 191 115.2 190.9C115.8 191.8 116.9 193.5 117 195.5C116.3 195.2 115.7 194.6 114.4 194.6Z"
                  fill="black"
                />
                <path
                  id="Vector_122"
                  opacity="0.25"
                  d="M109.1 189.4C107.1 189.6 105.7 191.7 105.6 191.3C105.4 190.8 106.5 189.8 106.4 189.1C106.3 188.4 103.2 180.5 101.5 176.6C100.5 174.2 99.5 172.6 98.9 171.6C99.2 171.8 99.5 172 99.7 172.2C100.4 172.7 100.9 173.3 101.4 174C101.7 174.5 102.1 175.2 102.4 175.8C102.6 176.1 102.7 176.4 102.9 176.8C103.4 178 104 179.2 104.5 180.4C104.6 180.7 104.8 181.1 104.9 181.4C105.4 182.7 105.9 184 106.2 185C106.3 185.3 106.4 185.7 106.5 186C106.9 187.1 107.1 187.8 107.2 188.1C107.2 188.6 108 189 109.1 189.4Z"
                  fill="white"
                />
              </g>
            </g>
            <path
              id="Vector_123"
              d="M592.4 253C591.7 252.5 570.9 196.3 594.9 164.3C591.6 186.9 593.4 205.4 593.4 205.4L590.3 208.5L593.8 209.5C593.8 209.5 596.1 240.9 597.3 244.5C594.7 221 601.1 207.3 601.1 207.3C601.1 207.3 600 224 602.1 230.1L600.4 232.3L602.1 232C602.1 232 600.9 242.1 602.1 245.1C602.1 245.1 615.5 205.1 609.2 187.5C617.5 200.3 615.1 221.8 615.1 221.8L613 222.6L614.3 223.6C614.3 223.6 610.8 246.5 602.9 252.9"
              fill="#2F1829"
            />
            <g id="Group_25">
              <path
                id="Vector_124"
                d="M452.1 246.4C452.1 246.4 433.5 244.7 426.1 249.9C429.6 244.9 443.7 242.6 443.7 242.6L444.7 243.4V242.6C444.7 242.6 447.1 241.4 450.6 240.9C433.7 237.6 425.6 240.8 425.6 240.8C425.6 240.8 428.7 238.2 433.9 236.7C439.1 235.2 442.3 235.8 442.3 235.8L444.4 237.1V235.7L462.4 241"
                fill="black"
              />
              <path
                id="Vector_125"
                d="M523.5 247.4C523.5 247.4 521.5 234.8 531.8 226.1C531.7 236.3 528.9 245 523.5 247.4Z"
                stroke="#1F3247"
                stroke-width="0.9271"
                stroke-miterlimit="10"
              />
              <g id="Group_26">
                <path
                  id="Vector_126"
                  d="M454.5 239.1L452.5 244C451.1 239.1 448 238.1 446.4 238C445.8 237.9 445.5 238 445.5 238L446.2 235.6L443.9 236C443.9 236 441.3 229.7 429.6 222C440.3 221.4 446.9 227 450.6 232C453.4 235.7 454.5 239.1 454.5 239.1Z"
                  fill="#FFCA51"
                />
                <g id="Group_27" opacity="0.25">
                  <path
                    id="Vector_127"
                    opacity="0.25"
                    d="M429.6 222C432.1 222.6 434.6 223.5 437 224.6C439.4 225.7 441.7 226.9 443.9 228.3C446.1 229.8 448.1 231.5 449.9 233.5C451.6 235.5 453 237.8 454 240.3C454 240.4 454 240.6 453.9 240.6C453.8 240.6 453.6 240.6 453.6 240.5C452.7 238.1 451.4 235.8 449.7 233.8C448 231.8 446 230.1 443.9 228.6C441.7 227.1 439.4 225.9 437 224.8C434.6 223.6 432.1 222.6 429.6 222Z"
                    fill="white"
                  />
                </g>
                <path
                  id="Vector_128"
                  opacity="0.25"
                  d="M454.5 239.1L452.5 244C451.1 239.1 448 238.1 446.4 238C449.2 236.3 450.2 233.6 450.6 231.9C453.4 235.7 454.5 239.1 454.5 239.1Z"
                  fill="black"
                />
              </g>
              <g id="Group_28">
                <path
                  id="Vector_129"
                  d="M531.8 215.8C512.6 231.6 507.7 239.4 507.7 239.4L504.3 237.9C504.3 237.9 504.3 238 504.3 238.2C504.3 239.1 504.4 241.5 504.3 242.4C504.2 243.1 497.4 246.8 493.5 248.8C491.9 249.6 490.9 250.2 490.9 250.2L487.7 247L488 246.4L489.7 243.2C489.7 243.2 494.1 236.9 501.6 230.3C508.9 223.7 519.4 216.9 531.8 215.8Z"
                  fill="#FFADAE"
                />
                <g id="Group_29" opacity="0.25">
                  <path
                    id="Vector_130"
                    opacity="0.25"
                    d="M489.6 248.9C492.2 245.1 495.1 241.5 498.1 238.1C501.1 234.7 504.4 231.4 507.8 228.4C511.3 225.4 515 222.7 519 220.4C523 218.2 527.3 216.5 531.8 215.7C527.3 216.5 523 218.2 519 220.5C515 222.8 511.4 225.5 507.9 228.5C504.5 231.5 501.3 234.8 498.3 238.2C495.3 241.6 492.5 245.2 489.9 249C489.8 249.1 489.7 249.1 489.6 249.1C489.5 249.2 489.5 249 489.6 248.9Z"
                    fill="white"
                  />
                </g>
                <path
                  id="Vector_131"
                  opacity="0.25"
                  d="M504.3 242.3C504.2 243 497.4 246.7 493.5 248.7C491.4 247.9 489.4 247 488 246.2L489.7 243C489.7 243 494.1 236.7 501.6 230.1C502 232.4 502.9 235.7 504.4 238.1C504.3 239 504.4 241.5 504.3 242.3Z"
                  fill="black"
                />
              </g>
              <g id="Group_30">
                <path
                  id="Vector_132"
                  d="M519.7 205.4C506 216.8 499.7 226.4 497.1 231.2C495.9 233.4 495.5 234.7 495.5 234.7L492.5 233.6L493.7 236.3L489.3 245.1L487.4 249V233.6C488 232.5 488.8 231 489.8 229.3C491.7 226.1 494.4 222.2 497.9 218.4C499.5 216.7 501.2 215 503 213.4C507.8 209.6 513.3 206.5 519.7 205.4Z"
                  fill="#F3475C"
                />
                <g id="Group_31" opacity="0.25">
                  <path
                    id="Vector_133"
                    opacity="0.25"
                    d="M487.3 239.8C488.7 236 490.6 232.4 492.7 228.9C494.8 225.4 497.3 222.2 500 219.2C502.7 216.2 505.8 213.5 509.1 211.1L511.6 209.4L514.3 207.9C514.7 207.7 515.2 207.4 515.6 207.2L517 206.6L519.8 205.4L517 206.6L515.6 207.2C515.2 207.4 514.7 207.7 514.3 207.9L511.7 209.4L509.2 211.1C505.9 213.5 502.9 216.2 500.2 219.2C497.5 222.2 495.1 225.5 493.1 229C491 232.5 489.2 236.1 487.9 239.9C487.9 240 487.7 240.1 487.6 240C487.3 240.1 487.3 239.9 487.3 239.8Z"
                    fill="white"
                  />
                </g>
                <path
                  id="Vector_134"
                  opacity="0.25"
                  d="M495.6 234.8L492.6 233.7L493.8 236.4L489.4 245.2L487.5 245.5V233.7C488.1 232.6 488.9 231.1 489.9 229.4C491.3 230.5 493.7 231.8 497.1 231.3C496 233.5 495.6 234.8 495.6 234.8Z"
                  fill="black"
                />
              </g>
              <path
                id="Vector_135"
                d="M537.2 251.1H487.5V244.1C487.5 244.1 488.2 242.4 490.2 241.4C490.8 241.1 491.6 240.8 492.4 240.7C496.1 240.2 497.4 243.3 497.4 243.3C497.4 243.3 498.3 240.6 502 240.3C505.6 240 507.8 245.6 507.9 246C507.9 245.7 507.6 242.6 510.4 242.4C513.3 242.2 513.3 246 513.3 246C513.3 246 515.6 243.5 518.6 243.6C521.6 243.8 522.2 246.7 522.2 246.7C522.2 246.7 523.9 244.2 527.5 245.1C531.2 245.9 531.7 251.1 537.2 251.1Z"
                fill="#982245"
              />
              <path
                id="Vector_136"
                opacity="0.25"
                d="M521.7 251.1H487.6V244.1C487.6 244.1 488.3 242.4 490.3 241.4C491.8 241.5 494.4 242 495.5 244C497.1 246.9 497.2 249.6 497.2 249.6C497.2 249.6 500.5 244.8 503.2 245.6C505.9 246.4 507.3 249.6 507.3 249.6C507.3 249.6 510.1 246.6 512.5 247.6C513.6 248.2 517.8 249.7 521.7 251.1Z"
                fill="black"
              />
              <path
                id="Vector_137"
                d="M423.7 253C423.5 252.9 417.7 237.1 424.4 228.1C423.5 234.5 424 239.7 424 239.7L423.1 240.6L424.1 240.9C424.1 240.9 424.8 249.7 425.1 250.8C424.4 244.2 426.2 240.3 426.2 240.3C426.2 240.3 425.9 245 426.5 246.7L426 247.3L426.5 247.2C426.5 247.2 426.2 250 426.5 250.9C426.5 250.9 430.3 239.7 428.5 234.7C430.8 238.3 430.2 244.3 430.2 244.3L429.6 244.5L430 244.8C430 244.8 429 251.2 426.8 253"
                fill="#2F1829"
              />
            </g>
            <g id="Group_32">
              <path
                id="Vector_138"
                d="M197 247.9C197 247.9 167.7 228.2 150.6 230C161 224.9 186.5 233.9 186.5 233.9L187.5 236.2L188.2 234.9C188.2 234.9 193.3 235 199.5 237.5C174.5 216.5 158.1 214.5 158.1 214.5C158.1 214.5 165.6 213.1 175.6 215.3C185.6 217.5 190.4 221.5 190.4 221.5L192.7 225.5L193.9 223.3L218.9 248.5"
                fill="black"
              />
              <path
                id="Vector_139"
                d="M174.2 250.2C174.2 250.2 161.8 247.6 154.1 238.3C167.3 239.7 173 244.4 174.2 250.2Z"
                stroke="#1F3247"
                stroke-width="0.9271"
                stroke-miterlimit="10"
              />
              <g id="Group_33">
                <path
                  id="Vector_140"
                  d="M215.5 194.6C214.4 219.4 217 228.3 217 228.3L213.6 229.9C213.6 229.9 213.7 230 213.8 230.1C214.5 230.7 216.3 232.3 216.9 232.9C217.4 233.4 215.6 241 214.5 245.2C214.1 246.9 213.8 248.1 213.8 248.1L209.3 248.3L209.1 247.6L207.8 244.2C207.8 244.2 206 236.7 206.1 226.8C206.1 216.9 208.1 204.5 215.5 194.6Z"
                  fill="#FFADAE"
                />
                <g id="Group_34" opacity="0.25">
                  <path
                    id="Vector_141"
                    opacity="0.25"
                    d="M212 248.1C210.9 243.6 210.2 239.1 209.6 234.6C209.1 230 208.8 225.5 208.9 220.9C209 216.3 209.4 211.7 210.4 207.3C211.4 202.8 213 198.5 215.5 194.6C213.1 198.5 211.5 202.8 210.5 207.3C209.5 211.8 209.1 216.3 209.1 220.9C209 225.5 209.4 230 209.9 234.6C210.5 239.1 211.3 243.6 212.4 248.1C212.4 248.2 212.4 248.4 212.2 248.4C212.2 248.3 212 248.3 212 248.1Z"
                    fill="white"
                  />
                </g>
                <path
                  id="Vector_142"
                  opacity="0.25"
                  d="M216.9 232.8C217.4 233.3 215.6 240.9 214.5 245.1C212.5 246.2 210.5 247 209 247.6L207.7 244.2C207.7 244.2 205.9 236.7 206 226.8C208 228 211 229.5 213.8 230C214.4 230.6 216.3 232.2 216.9 232.8Z"
                  fill="black"
                />
              </g>
              <g id="Group_35">
                <path
                  id="Vector_143"
                  d="M233 211.6C226.9 222.3 225.1 230 224.6 233.7C224.4 235.4 224.4 236.3 224.4 236.3H222.2L223.6 237.8L222.9 244.6L222.6 247.6L218.9 237.7C219 236.8 219.2 235.7 219.4 234.3C219.9 231.8 220.7 228.6 222 225.3C222.6 223.8 223.3 222.3 224.1 220.9C226.3 217.2 229.1 213.9 233 211.6Z"
                  fill="#F3475C"
                />
                <g id="Group_36" opacity="0.25">
                  <path
                    id="Vector_144"
                    opacity="0.25"
                    d="M220.2 241.7C220.2 238.9 220.5 236.1 221.1 233.3C221.6 230.5 222.4 227.9 223.5 225.3C224.5 222.7 225.9 220.2 227.4 217.9L228.6 216.2L230 214.6C230.2 214.3 230.5 214.1 230.7 213.8L231.5 213.1L233 211.7L231.5 213.2L230.8 213.9C230.6 214.2 230.3 214.4 230.1 214.7L228.8 216.3L227.6 218C226.1 220.3 224.7 222.8 223.8 225.4C222.8 228 222.1 230.7 221.5 233.4C221 236.1 220.7 238.9 220.7 241.7C220.7 241.8 220.6 241.9 220.5 241.9C220.3 241.9 220.2 241.8 220.2 241.7Z"
                    fill="white"
                  />
                </g>
                <path
                  id="Vector_145"
                  opacity="0.25"
                  d="M224.4 236.4H222.2L223.6 237.9L222.9 244.7L221.7 245.3L218.9 237.7C219 236.8 219.2 235.7 219.4 234.3C220.5 234.7 222.4 235 224.5 233.8C224.4 235.5 224.4 236.4 224.4 236.4Z"
                  fill="black"
                />
              </g>
              <path
                id="Vector_146"
                d="M254 251H241.6L187.6 251.1H171.6C171.6 251.1 172.9 246.8 179.2 244.8C185.5 242.8 187.3 246.9 187.3 246.9C187.3 246.9 187 238.7 194.4 235.9C201.8 233.1 205.1 242.5 205.1 242.5C205.1 242.5 206.6 237.9 214.5 237.5C222.4 237.1 221.6 243.3 221.6 243.3C221.6 243.3 226.1 238.3 234.2 239.4C242.3 240.5 243.1 247 243.1 247C243.1 247 250.2 244.8 254 251Z"
                fill="#982245"
              />
              <path
                id="Vector_147"
                opacity="0.25"
                d="M241.6 251L187.6 251.1C190.4 248.6 195 245.4 199.8 245.3C207.7 245.2 209 248.1 209 248.1C209 248.1 213.9 242.9 217.7 243.8C221.6 244.7 221.7 248.8 221.7 248.8C221.7 248.8 234.1 245.9 241.6 251Z"
                fill="black"
              />
              <path
                id="Vector_148"
                d="M262.9 254.5C262.9 254.5 253.9 238.6 256.6 223.2C259.2 235.3 265.7 243.3 265.7 243.3L263.1 245.4H265.7L271.3 256.1L263.7 254.5V255.2L262.9 254.5Z"
                fill="#2F1829"
              />
            </g>
          </g>
          <defs>
            <linearGradient
              id="paint0_linear"
              x1="327.54"
              y1="250.471"
              x2="330.184"
              y2="46.9149"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#E8D197" />
              <stop offset="1" stop-color="#FEF5DA" />
            </linearGradient>
            <linearGradient
              id="paint1_linear"
              x1="326.925"
              y1="147.902"
              x2="330.395"
              y2="242.079"
              gradientUnits="userSpaceOnUse"
            >
              <stop />
              <stop offset="1" stop-opacity="0" />
            </linearGradient>
            <linearGradient
              id="paint2_linear"
              x1="344.3"
              y1="64.1527"
              x2="344.961"
              y2="87.284"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="white" />
              <stop offset="1" stop-color="white" stop-opacity="0" />
            </linearGradient>
            <linearGradient
              id="paint3_linear"
              x1="130.102"
              y1="26.1247"
              x2="132.084"
              y2="77.0139"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="white" />
              <stop offset="1" stop-color="white" stop-opacity="0" />
            </linearGradient>
            <linearGradient
              id="paint4_linear"
              x1="455.752"
              y1="229.215"
              x2="433.942"
              y2="41.3544"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#E8D197" />
              <stop offset="1" stop-color="#FEF5DA" />
            </linearGradient>
            <linearGradient
              id="paint5_linear"
              x1="60.0761"
              y1="430.474"
              x2="23.3198"
              y2="113.867"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#E8D197" />
              <stop offset="1" stop-color="#FEF5DA" />
            </linearGradient>
            <linearGradient
              id="paint6_linear"
              x1="197.311"
              y1="242.736"
              x2="195.989"
              y2="148.447"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#2F1829" />
              <stop offset="1" stop-color="#3B223C" />
            </linearGradient>
            <linearGradient
              id="paint7_linear"
              x1="322.636"
              y1="240.979"
              x2="321.314"
              y2="146.691"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#2F1829" />
              <stop offset="1" stop-color="#3B223C" />
            </linearGradient>
            <linearGradient
              id="paint8_linear"
              x1="447.456"
              y1="239.229"
              x2="446.134"
              y2="144.941"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#2F1829" />
              <stop offset="1" stop-color="#3B223C" />
            </linearGradient>
            <linearGradient
              id="paint9_linear"
              x1="281.068"
              y1="73.4007"
              x2="292.303"
              y2="109.089"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#2F1829" />
              <stop offset="1" stop-color="#3B223C" />
            </linearGradient>
            <linearGradient
              id="paint10_linear"
              x1="567.282"
              y1="246.761"
              x2="567.144"
              y2="239.051"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#FECBA6" />
              <stop offset="1" stop-color="#D17878" />
            </linearGradient>
            <linearGradient
              id="paint11_linear"
              x1="575.336"
              y1="236.543"
              x2="417.383"
              y2="126.175"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="white" />
              <stop offset="1" stop-color="white" stop-opacity="0" />
            </linearGradient>
            <linearGradient
              id="paint12_linear"
              x1="529.726"
              y1="200.324"
              x2="554.29"
              y2="176.972"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#FECBA6" />
              <stop offset="1" stop-color="#D17878" />
            </linearGradient>
            <linearGradient
              id="paint13_linear"
              x1="568.688"
              y1="209.407"
              x2="569.018"
              y2="182.751"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#FECBA6" />
              <stop offset="1" stop-color="#D17878" />
            </linearGradient>
            <linearGradient
              id="paint14_linear"
              x1="552.343"
              y1="166.843"
              x2="558.043"
              y2="168.082"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#FECBA6" />
              <stop offset="1" stop-color="#D17878" />
            </linearGradient>
            <linearGradient
              id="paint15_linear"
              x1="550.457"
              y1="250.958"
              x2="552.881"
              y2="239.337"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#FECBA6" />
              <stop offset="1" stop-color="#D17878" />
            </linearGradient>
            <linearGradient
              id="paint16_linear"
              x1="95.6885"
              y1="163.838"
              x2="93.7609"
              y2="174.468"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#FECBA6" />
              <stop offset="1" stop-color="#D17878" />
            </linearGradient>
            <linearGradient
              id="paint17_linear"
              x1="75.5473"
              y1="236.543"
              x2="233.501"
              y2="126.174"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="white" />
              <stop offset="1" stop-color="white" stop-opacity="0" />
            </linearGradient>
            <linearGradient
              id="paint18_linear"
              x1="124.267"
              y1="190.961"
              x2="113.114"
              y2="194.142"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#FECBA6" />
              <stop offset="1" stop-color="#D17878" />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  </div>
</a>

body {
  background-color: #141019;
  background: radial-gradient(at 50% -20%, #908392, #0d060e) fixed;
}

#handboy {
  animation: swing ease-in-out 1.3s infinite alternate;
  transform-origin: 98% 98%;
  transform-box: fill-box;
}

#girllight {
  animation: swing ease-in-out 1.3s infinite alternate;
  transform-origin: 0% 97%;
  transform-box: fill-box;
}

#hairgirl {
  animation: swinghair ease-in-out 1.3s infinite alternate;
  transform-origin: 60% 0%;
  transform-box: fill-box;
}

#zero {
  transform-origin: bottom;
  transform-box: fill-box;
}

/*************swing************/
@keyframes swing {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

/*************swing hair************/
@keyframes swinghair {
  0% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(-6deg);
  }
}

3. 反射色彩光环

<div class="box">
  <span style="--i:0;">
    <i></i>
  </span>
  <span style="--i:1;">
    <i></i>
  </span>
  <span style="--i:2;">
    <i></i>
  </span>
  <span style="--i:3;">
    <i></i>
  </span>
  <span style="--i:4;">
    <i></i>
  </span>
  <span style="--i:5;">
    <i></i>
  </span>
  <span style="--i:6;">
    <i></i>
  </span>
  <span style="--i:7;">
    <i></i>
  </span>
  <span style="--i:8;">
    <i></i>
  </span>
  <span style="--i:9;">
    <i></i>
  </span>
  <span style="--i:10;">
    <i></i>
  </span>
  <span style="--i:11;">
    <i></i>
  </span>
  <span style="--i:12;">
    <i></i>
  </span>
  <span style="--i:13;">
    <i></i>
  </span>
  <span style="--i:14;">
    <i></i>
  </span>
  <span style="--i:15;">
    <i></i>
  </span>
</div>

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #222;
}
.box
{
	position: relative;
	width: 500px;
	height: 500px;
	display: flex;
	justify-content: center;
}
.box span
{
	position: absolute;
	width: 10px;
	height: 250px;
	border-bottom: 40px solid transparent;
	transform-origin: bottom;
	transform: rotate(calc(22.5deg * var(--i))) translateX(0px);
}
.box span::before
{
	content: '';
	position: absolute;
	width: 100%;
	height: 50px;
	background: #03a9f4;
	box-shadow: 0 0 20px #03a9f4;
	border-radius: 10px;
	transform: translateY(160px);
	animation: animate 1.5s linear infinite;
	animation-delay: calc(0.1s * var(--i));
}
@keyframes animate
{
	0%
	{
		transform: translateY(160px) rotate(0deg);
		filter: hue-rotate(0deg);
	}
	50%
	{
		transform: translateY(0px);
	}
	100%
	{
		transform: translateY(160px) rotate(360deg);
		filter: hue-rotate(360deg);
	}
}
.box span::after
{
	content: '';
	position: absolute;
	bottom: 0;
	width: 10px;
	height: 17px;
	background: #03a9f4;
	transform-origin: bottom;
	transform: rotate(102deg);
	animation: animateColor 1.5s linear infinite;
}
.box span i
{
	position: absolute;
	width: 15px;
	height: 100px;
	transform-origin: top;
	transform: rotate(79deg);
	animation: animateSide 1.5s linear infinite,animateColor 1.5s linear infinite;
	animation-delay: calc(0.1s * var(--i));
	border-left: 2px solid #03a9f4;
	border-right: 2px solid #03a9f4;
	display: flex;
	justify-content: center;
	align-items: center;
}
@keyframes animateSide
{
	0%,25%,50.1%,100%
	{
		background: transparent;
	}
	25.1%,50%
	{
		background: #03a9f4;
	}
}
@keyframes animateSide
{
	0%,40%,65.1%,100%
	{
		background: #333;
	}
	40.1%,65%
	{
		background: #03a9f4;
	}
}
@keyframes animateColor
{
	0%
	{
		filter: hue-rotate(0deg);
	}
	100%
	{
		filter: hue-rotate(360deg);
	}
}

4. 《龙猫》理论上来说 CSS 可以画任何东西

<main>
  <div class="Totoro">
    <div class="Totoro__head">
      <div class="Totoro__hat"></div>
      <div class="Totoro__ears">
        <div class="Totoro__ear Totoro__ear--left"></div>
        <div class="Totoro__ear Totoro__ear--right"></div>
      </div>
      <div class="Totoro__eyes">
        <div class="Totoro__eye Totoro__eye--left"></div>
        <div class="Totoro__eye Totoro__eye--right"></div>
      </div>
      <div class="Totoro__nose"></div>
      <div class="Totoro__whiskers">
        <div class="Totoro__whisker Totoro__whisker--left"></div>
        <div class="Totoro__whisker Totoro__whisker--right"></div>
      </div>
    </div>
    <div class="Totoro__body">
      <div class="Totoro__belly">
        <div class="Totoro__bellyMarks"></div>
      </div>
    </div>
    <div class="Totoro__arms">
      <div class="Totoro__arm Totoro__arm--left"></div>
      <div class="Totoro__arm Totoro__arm--right"></div>
    </div>
    <div class="Totoro__legs">
      <div class="Totoro__leg Totoro__leg--left"></div>
      <div class="Totoro__leg Totoro__leg--right"></div>
    </div>
  </div>
  <div class="brightness"></div>
</main>

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

main {
  position: relative;
  width: min(90vh, 90vw);
  aspect-ratio: 1/1;
  text-align: center;
}

.Totoro {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 75%;
}

.Totoro__body {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 88%;
  height: 73%;
  border-radius: 50%;
  background: #4c4a43;
  transform: translate(-50%);
}

.Totoro__belly {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
}

.Totoro__belly::before,
.Totoro__belly::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.Totoro__belly::before {
  bottom: 2%;
  left: 3%;
  right: 3%;
  top: 15%;
  background: #6c685c;
}

.Totoro__belly::after {
  bottom: 1%;
  left: 5%;
  right: 5%;
  top: 10%;
  background: #6c685c;
}

.Totoro__arms {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  bottom: 25%;
}

.Totoro__arm {
  position: absolute;
  z-index: -1;
  width: 20%;
  height: 100%;
  background: #4c4a43;
  border-radius: 200% 150% 50% 150%;
}

.Totoro__arm--right {
  right: 6%;
  transform: rotatey(180deg) rotate(15deg);
}

.Totoro__arm--left {
  left: 6%;
  transform: rotate(15deg);
}

.Totoro__head {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 78%;
  height: 32%;
  transform: translate(-50%);
  perspective: 400px;
}

.Totoro__head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #4c4a43;
  clip-path: polygon(0% 100%, 12% 30%, 30% 10%, 70% 10%, 88% 30%, 100% 100%);
}

.Totoro__head::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: -8%;
  bottom: 55%;
  background: #4c4a43;
  clip-path: ellipse(51.7% 100% at 50% 97%);
}

.Totoro__eyes {
  position: absolute;
  z-index: 10;
  top: 20%;
  left: 23%;
  right: 23%;
  height: 19%;
}

.Totoro__eye {
  position: absolute;
  top: 50%;
  width: 21%;
  height: 100%;
  border-radius: 50%;
  background: #b2b4b4;
  transform: translatey(-50%);
}

.Totoro__eye::before {
  content: '';
  position: absolute;
  top: 47%;
  left: 55%;
  width: 38%;
  aspect-ratio: 1/1;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.Totoro__eye--right {
  right: 0;
}

.Totoro__eye--right::before {
  left: 45%;
}

.Totoro__nose {
  position: absolute;
  z-index: 10;
  top: 63%;
  left: 50%;
  width: 40%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle at 39% 18%, #585954 19%, #1a1a1b 20%);
  transform: translate(-50%, -50%);
  clip-path: circle(50% at 50% -42%);
}

.Totoro__nose::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  top: 0;
  background: radial-gradient(circle at 37% 8%, #000 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 63% 8%, #000 3%, rgba(
          0,
          0,
          0,
          0
        ) 4%);
}

.Totoro__legs {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
}

.Totoro__leg {
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 100%;
  background: #4c4a43;
}

.Totoro__leg--left {
  left: 0;
  clip-path: circle(75% at 82% 16%);
}

.Totoro__leg--right {
  left: 50%;
  clip-path: circle(75% at 18% 16%);
}

.Totoro__legs::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: ellipse(30% 18% at 50% 98.5%);
  background: #4c4a43;
}

.Totoro__ears {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70%;
  transform: translatey(-90%);
}

.Totoro__ear {
  position: absolute;
  top: 55%;
  width: 10%;
  aspect-ratio: 1/1;
  background: #4c4a43;
  border-radius: 50%;
}

.Totoro__ear--left {
  left: 20%;
}

.Totoro__ear--right {
  right: 20%;
}

.Totoro__ear::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 1/2;
  background: #4c4a43;
  transform-origin: 50% 100%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.Totoro__ear--left::before {
  transform: translateY(-100%) rotate(-8deg);
}

.Totoro__ear--right::before {
  transform: translateY(-100%) rotate(8deg);
}

.Totoro__ear::after {
  content: '';
  position: absolute;
  top: 70%;
  width: 60%;
  height: 120%;
  background: #4c4a43;
}

.Totoro__ear--left::after {
  left: 40%;
  transform: rotate(-15deg);
}

.Totoro__ear--right::after {
  right: 40%;
  transform: rotate(15deg);
}

.Totoro__whisker {
  position: absolute;
  top: 45%;
  width: 27%;
  height: 1.8%;
  background: #000;
}

.Totoro__whisker--left {
  left: -7%;
  transform: rotate(3deg);
}

.Totoro__whisker--right {
  right: -7%;
  transform: rotate(-3deg);
}

.Totoro__whisker::before,
.Totoro__whisker::after {
  content: '';
  position: absolute;
  width: 100%;
  aspect-ratio: 23/0.8;
  background: #000;
}

.Totoro__whisker::before {
  top: 600%;
}

.Totoro__whisker::after {
  top: 1100%;
}

.Totoro__whisker--left::before {
  left: -12%;
  transform: rotate(-10deg);
}

.Totoro__whisker--right::before {
  right: -12%;
  transform: rotate(10deg);
}

.Totoro__whisker--left::after {
  left: -4%;
  transform: rotate(-17deg);
}

.Totoro__whisker--right::after {
  right: -4%;
  transform: rotate(17deg);
}

.Totoro__whisker--left,
.Totoro__whisker--left::before,
.Totoro__whisker--left::after {
  border-top-left-radius: 100%;
}

.Totoro__whisker--right,
.Totoro__whisker--right::before,
.Totoro__whisker--right::after {
  border-top-right-radius: 100%;
}

.Totoro__bellyMarks {
  position: absolute;
  z-index: 10;
  top: 20%;
  left: 10%;
  right: 10%;
  height: 20%;
  background:
    /* second line */ radial-gradient(circle at 10% 100%, #6c685c 8%, rgba(0, 0, 0, 0) 6%), radial-gradient(
      circle at 10% 85%,
      #4c4a43 8%,
      rgba(0, 0, 0, 0) 6%
    ), radial-gradient(circle at 30% 100%, #6c685c 8%, rgba(0, 0, 0, 0) 6%), radial-gradient(
      circle at 30% 85%,
      #4c4a43 8%,
      rgba(0, 0, 0, 0) 6%
    ), radial-gradient(circle at 50% 100%, #6c685c 8%, rgba(0, 0, 0, 0) 6%), radial-gradient(
      circle at 50% 85%,
      #4c4a43 8%,
      rgba(0, 0, 0, 0) 6%
    ), radial-gradient(circle at 68% 100%, #6c685c 8%, rgba(0, 0, 0, 0) 6%), radial-gradient(
      circle at 68% 85%,
      #4c4a43 8%,
      rgba(0, 0, 0, 0) 6%
    ), radial-gradient(circle at 90% 100%, #6c685c 8%, rgba(0, 0, 0, 0) 6%), radial-gradient(
      circle at 90% 85%,
      #4c4a43 8%,
      rgba(0, 0, 0, 0) 6%
    ), /* filrt line */ radial-gradient(circle at 25% 40%, #6c685c 8%, rgba(0, 0, 0, 0) 6%), radial-gradient(
      circle at 25% 25%,
      #4c4a43 8%,
      rgba(0, 0, 0, 0) 6%
    ), radial-gradient(circle at 43% 40%, #6c685c 8%, rgba(0, 0, 0, 0) 6%), radial-gradient(
      circle at 43% 25%,
      #4c4a43 8%,
      rgba(0, 0, 0, 0) 6%
    ), radial-gradient(circle at 58% 40%, #6c685c 8%, rgba(0, 0, 0, 0) 6%), radial-gradient(
      circle at 58% 25%,
      #4c4a43 8%,
      rgba(0, 0, 0, 0) 6%
    ), radial-gradient(circle at 75% 40%, #6c685c 8%, rgba(0, 0, 0, 0) 6%), radial-gradient(
      circle at 75% 25%,
      #4c4a43 8%,
      rgba(0, 0, 0, 0) 6%
    ), #6c685c;
  border-top-left-radius: 16vmin;
  border-top-right-radius: 16vmin;
  overflow: hidden;
}

.brightness {
  position: absolute;
  z-index: 100;
  top: 65%;
  left: -28%;
  width: 80%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border-bottom-right-radius: 35%;
  backdrop-filter: brightness(2.1) saturate(160%);
  transform: translatey(-50%);
}

.Totoro__hat {
  position: absolute;
  z-index: 10;
  top: -22%;
  left: 35%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 75% 120%, #4c4a43 30%, rgba(0, 0, 0, 0) 31%), linear-gradient(
      110deg,
      rgba(0, 0, 0, 0) 50%,
      #778150 51%,
      #778150 55%,
      rgba(0, 0, 0, 0) 56%
    ), linear-gradient(to top, #778150 60%, rgba(0, 0, 0, 0) 61%);
  transform: rotate(7deg);
}

5.《森林夜色》：才能做出让人眼前一亮的效果

<div id="chistmas-night">
  <div christmas>
    <div circle>
      <div moon></div>
      <div decor>
        <div floor></div>
        <div mountain></div>
        <div mountain></div>
        <div mountain></div>
        <div mountain></div>
        <div mountain></div>
        <div trees></div>
      </div>
    </div>
  </div>
</div>

<div class="item_1">
  <button id="super-burger">
    <span burger-of-the-year></span>
  </button>
</div>

<!-- 

  Ok normally you can do that without SVG, just with <clip-path> property but i'm a f*** lazyboy ( '-' ) and it's more faster like that.

Ctrl + Shift + ] for fold this s****

-->
<div id="HollyMolly">
  <svg width="0%" height="0%">
    <defs>
      <clipPath id="circle">
        <path
          d="M48.548,164.957l-47.171,0c-3.147,-6.548 0.014,-12.263 6.734,-13.928c-0.118,-11.831 5.95,-16.627 18.323,-15.973c0.405,-5.372 5.511,-7.064 10.688,-4.961c12.088,-16.788 37.816,-7.681 37.307,4.961c14.628,-5.842 21.724,0.634 26.362,11.129c2.682,-0.054 4.983,0.195 6.947,0.714c8.212,-15.387 17.839,-29.905 28.709,-43.382l12.382,0c0.177,-3.231 -0.617,-6.988 -3.978,-8.398l47.737,0c0.465,-11.18 -8.196,-16.459 -22.084,-16.176c5.206,-4.342 0.699,-11.353 0,-10.746c48.4,-42.035 111.577,-67.492 180.653,-67.492c28.68,0 56.343,4.388 82.354,12.53c-1.349,1.37 -2.622,2.947 -3.797,4.745c-6.537,-2.926 -23.847,8.707 -24.358,16.183c-3.857,-2.721 -16.95,-2.835 -15.443,11.14c-17.207,-1.741 -18.471,15.707 -6.014,22.551l120.649,0c1.401,-6.038 7.065,-15.358 21.689,-14.309c8.591,-16.291 31.843,-12.444 31.342,0c14.629,-5.843 21.725,0.633 26.362,11.129c13.886,-0.283 17.561,7.589 17.098,18.772l-53.031,0c44.392,45.276 73.306,105.775 78.145,172.9l-2.066,1.323l0,8.393c-2.597,0.831 -3.819,-0.383 -4.547,-2.331c-0.892,1.925 0.435,4.634 2.936,7.652l-4.685,-3.133l2.751,3.984l1.213,4.189c0,0 -0.49,2.163 -1.213,1.777c-0.564,-0.301 -2.37,-4.95 -2.751,-5.966c-0.602,-1.607 -0.161,3.935 -0.602,3.479c-1.394,-1.444 -2.559,-3.433 -2.524,-6.037l-1.119,3.614c-0.656,2.791 1.42,7.013 3.023,9.359c0,0 -6.257,-4.625 -6.306,-7.109c-1.229,4.438 0.442,6.863 4.402,9.429c-2.241,1.19 -4.361,0.759 -6.491,0.459c2.49,1.767 6.126,2.998 9.617,3.246c-1.48,0.838 -3.51,0.652 -5.79,0c1.082,2.063 2.965,2.953 5.79,2.462c0.128,1.381 -0.743,2.239 -3.126,2.303l4.875,5.606c-2.189,-1.222 -4.311,-2.594 -5.994,-4.941c0.433,2.838 1.245,5.609 2.238,8.349c-1.579,-1.258 -2.567,-2.937 -2.951,-5.049l-0.832,6.178c-0.558,-3.735 -1.709,-7.77 -0.814,-10.143l-0.924,-2.303c-0.863,2.774 -1.059,5.401 -0.71,7.909l-1.379,-4.128c-1.885,6.372 3.342,15.814 5.372,15.319l0,1.468c-2.679,-1.075 -4.653,-3.307 -6.222,-5.89c0.006,2.991 1.41,6.716 4.677,11.415c-5.253,-2.874 -5.93,-8.454 -8.739,-13.647l0,2.232l3.501,7.969l-3.501,-3.547l4.912,8.433l0,1.477c-1.709,-0.055 -3.069,-1.14 -4.259,-2.73c-0.107,1.096 1.366,3.969 2.848,5.973c0,0 -3.736,-1.592 -5.724,-1.727c-2.001,-0.136 -6.143,0.625 -6.282,0.913c-0.139,0.288 3.812,0.162 5.449,0.814c1.637,0.652 3.279,1.852 4.372,3.097c1.075,1.224 2.185,4.371 2.185,4.371l-2.185,8.926c0,0 -5.465,-2.55 -9.108,-4.736c-3.643,-2.186 -8.197,0 -8.197,0c0.693,-2.864 0.884,-5.72 0,-8.561c-1.206,1.885 -2.609,3.091 -4.446,2.801l-1.657,-2.896l1.657,-9.162l-4.115,1.44l1.586,-6.965l-2.629,1.06l1.043,-5.222l-2.346,5.222l0,-8.365c0,0 -1.909,-4.043 -2.291,-3.07c-0.382,0.973 0,8.907 0,8.907c-2.19,-0.152 -3.769,-1.017 -4.653,-2.694c-0.106,0.637 1.481,4.294 2.193,7.002c0.626,2.378 -3.049,-2.328 -3.049,-2.328c0,0 1.821,4.299 2.195,6.453c0.198,1.141 -1.549,0.891 -3.311,0c-1.84,-0.931 3.894,5.569 1.972,7.817c-1.968,1.074 -3.41,0.346 -4.638,-1.113c-0.533,4.14 0.287,7.7 2.666,10.591c-2.042,2.487 -3.71,2.117 -5.251,0.774c-2.49,3.605 -1.937,7.138 0,10.637l-5.266,0.918l-1.172,-8.51l-4.472,-3.045l0,8.785l-2.814,5.189l-4.918,4.283l-3.072,20.399l-10.817,0l-2.55,-7.514l-4.736,-5.963l-4.372,5.963l-4.554,-3.049l-2.185,-6.375l-3.461,9.424l-4.816,-5.204l-0.955,-10.182l-1.91,2.501l-1.609,-5.88l0,7.385l-1.592,-1.505l1.592,3.461l0,6.375c0,0 -5.1,2.55 -5.1,3.049c0,0.499 -3.755,-7.15 -3.755,-7.15l0,9.378l-4.52,5.286l0,6.603l-12.864,2.96l-4.668,2.774l-5.009,2.565l-9.563,0l-1.393,-2.565l-4.045,-2.774l-8.837,-1.443l-3.498,1.443l-7.67,0l-7.371,4.531l-5.468,5.101l-3.861,0l-5.542,3.78l-4.28,-1.74l-2.746,1.74l-0.827,2.579l-3.031,1.122l-1.671,3.011l-8.902,2.081l-1.395,4.077l-3.923,1.789l-8.286,0.622l-2.359,2.797l-6.987,2.132c0,0 -2.016,5.88 -2.039,5.918l11.385,0c7.119,14.23 64.973,14.592 64.973,14.592l3.498,7.869c22.494,5.531 33.515,10.291 33.515,10.291l8.188,8.665l-8.188,5.234l5.11,3.185c34.947,-3.634 48.803,4.156 54.273,10.443c-30.901,26.8 -67.814,46.846 -108.433,57.833l-30.43,-16l-5.674,-6.574l-8.546,0l-12.535,-16.648l-25.157,-2.837l-7.036,-5.371l-7.42,0l-2.914,-2.004c0,0 -11.853,-3.331 -11.84,-3.279l-7.468,0l-5.1,-4.371l-2.186,-2.55l-16.313,-2.244l-8.771,-6.398l-29.156,2.813l-13.318,-4.918l-0.634,-5.844l1.154,-3.744l-1.907,1.895l-0.809,-5.101l-2.033,5.681l1.228,2.195l-3.016,-1.868l1.274,3.376l-0.949,3.41l-18.856,0l4.253,-4.918l0,-2.775l-1.726,0l0,-1.895l-1.6,1.145l2.197,-4.351l-3.124,3.206l-1.867,-2.468l1.867,-5.109l3.124,-2.186c0,0 2.003,-6.427 1.129,-6.439c-0.194,-0.002 -4.344,5.36 -5.213,4.798c-0.498,-0.322 0,-3.168 0,-3.168c0,0 1.415,-0.49 3.487,-2.56c0.359,-0.358 1.656,-5.657 0.973,-4.957c-2.28,2.333 -7.417,1.36 -6.915,1.187c5.25,-1.811 5.733,-7.847 5.005,-7.488c-3.78,1.866 -9.078,3.598 -8.287,2.133c0.332,-0.615 4.584,-3.264 4.83,-3.763c0.618,-1.255 0,-1.018 0,-1.018l-6.77,2.648c1.808,-2.272 2.71,-4.902 2.579,-7.939c-1.047,2.357 -2.643,4.462 -4.799,6.309l1.121,-3.933c0.699,-4.604 1.068,-10.906 0,-15.659l-1.121,2.099c0.247,3.791 -0.344,7.507 -1.374,11.184l-0.895,-2.933l0.895,-9.728l-1.905,3.493c0,0 -0.281,-11.946 -0.665,-12.062c-0.384,-0.116 -1.638,11.366 -1.638,11.366c-1.479,0.142 -2.69,-0.615 -3.789,-1.749c-0.021,3.55 1.272,4.674 2.676,7.14l-4.185,-2.51l-0.531,1.628l2.04,7.096l-4.632,-6.214l-1.432,0c0.003,0.044 4.022,9.731 4.024,9.764c-2.467,0.576 -3.973,-0.07 -5.241,-1.019l-0.854,1.019l3.503,5.537c-1.296,2.329 -3.857,1.415 -5.568,0c0.639,3.442 2.802,5.162 5.568,6.2c-2.686,0.54 -5.349,0.756 -7.9,-0.662c2.024,2.892 2.327,5.352 2.332,5.391l-4.372,1.895c-2.391,1.71 -4.735,2.05 -6.994,0c-1.213,1.686 -1.176,3.386 0,5.1c-1.707,0.391 -3.253,0.061 -4.518,-1.528c-0.492,2.476 -0.444,4.392 0,5.899c-4.353,0.822 -7.89,0.705 -9.035,-2.165l5.245,-4.392c-3.321,-0.344 -4.828,-1.412 -5.245,-2.914c4.151,-0.221 5.027,-1.626 5.975,-3.005c-0.516,-0.111 -5.537,0.903 -5.975,0c-0.377,-0.778 0,-2.387 0,-2.387l1.544,-1.894c0.37,1.433 14.378,1.21 16.612,0c-4.653,-1.026 -6.993,-2.329 -6.789,-3.935c0,0 7.31,-0.583 9.18,-1.603c1.451,-0.791 2.04,-4.519 2.04,-4.519c-3.957,0.196 -7.22,1.017 -9.034,0c-1.213,-0.411 -1.176,-2.418 0,-3.933l7.479,-10.108l1.555,-2.132l-2.04,-0.781c-5.455,4.147 -12.193,6.371 -20.547,6.172c4.499,-1.494 8.214,-3.966 11.367,-7.14c-5.513,0.307 -10.737,0.399 -15.301,0c-5.877,-0.579 -6.518,-3.498 0,-9.617c4.167,1.15 8.025,0.656 11.853,0c-3.037,-0.616 -5.953,-1.487 -8.562,-3.011c5.624,-1.388 9.602,-3.899 12.01,-7.481l0,-2.214c-1.894,2.027 -3.987,3.735 -7.141,3.75l1.749,-2.917l5.392,-3.72l0.625,-1.757l-2.323,0l-5.443,3.943l-4.226,4.955c-2.434,0.696 -2.16,-0.19 -0.643,-4.254l3.745,-4.644c0,0 2.552,-4.498 1.124,-4.217c-1.488,0.293 -6.801,4.701 -10.054,5.974c-2.798,1.034 -2.808,-2.665 -1.749,-4.531c5.629,-2.845 9.066,-6.967 11.803,-11.498l0,-3.351l-10.054,9.157l5.828,-9.157c-1.841,2.665 -4.267,4.797 -7.577,6.12l0,-4.529l1.749,-3.486c0,0 6.977,-6.273 8.014,-8.597c-4.075,2.859 -7.42,4.867 -9.763,5.683c3.054,-2.447 5.657,-5.06 7.577,-7.927c-2.528,0.976 -5.055,1.818 -7.577,2.244l2.956,-4.621c0,0 4.636,-4.081 5.407,-5.88c0.652,-1.523 -0.786,-4.909 -0.786,-4.909c-2.308,4.414 -4.614,5.28 -7.577,6.506l0,-3.337c6.22,-8.475 7.381,-11.356 6.934,-12.328c-0.384,-0.835 -6.204,2.879 -6.204,2.879c-1.289,3.242 -2.236,4.431 -5.102,5.66l-1.076,-3.803c3.651,-3.357 5.451,-8.35 7.197,-13.392c-2.713,3.237 -5.482,5.366 -8.306,6.412c3.638,-3.878 5.566,-8.261 4.371,-7.43c-2.621,1.821 -6.981,2.724 -6.206,2.243c1.867,-1.156 5.111,-3.748 4.891,-5.041c-1.758,2.386 -4.932,2.143 -5.92,1.37c3.213,-2.618 5.519,-5.799 5.92,-10.162c-0.908,0.65 -3.515,1.205 -4.891,0.761l-1.945,-0.761c3.57,-0.597 7.041,-4.122 5.965,-3.547c-1.438,0.77 -5.028,1.964 -4.02,0.949c2.497,-2.515 4.156,-10.144 4.02,-9.856c-2.976,6.313 -6.415,8.154 -8.961,8.907c-2.355,0.698 -6.169,-0.749 -4.481,-0.98c3.288,-0.45 5.758,-4.625 5.945,-5.246c0.294,-0.971 -3.627,1.861 -5.162,1.804c1.805,-4.011 2.072,-5.543 1.655,-6.769c-1.206,1.508 -2.758,2.229 -4.603,2.284c1.379,-1.814 1.978,-4.012 2.165,-6.412c0,0 -4.219,6.777 -4.781,0c-0.201,-2.423 -2.107,-8.976 -2.107,-8.976c0.006,0.037 -0.81,2.84 -0.573,5.012c0.208,1.912 0.466,6.995 0,7.578c-0.22,0.275 -2.548,-3.143 -2.5,-2.545c0.054,0.668 2.5,6.467 2.5,6.467l-2.5,4.122c-1.297,0.407 -2.828,-0.59 -4.592,-2.993c-0.007,1.993 0.68,3.88 1.969,5.674c-1.301,-0.716 -2.171,-1.261 -3.759,-3.442c-1.503,-2.064 -1.506,-5.434 -2.215,-4.485c-1.32,1.765 -0.073,11.974 3.205,15.9c0,0 -2.183,0.862 -7.286,-5.525c-1.216,-1.523 1.337,5.712 1.337,5.712l2.744,3.498c-1.082,1.003 -2.48,0.864 -4.081,0c1.29,2.061 3.239,3.496 5.684,4.459l0.612,2.243c-1.858,-0.516 -4.318,-2.16 -6.947,-5.041c-0.469,-0.513 0.651,3.816 0.651,3.816l5.684,10.347c0,0 -1.106,1.15 -7.432,-2.36c-0.846,-0.47 1.748,3.548 1.748,3.548c0,0 -6.61,-5.392 -6.12,-4.448c0.49,0.943 9.06,10.108 9.06,10.108l1.499,3.789c-4.418,0.468 -7.253,-0.324 -9.347,-3.169l-2.378,-0.62c2.583,5.26 5.639,9.921 9.327,13.786l-2.041,2.244c-4.065,-0.805 -9.565,-5.512 -10.277,-5.795c-0.962,-0.382 5.369,6.909 5.369,6.909c-0.41,0.325 -1.212,0.978 -1.212,0.978c-0.702,0.202 -4.053,-3.167 -4.157,-3.252c-0.261,-0.211 2.46,4.003 2.991,4.22l2.77,2.623l-0.875,4.809l-5.746,-4.214c-9.636,-28.06 -14.866,-58.16 -14.866,-89.471c0,-39.984 8.529,-77.992 23.867,-112.301c-0.769,0.24 -1.56,0.517 -2.38,0.835l-0.392,0c0.293,-12.561 -25.273,-21.523 -37.312,-4.805c-5.124,-2.082 -10.18,-0.445 -10.674,4.805Z"
        />
      </clipPath>
    </defs>
  </svg>
  <svg width="0%" height="0%">
    <defs>
      <clipPath id="mountain_1">
        <path
          d="M89.926,11.547l1.527,6.379l20.803,0l3.083,-1.108l1.516,-7.517l0.967,-2.764l1.56,11.389l3.484,2.399l0,-2.399l2.265,-2.861l0,4.06l3.412,0l2.477,-4.06l4.304,-2.769l0,4.522l3.484,1.108l4.443,1.199l4.584,-1.199l1.427,-2.861l1.276,2.861l1.579,1.199l1.588,0l2.701,-5.103l0,5.103l2.765,0l2.549,-1.199l5.836,0l6.621,1.199l10.978,0l1.388,-5.103l1.311,5.103l1.526,0l0.593,-6.045l2.531,4.846l4.19,0l1.391,-3.904l2.25,1.043l2.359,-5.764l1.728,5.764l2.074,-6.549l2.158,7.298l3.325,2.112l5.843,1.199l4.094,1.2l5.924,-1.2l19.279,0l13.476,1.2l5.172,0l0,7.914l-15.517,0l-26.679,0l-9.528,0l-19.22,0l-6.969,0l-8.886,0l-8.619,0l-8.629,0l-5.314,0l-2.701,0l-1.588,0.695l-2.855,0.723l-6.696,0l-6.241,0l-1.001,-1.418l-10.193,0l-8.276,0l-6.261,3.172l-6.23,0l-7.518,0l-7.867,-0.712l-12.55,0.712l-7.208,-0.712l-8.954,-0.826l-8.475,0.826l-51.189,0.712l0,-7.218l0,-23.678l5.887,4.181l9.695,18.649l6.427,-1.865l4.708,1.259l1.093,-3.614l1.388,1.2l1.312,2.208l6.022,-0.328l1.907,-4.279l0,1.93l1.6,-4.042l2.065,6.087l7.746,-0.421l8.999,-0.49l5.522,-0.301l4.247,-2.763l2.444,2.399l4.764,-2.399l6.082,1.199l4.474,-0.83l0.974,-3.23l1.02,-1.043l0.947,-2.475Z"
        />
      </clipPath>
    </defs>
  </svg>
  <svg width="0%" height="0%">
    <defs>
      <clipPath id="mountain_2">
        <path
          d="M229.111,0.416l3.636,0l8.83,3.766l7.012,4.935l12.337,0l4.678,1.319l0,40.104l-122.847,0l-6.859,-1.879l-135.415,0l0,-36.579l0.523,-0.109l3.272,1.169l2.246,1.818l1.206,0l1.617,0.781l1.379,1.742l2.234,0l3.072,-0.965l1.228,2.727l-2.213,3.347l0,0.863l3.347,-4.21l0.812,-2.727l1.49,0.965l0,3.58l1.198,1.529l0.749,2.497l4.298,4.545l15.796,4.726l5.594,-2.129l4.142,-2.597l4.711,0l1.704,4.726l4.511,0l1.2,3.196l1.813,1.947l3.484,0l3.544,4.077l5.216,-4.077l2.394,1.258l-2.394,6.221l64.101,0l1.974,-3.402l1.662,-4.077l1.766,-5.143l5.116,-2.129l2.078,-2.597l1.818,-4.545l15.583,0l3.376,2.207l4.934,0l5.325,2.338l0,-4.545l-5.325,-3.117l-2.986,0l0,-2.727l-1.948,-2.727l0,-9.09l-1.167,-1.947l-2.209,0l-0.738,-1.299l2.947,-1.502l2.216,2.801l2.125,0l5.396,3.636l6.233,4.025l2.602,3.376l3.37,-1.558l-0.981,-4.567l0.981,-0.786l2.339,2.366l0.707,-1.58l-1.915,-3.924l1.915,0l3.541,6.673l3.138,0l1.437,1.818l1.825,0l3.766,1.558l1.299,2.727l8.44,0l3.247,-2.727l2.467,0l0,-16.102Z"
        />
      </clipPath>
    </defs>
  </svg>
  <svg width="0%" height="0%">
    <defs>
      <clipPath id="mountain_3">
        <path
          d="M100.464,41.115l0,4.433l6.648,0l2.77,-2.217l3.435,-2.216l4.765,2.216l3.103,2.217l3.324,-2.217l1.441,-5.762l3.324,-1.44l4.432,-2.023l2.217,0l1.662,-6.399l2.438,-2.77l8.421,0l2.992,2.77l4.765,3.456l6.094,2.943l2.771,-1.523l0,-4.876l-2.771,-2.77l0,-4.433l2.771,-2.437l2.216,-4.654l1.33,-3.879l2.327,-1.883l1.108,0l0,-3.436l1.551,-3.767l2.549,3.767l1.329,5.319l1.773,3.879l0,2.548l3.214,2.106l0,2.437l2.438,2.882l1.773,0c0,0 0.997,-0.776 1.44,-2.882c0.443,-2.105 0,-4.543 0,-4.543l2.216,0l1.773,-4.543l0,-1.884l2.216,6.427l1.441,4.543l1.551,-2.437l1.663,-2.106l3.213,2.106l5.097,2.437l2.66,2.882l3.878,1.551l2.216,2.77l3.325,0l2.991,3.456l3.879,1.42l2.105,0l0,-1.42l1.219,-3.456l0,-2.77l-1.219,-6.87l1.219,-2.106l2.992,2.106l7.313,2.437l5.652,2.882l2.327,1.551l3.213,2.77l11.081,0l3.469,1.061l0,36.836l-265.121,0l0,-36.989l8.17,-0.908l8.752,0l8.656,4.013l3.862,5.291l11.108,5.019l3.91,0l3.905,-5.019l6.924,-1.719l3.68,-1.186l4.307,-1.523l8.089,-0.863l7.19,-1.776l6.807,0l0,2.639l-3.041,2.709l-2.088,3.416l-1.678,2.407l5.873,-3.546l8.137,-6.406l8.484,0l-3.809,2.943l0,7.009l2.743,0Z"
        />
      </clipPath>
    </defs>
  </svg>
  <svg width="0%" height="0%">
    <defs>
      <clipPath id="mountain_4">
        <path
          d="M0.483,30.615l7.942,-1.02l8.827,0l8.748,4.405l4,5l11,5l4,0l3.878,-5l7,-1.756l10.122,-3.244l6.649,-1.493l8.351,-2.912l8,1.405l0,3l-4.575,3.244l-3.425,5.263l12,-8.507l5.858,-1.493l8.142,1.493l6.75,5l10.72,-8l4.717,-4.828l8.147,0l4.717,4.828l4.931,-4.828l5.789,0l4.034,4.828l4.542,3l-5.849,-7.828l3.062,-5.575l2.787,-4.288l0,-4.717l2.065,-0.954l0.611,2.033l1.184,-1.079l0,-6.003l3.462,-5.546l4.718,0.756l4.706,11.301l3.149,4.209l2.057,6.228l1.062,0.635l-2.39,-6.863l1.328,-1.517l2.821,0l1.724,-3.2l4.327,0.508l1.362,1.384l1.966,3.641l2.281,1.467l1.517,7.04l0.885,-0.482l-1.289,-6.558l0.404,-2.283l4.717,4.288l5.018,1.516l4.261,3.519l4.654,4.649l7.93,2.226l-8.784,-6.335l0,-5.575l7.075,-2.005l9.307,0l5.671,3.521l7.749,4.059l18.709,0l0,45.136l-265.121,0l0,-40.693Z"
        />
      </clipPath>
    </defs>
  </svg>
  <svg width="0%" height="0">
    <defs>
      <clipPath id="mountain_5">
        <path
          d="M0.559,54.308l0,-29.791l31.835,-12.954l4.172,2.196l13.502,0l2.854,-2.196l5.269,-1.537l5.05,-2.964l2.964,2.964l2.415,-2.964l4.72,0l0,1.318l9.112,7.355l5.049,-8.673l2.415,-3.403l3.294,0l1.976,-2.744l4.281,0l6.449,2.744l2.882,6.367l6.175,1.537l8.37,2.196l8.37,0l9.743,-5.379c0,0 2.744,1.043 3.979,-1.318c1.235,-2.36 5.215,-3.403 5.215,-3.403l4.116,-2.744l3.842,0l3.843,2.744l6.449,0l5.077,4.721c0,0 2.607,2.772 5.214,3.183c2.608,0.412 13.585,2.196 13.585,2.196c0,0 9.88,-0.549 11.801,0c1.013,0.289 2.675,0.273 4.027,0.186l0,40.363l-208.045,0Z"
        />
      </clipPath>
    </defs>
  </svg>
  <svg width="0%" height="0">
    <defs>
      <clipPath id="trees">
        <path
          d="M41.959,76.168c-0.52,-1.049 -0.886,-2.22 -1.135,-3.569c0.893,0.887 1.912,2.007 3.096,2.802c0.33,-0.023 0.699,-0.056 1.05,-0.104c-0.097,-0.245 -0.167,-0.52 -0.215,-0.818c-0.644,-0.069 -1.236,-0.136 -1.235,-0.21c0.004,-0.625 -0.177,-0.959 -0.348,-1.135c-0.099,-0.053 -0.197,-0.115 -0.294,-0.187c0,0 0.143,0.032 0.294,0.187c0.473,0.254 0.973,0.311 1.495,0.299c-0.006,-0.268 -0.001,-0.547 0.01,-0.834c0.135,0.278 0.276,0.55 0.424,0.811c0.223,-0.017 0.448,-0.04 0.678,-0.061c0,0 -3.635,-3.101 -3.796,-3.404c-0.439,-0.831 -0.5,-2.504 -0.5,-2.504c0.422,0.686 3.502,2.801 5.605,3.709c0.583,0.179 1.145,0.267 1.645,0.25c-0.06,-0.368 -0.379,-1.276 -0.508,-1.715l-0.272,-0.106l0.207,-1.722c0,0 -0.428,-0.252 -0.93,-0.571c-1.119,0.156 -2.203,0.087 -3.249,-0.222c0.877,-0.756 1.485,-1.539 1.798,-2.354c-1.575,0.377 -2.818,-0.069 -3.796,-1.172c1.012,0.074 1.637,-0.172 1.998,-0.636l-0.738,-2.294l-3.854,-2.401c0.482,0.016 0.957,-0.014 1.354,-0.604c-1.892,-1.662 -3.322,-3.061 -3.893,-4.96c2.372,2.458 5.224,4.148 8.25,5.564c-1.227,-1.506 -2.597,-3.431 -3.117,-4.465c-0.26,-0.519 0,-1.742 0,-1.742c1.152,2.2 3.535,4.404 5.839,6.207l2.117,0c-0.923,-0.535 -1.326,-1.294 -1.608,-2.105c1.106,0.41 1.8,0.22 2.472,0c-1.749,-0.486 -2.511,-1.535 -2.981,-2.752c1.014,0.438 1.86,0.533 2.538,0.28c-0.353,-0.423 -0.708,-0.849 -1.061,-1.28c-0.041,-0.215 0.769,0.205 1.799,0.802c0.042,-0.042 0.083,-0.085 0.123,-0.131c-3.319,-1.867 -4.837,-3.775 -5.442,-7.057c0.996,0.989 2.197,2.358 3.698,2.778c-0.669,-0.47 -0.808,-1.52 -0.757,-2.778c0.935,1.933 2.306,3.423 3.69,2.714c-0.329,-0.61 -0.551,-1.001 -0.551,-1.001l1.371,0.308c0.088,-0.106 0.176,-0.223 0.264,-0.35c-1.859,-0.984 -2.991,-1.355 -4.017,-3.237c1.493,0.809 3.103,0.928 3.642,0l-1.898,-0.739l0.158,-1.315c0,0 -1.993,-1.173 -1.902,-1.385c0.027,-0.064 1.934,0.193 1.902,0l-1.902,-3.194l0,-1.587l5.293,4.781l0.675,-1.575l0.407,-0.341c-1.419,-0.846 -2.364,-4.191 -2.364,-4.191c1.058,0.973 2.225,1.733 3.609,2.076c-1.23,-2.218 -3.062,-4.238 -4.849,-6.42c-0.084,-0.435 4.418,2.55 4.457,2.385c0.259,-1.088 -2.504,-5.951 -2.504,-5.951l5.154,1.157c0,0 0.968,-0.874 -2.035,-4.003c-0.442,-0.46 -2.554,-1.259 -3.119,-1.587c-0.385,-0.225 3.643,-0.558 3.643,-0.558c0.586,0.332 0.678,-1.544 0,-1.458c-1.405,0.178 -2.399,-3.34 -2.399,-3.34c1.304,1.2 2.827,1.976 4.909,1.671c0,0 -1.895,-3.579 -1.864,-4.643l1.864,1.985c-1.088,-1.183 -1.686,-2.505 -1.843,-3.952c-0.055,-0.106 -0.066,-0.187 -0.021,-0.234c0.006,0.078 0.013,0.156 0.021,0.234c0.485,0.927 4.386,3.778 4.874,2.764c-0.767,-0.224 -2.1,-3.502 -2.079,-3.959c0.015,-0.318 1.116,2.127 1.715,2.071c0,0 -1.431,-3.71 -1.325,-4.175c0.086,-0.374 3.095,1.737 3.178,1.382c0.133,-0.572 -1.246,-3.458 -1.12,-3.976c0.106,-0.44 1.02,1.48 1.12,1.079c0.857,-3.432 0.778,-6.475 1.125,-6.492c0.166,-0.008 0.294,1.152 0.39,3.208c0.062,-0.485 0.132,-0.739 0.21,-0.736c0.346,0.017 0.267,3.06 1.125,6.492c0.1,0.401 1.013,-1.519 1.12,-1.079c0.125,0.518 -1.253,3.404 -1.12,3.976c0.082,0.355 3.091,-1.756 3.177,-1.382c0.107,0.465 -1.325,4.175 -1.325,4.175c0.6,0.055 1.7,-2.389 1.715,-2.071c0.022,0.457 -1.312,3.735 -2.079,3.959c0.488,1.014 4.389,-1.837 4.874,-2.764c0.009,-0.078 0.016,-0.156 0.022,-0.234c0.044,0.047 0.034,0.128 -0.022,0.234c-0.157,1.447 -0.755,2.769 -1.843,3.952l1.865,-1.985c0.03,1.064 -1.865,4.642 -1.865,4.642c2.082,0.306 3.606,-0.47 4.909,-1.67c0,0 -0.993,3.517 -2.399,3.34c-0.677,-0.086 -0.585,1.789 0,1.458c0,0 4.029,0.333 3.643,0.557c-0.565,0.329 -2.676,1.128 -3.118,1.588c-3.004,3.129 -2.036,4.002 -2.036,4.002l0.696,-0.156c0.186,-0.306 0.306,-0.478 0.311,-0.36c0.003,0.062 -0.013,0.166 -0.046,0.301l4.193,-0.941c0,0 -1.093,1.924 -1.84,3.623c0.667,-0.558 1.181,-1.083 1.356,-1.417c0.011,-0.102 0.02,-0.205 0.028,-0.307c0.058,0.061 0.045,0.167 -0.028,0.307c-0.123,1.126 -0.449,2.195 -0.993,3.202c0.302,-0.18 0.646,-0.389 0.998,-0.6l0.023,-0.025l0,0.011c1.192,-0.718 2.455,-1.46 2.41,-1.228c-1.135,1.385 -2.287,2.705 -3.292,4.051c-0.7,1.622 -1.561,3.248 -1.561,3.248c2.728,0.4 4.724,-0.616 6.432,-2.188c0,0 -0.385,1.362 -1.032,2.568l2.224,-2.009l0,1.587l-1.902,3.194c-0.032,0.193 1.874,-0.064 1.902,0c0.07,0.162 -1.078,0.885 -1.623,1.217c1.205,0.143 2.304,0.318 2.061,0.459c-0.382,0.222 -1.302,0.608 -2.183,1.012l0.001,0.012l-0.165,0.064c-0.654,0.303 -1.266,0.612 -1.595,0.866c0.641,0.715 2.122,0.557 3.504,-0.191c-1.027,1.882 -2.158,2.253 -4.017,3.237c1.718,2.503 3.593,0.77 4.774,-1.672c0.043,1.062 -0.049,1.975 -0.481,2.517l0.162,-0.036c0,0 -0.038,0.066 -0.106,0.188c1.347,-0.513 2.444,-1.753 3.366,-2.669c-0.606,3.283 -2.123,5.191 -5.442,7.058c0.761,0.874 1.897,0.978 3.398,0.329c-0.053,0.137 -0.11,0.273 -0.172,0.406c0.891,-0.507 1.553,-0.834 1.515,-0.64c-0.89,1.087 -1.789,2.144 -2.65,3.195c0.242,-0.034 0.506,-0.101 0.798,-0.209c-0.281,0.811 -0.684,1.57 -1.607,2.105l2.116,0c2.305,-1.803 4.688,-4.007 5.839,-6.207c0,0 0.261,1.223 0,1.741c-0.519,1.035 -1.89,2.96 -3.117,4.466c3.027,-1.416 5.879,-3.106 8.251,-5.564c-0.572,1.899 -2.002,3.298 -3.893,4.959c0.397,0.59 0.872,0.621 1.353,0.605l-3.854,2.401l-0.133,0.413l0.528,-0.476l0,2.079l-0.458,0.769c0.34,0.131 0.775,0.185 1.323,0.145c-0.61,0.689 -1.324,1.121 -2.158,1.257l-0.786,1.319c0.215,0.258 0.46,0.512 0.735,0.763c0.645,-0.042 1.325,-0.112 1.344,-0.068c0.119,0.278 -2.492,1.815 -2.492,1.815l0.184,1.529c1.698,-0.99 3.371,-2.22 3.673,-2.712c0,0 -0.061,1.672 -0.5,2.504c-0.083,0.156 -1.09,1.058 -2.046,1.893c0.391,-0.135 0.789,-0.311 1.181,-0.524c-0.516,0.946 -1.052,1.6 -1.654,2.12c0.463,-0.003 0.908,-0.073 1.33,-0.3c0.151,-0.155 0.295,-0.187 0.295,-0.187c-0.097,0.072 -0.195,0.134 -0.295,0.187c-0.171,0.176 -0.352,0.51 -0.347,1.135c0.001,0.162 -2.816,0.291 -2.853,0.469c-0.111,0.537 2.457,0.676 3.259,0.706c0.461,-0.596 0.885,-1.311 1.256,-2.078c0.067,1.648 -0.115,3.024 -0.991,3.639c1.965,-0.549 3.539,-2.343 4.845,-3.639c-0.794,4.301 -2.782,6.8 -7.13,9.246c0.997,1.146 2.485,1.281 4.452,0.431c-0.615,1.594 -1.614,2.969 -3.905,3.606c0.881,0.288 1.789,0.536 3.238,0c-0.368,1.063 -0.896,2.057 -2.105,2.758l2.772,0c3.02,-2.363 6.142,-5.25 7.65,-8.133c0,0 0.342,1.602 0,2.282c-0.68,1.356 -2.476,3.878 -4.084,5.851c3.966,-1.855 7.702,-4.069 10.81,-7.29c-0.749,2.488 -2.622,4.32 -5.1,6.498c0.52,0.773 1.142,0.813 1.773,0.792l-5.049,3.146l-0.967,3.005c0.473,0.608 8.018,0.097 9.343,0c-1.281,1.445 -9.635,2.862 -11.698,2.369c0.409,1.067 1.206,2.094 2.355,3.084c-1.816,0.537 -3.718,0.52 -5.7,0c0.068,1.049 0.138,2.091 0.212,3.128c0.015,0.212 -0.931,2.728 -0.721,2.762c1.791,0.292 8.256,-3.882 9.378,-5.254l0.104,-0.142c-0.027,0.043 -0.062,0.09 -0.104,0.142l-3.169,4.36l6.016,0.894l-3.635,2.2l7.014,0c-0.432,-0.523 -0.877,-1.049 -1.319,-1.588c-0.049,-0.256 1.954,1.018 2.93,1.588l0.525,0c-0.137,-1.169 -1.943,-4.349 -1.943,-4.349l3.989,0.896c0,0 0.75,-0.676 -1.575,-3.098c-0.342,-0.356 -1.977,-0.974 -2.414,-1.229c-0.298,-0.173 2.82,-0.431 2.82,-0.431c0.453,0.256 0.524,-1.196 0,-1.129c-1.088,0.137 -1.857,-2.585 -1.857,-2.585c1.009,0.929 2.188,1.529 3.8,1.293c0,0 -1.467,-2.77 -1.444,-3.593l1.444,1.536c-0.842,-0.916 -1.305,-1.939 -1.427,-3.059c-0.043,-0.082 -0.051,-0.145 -0.017,-0.181c0.005,0.06 0.011,0.121 0.017,0.181c0.375,0.717 3.395,2.924 3.773,2.139c-0.594,-0.173 -1.626,-2.71 -1.609,-3.064c0.011,-0.246 0.863,1.646 1.327,1.603c0,0 -1.108,-2.872 -1.026,-3.232c0.067,-0.289 2.396,1.345 2.46,1.07c0.103,-0.442 -0.964,-2.676 -0.867,-3.077c0.082,-0.341 0.789,1.145 0.867,0.835c0.664,-2.657 0.602,-5.012 0.87,-5.025c0.129,-0.006 0.228,0.892 0.302,2.483c0.048,-0.375 0.102,-0.572 0.163,-0.57c0.268,0.013 0.207,2.369 0.871,5.025c0.077,0.31 0.784,-1.175 0.866,-0.835c0.098,0.401 -0.969,2.635 -0.866,3.077c0.064,0.275 2.393,-1.359 2.459,-1.069c0.083,0.36 -1.025,3.232 -1.025,3.232c0.464,0.042 1.315,-1.85 1.327,-1.604c0.016,0.354 -1.016,2.891 -1.609,3.064c0.378,0.785 3.397,-1.421 3.772,-2.139c0.007,-0.06 0.012,-0.12 0.017,-0.181c0.035,0.036 0.026,0.099 -0.017,0.181c-0.121,1.12 -0.584,2.143 -1.426,3.059l1.443,-1.536c0.023,0.823 -1.443,3.593 -1.443,3.593c1.611,0.236 2.79,-0.364 3.8,-1.293c0,0 -0.77,2.723 -1.857,2.585c-0.525,-0.066 -0.454,1.385 0,1.129c0,0 3.118,0.258 2.819,0.431c-0.437,0.255 -2.071,0.873 -2.413,1.229c-2.325,2.422 -1.576,3.098 -1.576,3.098l0.538,-0.121c0.145,-0.237 0.237,-0.37 0.242,-0.279c0.002,0.049 -0.011,0.129 -0.037,0.233l3.246,-0.728c0,0 -0.846,1.489 -1.424,2.804c0.516,-0.432 0.914,-0.838 1.049,-1.097c0.009,-0.079 0.016,-0.158 0.022,-0.237c0.045,0.047 0.035,0.129 -0.022,0.237c-0.094,0.872 -0.347,1.699 -0.768,2.479c0.234,-0.14 0.5,-0.301 0.772,-0.465l0.018,-0.019l0,0.009c0.923,-0.556 1.9,-1.131 1.865,-0.951c-0.878,1.072 -1.77,2.094 -2.548,3.136c-0.541,1.255 -1.208,2.514 -1.208,2.514c2.112,0.309 3.656,-0.477 4.979,-1.694c0,0 -0.298,1.054 -0.799,1.988l1.721,-1.555l0,1.228l-1.472,2.472c-0.025,0.15 1.451,-0.049 1.472,0c0.054,0.126 -0.834,0.685 -1.256,0.943c0.933,0.11 1.783,0.245 1.595,0.355c-0.295,0.172 -1.008,0.47 -1.69,0.783l0.001,0.009l-0.127,0.05c-0.506,0.234 -0.98,0.473 -1.234,0.67c0.495,0.553 1.642,0.431 2.711,-0.148c-0.795,1.457 -1.67,1.744 -3.109,2.505c1.33,1.938 2.781,0.596 3.695,-1.293c0.033,0.821 -0.038,1.528 -0.372,1.948l0.125,-0.028c0,0 -0.029,0.051 -0.081,0.145c1.042,-0.397 1.891,-1.356 2.604,-2.065c-0.468,2.541 -1.643,4.017 -4.212,5.462c0.59,0.677 1.469,0.757 2.631,0.255c-0.041,0.106 -0.085,0.211 -0.133,0.314c0.689,-0.392 1.201,-0.645 1.172,-0.495c-0.689,0.842 -1.385,1.659 -2.051,2.473c0.187,-0.027 0.391,-0.078 0.618,-0.162c-0.218,0.628 -0.53,1.216 -1.244,1.63l1.638,0c1.784,-1.396 3.628,-3.102 4.519,-4.805c0,0 0.202,0.947 0,1.348c-0.402,0.801 -1.463,2.291 -2.412,3.457c2.342,-1.096 4.55,-2.404 6.386,-4.307c-0.443,1.47 -1.55,2.552 -3.014,3.839c0.308,0.456 0.675,0.48 1.048,0.468l-2.983,1.858l-0.103,0.32l0.408,-0.369l0,1.609l-0.354,0.595c0.264,0.102 0.6,0.144 1.024,0.113c-0.472,0.533 -1.025,0.868 -1.67,0.973l-0.608,1.021c0.166,0.199 0.356,0.396 0.568,0.59c0.5,-0.032 1.026,-0.086 1.04,-0.053c0.093,0.216 -1.928,1.405 -1.928,1.405l0.142,1.184c1.314,-0.767 2.609,-1.718 2.843,-2.1c0,0 -0.047,1.295 -0.387,1.939c-0.064,0.121 -0.844,0.819 -1.584,1.465c0.303,-0.105 0.611,-0.241 0.914,-0.405c-0.399,0.732 -0.814,1.238 -1.28,1.641c0.359,-0.003 0.703,-0.057 1.03,-0.232c0.117,-0.121 0.228,-0.146 0.228,-0.146c-0.075,0.056 -0.151,0.104 -0.228,0.146c-0.132,0.136 -0.273,0.394 -0.269,0.877c0.001,0.126 -2.18,0.226 -2.208,0.364c-0.086,0.415 1.901,0.523 2.522,0.547c0.357,-0.462 0.685,-1.015 0.973,-1.609c0.052,1.276 -0.089,2.341 -0.768,2.817c1.522,-0.426 2.74,-1.814 3.75,-2.817c-0.33,1.792 -0.929,3.18 -1.936,4.375l10.643,2.75c0.118,-0.116 0.234,-0.233 0.348,-0.352c-0.041,0.138 -0.087,0.273 -0.137,0.406l0.247,0.064l4.318,1.089c-0.199,-0.226 -0.349,-0.46 -0.431,-0.733c0.347,0.359 0.732,0.656 1.142,0.913l0.747,0.188c-0.229,-0.306 -0.439,-0.618 -0.536,-0.811c-0.069,-0.137 0,-0.459 0,-0.459c0.269,0.514 0.794,1.03 1.333,1.471l0.651,0.164l0.111,0c-0.243,-0.141 -0.349,-0.341 -0.423,-0.554c0.291,0.107 0.474,0.058 0.651,0c-0.461,-0.128 -0.662,-0.405 -0.785,-0.725c0.267,0.115 0.49,0.14 0.668,0.073c-0.093,-0.111 -0.186,-0.223 -0.279,-0.337c-0.011,-0.056 0.202,0.054 0.474,0.211c0.011,-0.01 0.021,-0.022 0.032,-0.034c-0.874,-0.492 -1.274,-0.994 -1.434,-1.859c0.263,0.261 0.579,0.621 0.975,0.732c-0.177,-0.124 -0.213,-0.401 -0.2,-0.732c0.247,0.509 0.608,0.902 0.972,0.715c-0.086,-0.161 -0.145,-0.264 -0.145,-0.264l0.361,0.081c0.024,-0.028 0.047,-0.058 0.07,-0.092c-0.49,-0.259 -0.788,-0.357 -1.058,-0.853c0.393,0.213 0.817,0.245 0.959,0l-0.5,-0.194l0.042,-0.347c0,0 -0.525,-0.309 -0.501,-0.365c0.007,-0.016 0.509,0.051 0.501,0l-0.501,-0.841l0,-0.418l1.394,1.259l0.178,-0.414l0.107,-0.09c-0.374,-0.223 -0.623,-1.104 -0.623,-1.104c0.279,0.256 0.586,0.456 0.951,0.547c-0.324,-0.585 -0.807,-1.117 -1.277,-1.692c-0.023,-0.114 1.163,0.672 1.174,0.629c0.068,-0.287 -0.66,-1.568 -0.66,-1.568l1.358,0.305c0,0 0.255,-0.231 -0.536,-1.055c-0.117,-0.121 -0.673,-0.331 -0.822,-0.418c-0.101,-0.059 0.96,-0.147 0.96,-0.147c0.154,0.087 0.178,-0.407 0,-0.384c-0.37,0.047 -0.632,-0.88 -0.632,-0.88c0.343,0.316 0.745,0.521 1.293,0.44c0,0 -0.499,-0.942 -0.491,-1.223l0.491,0.523c-0.287,-0.311 -0.444,-0.66 -0.485,-1.041c-0.015,-0.028 -0.018,-0.049 -0.006,-0.062c0.001,0.021 0.003,0.042 0.006,0.062c0.127,0.244 1.155,0.995 1.283,0.728c-0.202,-0.059 -0.553,-0.922 -0.547,-1.043c0.004,-0.083 0.294,0.561 0.452,0.546c0,0 -0.378,-0.977 -0.349,-1.1c0.022,-0.098 0.815,0.458 0.837,0.364c0.035,-0.151 -0.328,-0.911 -0.295,-1.047c0.028,-0.116 0.268,0.39 0.295,0.284c0.226,-0.904 0.205,-1.706 0.296,-1.71c0.044,-0.002 0.078,0.303 0.103,0.845c0.016,-0.128 0.034,-0.195 0.055,-0.194c0.091,0.004 0.07,0.806 0.296,1.71c0.027,0.106 0.267,-0.4 0.295,-0.284c0.033,0.136 -0.33,0.897 -0.295,1.047c0.022,0.094 0.815,-0.462 0.837,-0.364c0.029,0.123 -0.349,1.1 -0.349,1.1c0.158,0.015 0.448,-0.629 0.452,-0.546c0.006,0.121 -0.345,0.984 -0.547,1.043c0.128,0.268 1.156,-0.484 1.283,-0.728c0.003,-0.02 0.005,-0.041 0.006,-0.061c0.012,0.012 0.009,0.033 -0.006,0.061c-0.041,0.381 -0.198,0.73 -0.485,1.041l0.491,-0.522c0.008,0.28 -0.491,1.222 -0.491,1.222c0.548,0.081 0.95,-0.123 1.293,-0.44c0,0 -0.262,0.927 -0.632,0.88c-0.178,-0.022 -0.154,0.472 0,0.384c0,0 1.061,0.088 0.96,0.147c-0.149,0.087 -0.705,0.297 -0.822,0.418c-0.791,0.825 -0.536,1.055 -0.536,1.055l0.183,-0.041c0.05,-0.081 0.081,-0.126 0.082,-0.095c0.001,0.016 -0.003,0.043 -0.012,0.079l1.105,-0.248c0,0 -0.288,0.507 -0.485,0.955c0.176,-0.147 0.311,-0.286 0.357,-0.374c0.003,-0.027 0.006,-0.054 0.008,-0.081c0.015,0.016 0.011,0.044 -0.008,0.081c-0.032,0.297 -0.118,0.578 -0.261,0.844c0.079,-0.048 0.17,-0.103 0.262,-0.158l0.007,-0.007l0,0.003c0.314,-0.189 0.646,-0.385 0.634,-0.323c-0.298,0.364 -0.602,0.712 -0.867,1.067c-0.184,0.427 -0.411,0.855 -0.411,0.855c0.719,0.106 1.244,-0.162 1.694,-0.576c0,0 -0.101,0.359 -0.271,0.676l0.585,-0.529l0,0.418l-0.501,0.842c-0.008,0.051 0.494,-0.017 0.501,0c0.019,0.042 -0.283,0.233 -0.427,0.32c0.317,0.038 0.607,0.084 0.543,0.121c-0.101,0.059 -0.343,0.16 -0.575,0.267l0,0.003l-0.043,0.017c-0.173,0.08 -0.334,0.161 -0.42,0.228c0.168,0.188 0.558,0.147 0.922,-0.05c-0.27,0.495 -0.568,0.593 -1.058,0.852c0.453,0.66 0.947,0.203 1.258,-0.44c0.011,0.28 -0.013,0.52 -0.127,0.663l0.043,-0.01c0,0 -0.01,0.018 -0.028,0.05c0.355,-0.135 0.644,-0.462 0.887,-0.703c-0.16,0.865 -0.56,1.367 -1.434,1.859c0.201,0.23 0.5,0.258 0.895,0.087c-0.014,0.036 -0.029,0.072 -0.045,0.107c0.235,-0.134 0.409,-0.22 0.399,-0.169c-0.235,0.287 -0.471,0.565 -0.698,0.842c0.064,-0.009 0.133,-0.027 0.21,-0.055c-0.074,0.214 -0.18,0.413 -0.423,0.554l0.557,0c0.607,-0.475 1.235,-1.055 1.538,-1.635c0,0 0.069,0.322 0,0.459c-0.136,0.272 -0.497,0.78 -0.821,1.176c0.798,-0.373 1.549,-0.818 2.174,-1.465c-0.151,0.5 -0.528,0.868 -1.026,1.306c0.105,0.155 0.23,0.164 0.357,0.159l-1.015,0.633l-0.035,0.109l0.138,-0.126l0,0.548l-0.12,0.202c0.09,0.035 0.204,0.049 0.348,0.039c-0.16,0.181 -0.349,0.295 -0.568,0.331l-0.207,0.347c0.057,0.068 0.121,0.135 0.194,0.201c0.169,-0.011 0.349,-0.029 0.353,-0.018c0.032,0.073 -0.656,0.478 -0.656,0.478l0.048,0.403c0.448,-0.261 0.888,-0.584 0.968,-0.714c0,0 -0.016,0.44 -0.132,0.659c-0.021,0.042 -0.287,0.279 -0.539,0.499c0.103,-0.036 0.208,-0.082 0.311,-0.138c-0.135,0.249 -0.277,0.422 -0.435,0.559c0.122,-0.001 0.239,-0.02 0.35,-0.079c0.04,-0.041 0.078,-0.05 0.078,-0.05c-0.026,0.019 -0.052,0.036 -0.078,0.05c-0.045,0.046 -0.092,0.134 -0.091,0.298c0,0.043 -0.742,0.077 -0.752,0.124c-0.029,0.142 0.647,0.178 0.859,0.186c0.121,-0.157 0.233,-0.345 0.331,-0.547c0.017,0.434 -0.031,0.796 -0.262,0.958c0.518,-0.144 0.933,-0.617 1.277,-0.958c-0.209,1.133 -0.733,1.791 -1.878,2.435c0.262,0.302 0.654,0.338 1.172,0.114c-0.162,0.42 -0.425,0.782 -1.028,0.95c0.232,0.076 0.471,0.141 0.853,0c-0.092,0.265 -0.222,0.515 -0.508,0.697l0.02,0.029l0.663,0c0.796,-0.622 1.618,-1.383 2.016,-2.142c0,0 0.09,0.422 0,0.601c-0.18,0.357 -0.653,1.022 -1.076,1.541c1.044,-0.488 2.029,-1.072 2.848,-1.92c-0.198,0.655 -0.691,1.138 -1.344,1.712c0.137,0.203 0.301,0.214 0.467,0.208l-1.33,0.829l-0.255,0.792c0.125,0.16 2.112,0.025 2.462,0c-0.141,0.158 -0.603,0.315 -1.134,0.435l16.393,2.297l-3.359,4.185l-24.476,2.068l-4.119,5.371l-13.712,1.67l-15.696,16.429l11.185,0l18.223,2.969l4.119,3.207l17.437,4.185l7.039,12.437l5.699,0l14.769,11.683l9.351,2.493l4.326,10.635l9.056,3.701l15.289,0l7.559,4.105l0,17.996l-243.58,0l0,-155.342l-0.65,-0.404c0.22,0.007 0.439,0.005 0.65,-0.054l0,-1.205c-1.557,-1.417 -2.72,-2.708 -3.225,-4.384c0.999,1.035 2.081,1.935 3.225,2.737l0,-5.968l4.956,0c-0.142,-0.183 -0.236,-0.302 -0.236,-0.302c0,0 0.438,0.115 1.103,0.302l1.328,0c-0.646,-1.003 -1.064,-2.151 -1.321,-3.542c0.692,0.687 1.48,1.553 2.397,2.168c0.255,-0.018 0.541,-0.043 0.812,-0.08c-0.074,-0.19 -0.129,-0.402 -0.166,-0.633c-0.499,-0.053 -0.956,-0.105 -0.956,-0.163c0.004,-0.483 -0.137,-0.742 -0.269,-0.878c-0.077,-0.041 -0.153,-0.089 -0.228,-0.145c0,0 0.111,0.025 0.228,0.145c0.366,0.196 0.753,0.241 1.157,0.231c-0.004,-0.207 -0.001,-0.423 0.008,-0.645c0.104,0.215 0.214,0.425 0.328,0.627c0.172,-0.013 0.347,-0.031 0.525,-0.046c0,0 -2.814,-2.401 -2.938,-2.636c-0.34,-0.643 -0.387,-1.938 -0.387,-1.938c0.326,0.531 2.71,2.169 4.338,2.871c0.451,0.139 0.886,0.207 1.273,0.194c-0.047,-0.285 -0.293,-0.988 -0.393,-1.328l-0.21,-0.082l0.16,-1.332c0,0 -0.332,-0.196 -0.72,-0.443c-0.866,0.121 -1.705,0.068 -2.515,-0.171c0.679,-0.585 1.15,-1.192 1.392,-1.822c-1.219,0.291 -2.181,-0.054 -2.938,-0.908c0.783,0.058 1.267,-0.133 1.546,-0.492l-0.571,-1.775l-2.983,-1.859c0.373,0.013 0.74,-0.011 1.048,-0.468c-1.464,-1.286 -2.571,-2.369 -3.014,-3.839c1.836,1.903 4.044,3.211 6.386,4.307c-0.949,-1.165 -2.01,-2.655 -2.412,-3.456c-0.202,-0.402 0,-1.348 0,-1.348c0.891,1.703 2.735,3.408 4.519,4.804l1.638,0c-0.714,-0.414 -1.026,-1.001 -1.244,-1.629c0.856,0.317 1.393,0.17 1.914,0c-1.354,-0.376 -1.944,-1.189 -2.308,-2.13c0.785,0.339 1.44,0.412 1.964,0.216c-0.273,-0.327 -0.547,-0.657 -0.821,-0.99c-0.032,-0.167 0.596,0.159 1.392,0.62c0.033,-0.032 0.065,-0.066 0.096,-0.101c-2.569,-1.445 -3.744,-2.922 -4.212,-5.462c0.771,0.766 1.701,1.825 2.862,2.15c-0.518,-0.364 -0.626,-1.176 -0.586,-2.15c0.724,1.496 1.785,2.649 2.856,2.101c-0.255,-0.473 -0.427,-0.775 -0.427,-0.775l1.062,0.238c0.068,-0.082 0.136,-0.172 0.204,-0.271c-1.439,-0.761 -2.314,-1.048 -3.109,-2.505c1.156,0.626 2.402,0.718 2.819,0l-1.469,-0.572l0.122,-1.018c0,0 -1.543,-0.908 -1.472,-1.072c0.021,-0.05 1.497,0.15 1.472,0l-1.472,-2.472l0,-1.229l4.097,3.701l0.522,-1.219l0.315,-0.264c-1.098,-0.655 -1.829,-3.244 -1.829,-3.244c0.818,0.753 1.722,1.342 2.793,1.607c-0.952,-1.717 -2.37,-3.28 -3.753,-4.969c-0.065,-0.337 3.419,1.973 3.45,1.846c0.2,-0.842 -1.938,-4.607 -1.938,-4.607l3.989,0.896c0,0 0.749,-0.676 -1.576,-3.098c-0.342,-0.356 -1.976,-0.974 -2.413,-1.229c-0.299,-0.174 2.819,-0.431 2.819,-0.431c0.454,0.256 0.525,-1.196 0,-1.129c-1.087,0.137 -1.857,-2.585 -1.857,-2.585c1.01,0.928 2.189,1.529 3.8,1.293c0,0 -1.466,-2.77 -1.443,-3.593l1.443,1.536c-0.842,-0.916 -1.305,-1.939 -1.426,-3.059c-0.043,-0.082 -0.052,-0.145 -0.017,-0.181c0.005,0.06 0.01,0.121 0.017,0.181c0.375,0.717 3.394,2.924 3.772,2.139c-0.593,-0.173 -1.625,-2.71 -1.609,-3.064c0.012,-0.246 0.863,1.646 1.327,1.603c0,0 -1.108,-2.872 -1.025,-3.232c0.066,-0.289 2.395,1.345 2.459,1.07c0.103,-0.443 -0.964,-2.676 -0.866,-3.077c0.082,-0.341 0.789,1.145 0.866,0.835c0.664,-2.657 0.603,-5.012 0.871,-5.025c0.129,-0.006 0.228,0.892 0.302,2.483c0.048,-0.375 0.102,-0.573 0.163,-0.57c0.268,0.013 0.206,2.368 0.87,5.025c0.078,0.31 0.785,-1.175 0.867,-0.835c0.097,0.401 -0.97,2.635 -0.867,3.077c0.064,0.275 2.393,-1.359 2.46,-1.069c0.082,0.36 -1.026,3.232 -1.026,3.232c0.464,0.042 1.316,-1.85 1.327,-1.604c0.017,0.354 -1.015,2.891 -1.609,3.064c0.378,0.785 3.398,-1.421 3.773,-2.139c0.006,-0.06 0.012,-0.12 0.017,-0.181c0.034,0.036 0.026,0.099 -0.017,0.181c-0.122,1.12 -0.585,2.143 -1.427,3.059l1.444,-1.536c0.023,0.823 -1.444,3.593 -1.444,3.593c1.612,0.236 2.791,-0.364 3.8,-1.293c0,0 -0.769,2.723 -1.857,2.585c-0.524,-0.066 -0.453,1.385 0,1.129c0,0 3.118,0.258 2.82,0.431c-0.437,0.255 -2.072,0.873 -2.414,1.229c-2.325,2.422 -1.575,3.098 -1.575,3.098l0.538,-0.121c0.144,-0.237 0.237,-0.37 0.241,-0.279c0.003,0.049 -0.01,0.129 -0.036,0.233l3.246,-0.728c0,0 -0.846,1.489 -1.424,2.804c0.516,-0.432 0.913,-0.838 1.049,-1.097c0.008,-0.079 0.016,-0.158 0.022,-0.238c0.045,0.048 0.034,0.13 -0.022,0.238c-0.095,0.872 -0.347,1.699 -0.768,2.479c0.234,-0.14 0.5,-0.301 0.772,-0.465l0.018,-0.019l0,0.008c0.923,-0.555 1.9,-1.13 1.865,-0.95c-0.878,1.072 -1.77,2.094 -2.548,3.136c-0.542,1.255 -1.208,2.514 -1.208,2.514c1.26,0.184 2.318,-0.021 3.248,-0.476c-0.028,-0.035 -0.043,-0.054 -0.043,-0.054c0,0 0.035,0.009 0.099,0.026c0.606,-0.304 1.157,-0.714 1.674,-1.19c0,0 -0.203,0.719 -0.556,1.496l0.105,0.029l0.125,0.036l1.123,-1.014Zm121.572,82.072l0.006,0.01c0.088,-0.031 0.186,-0.074 0.289,-0.124l-0.295,0.114Zm-1.604,-8.248c-0.009,-0.001 -0.018,-0.001 -0.027,-0.003c-0.084,-0.01 -0.134,0.067 -0.154,0.166l0.181,-0.163Zm-5.967,-0.862l0.102,0.51l0.002,0c0.202,0.114 0.234,-0.533 0,-0.504c-0.035,0.005 -0.07,0.002 -0.104,-0.006Zm-25.602,-5.647l0.018,0.029c0.257,-0.092 0.544,-0.218 0.846,-0.366l-0.864,0.337Zm-4.714,-24.237c-0.026,0 -0.052,-0.002 -0.078,-0.006c-0.249,-0.031 -0.395,0.197 -0.453,0.486l0.531,-0.48Zm-80.967,-13.415c-0.114,0.022 -0.184,0.045 -0.189,0.069c-0.019,0.09 0.06,0.165 0.201,0.229c0.03,-0.026 0.022,-0.136 -0.012,-0.298Zm-31.417,-1.945c0.079,0.104 0.159,0.204 0.241,0.299c0.102,-0.057 0.156,-0.122 0.14,-0.198c-0.007,-0.036 -0.16,-0.069 -0.381,-0.101Zm30.718,-0.814l-0.457,0.178l0.018,0.029c0.138,-0.049 0.284,-0.108 0.437,-0.175l0.002,-0.032Zm0.204,-17.152c-0.396,0.736 -0.929,1.369 -1.638,1.956c0.319,0.26 0.639,0.515 0.957,0.765l2.773,0c-1.195,-0.693 -1.725,-1.672 -2.092,-2.721Zm0.595,-1.532c-0.147,0.551 -0.338,1.047 -0.581,1.505c1.398,0.51 2.291,0.287 3.147,0.01l0,-0.039c-1.143,-0.328 -1.959,-0.842 -2.566,-1.476Zm-3.616,-5.554l-0.548,0.92c-0.025,0.15 1.451,-0.05 1.472,0c0.054,0.126 -0.834,0.685 -1.256,0.942c0.932,0.111 1.783,0.246 1.595,0.356c-0.296,0.172 -1.008,0.47 -1.69,0.783l0.001,0.009l-0.128,0.05c-0.506,0.234 -0.979,0.473 -1.234,0.67c0.496,0.553 1.642,0.431 2.712,-0.148c-0.76,1.393 -1.594,1.717 -2.922,2.407c0.343,0.35 0.699,0.696 1.063,1.036c0.927,0.117 1.814,-0.927 2.445,-2.231c0.033,0.821 -0.038,1.528 -0.372,1.948l0.125,-0.029c0,0 -0.03,0.052 -0.082,0.146c0.834,-0.318 1.544,-0.995 2.16,-1.616c-0.437,-0.541 -0.751,-1.153 -1.001,-1.801c1.44,0.623 2.622,0.717 3.544,0.274c-1.099,-1.787 -4.656,-3.169 -5.884,-3.716Zm-2.353,0.179c-0.026,0 -0.052,-0.002 -0.079,-0.006c-0.248,-0.031 -0.394,0.197 -0.452,0.486l0.531,-0.48Zm-17.532,-2.53l0.299,1.498l0.007,-0.001c0.594,0.336 0.687,-1.566 0,-1.479c-0.104,0.013 -0.206,0.006 -0.306,-0.018Zm20.809,0.799l-0.132,0.221c0.325,0.095 0.667,0.197 1.019,0.305c-0.334,-0.442 -0.628,-0.904 -0.887,-1.394l0,0.868Zm3.795,-2.674c0.102,0.135 0.206,0.264 0.311,0.387c0.132,-0.073 0.202,-0.158 0.181,-0.257c-0.009,-0.046 -0.206,-0.089 -0.492,-0.13Zm39.097,-0.822l0.023,0.038c0.332,-0.119 0.703,-0.281 1.093,-0.472l-1.116,0.434Zm-6.09,-31.312c-0.034,-0.001 -0.068,-0.004 -0.102,-0.008c-0.32,-0.041 -0.509,0.254 -0.584,0.627l0.686,-0.619Zm-22.65,-3.27l0.386,1.935l0.009,0c0.767,0.433 0.887,-2.024 0,-1.912c-0.135,0.017 -0.267,0.009 -0.395,-0.023Z"
        />
      </clipPath>
    </defs>
  </svg>
</div>

:root {
}

.item_1 {
  width: 100vw;
  height: 75px;
  animation-name: bounceInDown;
  animation-duration: 1s;
}

/* From Animate CSS */
/* That's not me, they are better for that */
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

/* Buger menu yourself you know ;) */
#super-burger {
  position: relative;
  display: block;
  width: calc(75px + 30px);
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}
#super-burger::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background-color: rgba(10, 10, 10, 0.1);
  clip-path: circle(0 at 100% 100%);
  transition-duration: 0.8s;
  transition-timing-function: ease;
  transition-property: clip-path;
}
#super-burger:hover::before,
#super-burger:focus::before {
  clip-path: circle(180% at 100% 100%);
}
[burger-of-the-year] {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #eee;
  border-radius: 3px;
  width: 20px;
  height: 2px;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
[burger-of-the-year]::after,
[burger-of-the-year]::before {
  content: '';
  position: inherit;
  left: 50%;
  background-color: inherit;
  border: inherit;
  border-radius: inherit;
  width: inherit;
  height: inherit;
  cursor: inherit;
}
[burger-of-the-year]::after {
  transform: translate(-50%, -5px);
}
[burger-of-the-year]::before {
  transform: translate(-50%, 5px);
}

/* For Background Chrismas  */

[christmas] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* only run with prefix <-webkit-> '-' */
  background: -webkit-radial-gradient(
    50% 0%,
    /* Position */ circle /* Type */ cover,
    /* Size */ rgba(30, 87, 153, 1) 0%,
    /* Color ColorPosition */ MidnightBlue 50%,
    rgba(30, 30, 30, 1) 100%
  );
}
[circle] {
  position: relative;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  background: linear-gradient(235deg, #008cde 16%, #3136ea 100%);
  /*  background: linear-gradient(235deg, teal 16%, Navy 100%); */
  /*   clip-path: circle(45% at 50% 50%); */
  clip-path: url(#circle);
  transform: translate(-50%, -50%);
  overflow: hidden;

  animation-name: nightTurn;
  animation-duration: 1s;
}
[moon] {
  position: absolute;
  right: 50%;
  top: 30%;
  height: 120px;
  width: 120px;
  background-color: LemonChiffon;
  border-radius: 50%;
  transform: translate(50%, -50%);
}
[moon]::before {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 250px;
  width: 250px;
  border-radius: 50%;

  background: -webkit-radial-gradient(
    60% 36%,
    /* Position */ circle /* Type */ cover,
    /* Size */ rgba(255, 253, 211, 0.5) 0%,
    rgba(255, 253, 211, 0.1) 100%
  );
  filter: brightness(100%) contrast(150%) saturate(150%) blur(35px);

  transform: translate(-50%, -50%);
}
[decor] {
  position: absolute;
  top: 250px;
  left: 40%;
}
[mountain] {
  position: absolute;
  top: 53%;
  left: 35%;
  width: 265px;
  height: 90px;
  transform: scale(3);
}
[mountain]:nth-of-type(2) {
  background: #bbdefb;
  transform: translate(150px, 45px) scale(3);
  clip-path: url(#mountain_5);
}
[mountain]:nth-of-type(3) {
  background: #64b5f6;
  transform: translateY(0) scale(3);
  clip-path: url(#mountain_4);
}
[mountain]:nth-of-type(4) {
  background: #1e88e5;
  transform: translateY(15px) scale(3);
  clip-path: url(#mountain_3);
}
[mountain]:nth-of-type(5) {
  background: #1976d2;
  transform: translateY(60px) scale(3);
  clip-path: url(#mountain_2);
}
[mountain]:nth-of-type(6) {
  background: #1565c0;
  transform: translateY(130px) scale(3);
  clip-path: url(#mountain_1);
}
[floor] {
  position: absolute;
  top: 255px;
  left: 50%;
  height: 300px;
  width: 600px;
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(109, 179, 242, 1) 0%,
    rgba(84, 163, 238, 1) 50%,
    rgba(54, 144, 240, 1) 51%,
    rgba(30, 105, 222, 1) 100%
  );
  transform: translate(-50%, -50%);
}
[trees] {
  position: absolute;
  top: 0;
  height: 300px;
  width: 600px;
  transform: scale(1.5);
  clip-path: url(#trees);
}
[trees]:nth-of-type(7) {
  left: -85px;
  background: #002c80;
}

6.《爱生活，爱坤坤》

<p>
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
  IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN IKUN
</p>

body {
  background: #000;
}
p {
  display: block;
  width: 500px;
  color: transparent;
  background: url('/media/portray/640-1.gif') center/cover;
  -webkit-background-clip: text;
  background-clip: text;
  filter: grayscale(1) invert(1);
  mix-blend-mode: hard-light;
}

7. 加载人生

<body>
  <div class="container">
    <input
      type="range"
      id="slider"
      name="slider"
      min="0"
      max="100"
      step="16.66"
      value="0"
      list="markers"
      autocomplete="on"
    />
    <div class="image"></div>
  </div>
</body>

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #23252b;
}

.container {
  background-color: #f2f2f1;
  width: 50rem;
  height: 25rem;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 30rem;
}

input[type='range']::-webkit-slider-runnable-track {
  background: #23252b;
  height: 0.5rem;
  border-radius: 10px;
}

input[type='range']::-moz-range-track {
  background: #23252b;
  height: 0.5rem;
  border-radius: 10px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -12px;
  background-color: #23252b;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
}

input[type='range']::-moz-range-thumb {
  border: none;
  border-radius: 0;
  background-color: #23252b;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
}

input[type='range']:focus {
  outline: none;
}

input[type='range']:focus::-webkit-slider-thumb {
  border: 1px solid #23252b;
  outline: 3px solid #23252b;
  outline-offset: 0.125rem;
}

input[type='range']:focus::-moz-range-thumb {
  border: 1px solid #23252b;
  outline: 3px solid #23252b;
  outline-offset: 0.125rem;
}

.image {
  transition: all 0.5s ease-in-out;
  width: 100px;
  height: 100px;
}

.baby {
  position: absolute;
  top: 20%;
  left: 16%;
  background-image: url("data:image/svg+xml,%3Csvg width='100px' height='100px' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M239.103 124.111C249.763 106.574 280.674 107.682 299.16 110.907C343.523 118.644 347.102 205.031 300.75 213.736C241.742 224.818 211 161 226.001 141' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M210 315C203.481 315 202.091 315 192 315' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M234 214C211.59 238.555 191 279.324 191 315' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M234 214C252.982 216.916 255.164 280.36 259 311' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M258 313.054C263.775 312.781 269.324 313.614 275 314' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M234 214C191.671 206.299 139.875 209.921 103.5 238.501' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M103.394 240C95.3166 247.586 124.476 294.605 136 315' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M136 315C115.109 312.521 69.5136 294.89 62.0234 299.887C57.2559 303.069 47.7237 306.736 45 309.476' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M104 240C130.478 257.127 152.721 285.022 160 313' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M238.746 124.367C229.074 129.554 216.336 127.269 211.609 115.797C195.478 76.647 260.371 70.305 236.773 123.359' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M322.788 196.851C315.811 189.972 313.86 178.247 321.57 170.79C347.883 145.341 372.097 199.816 323.005 194.843' stroke='%23000000' stroke-opacity='0.5' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M160 313C154.993 312.879 92.8855 299.664 88 300.006' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M90 300C86.6667 301.5 73.1493 310.671 70 315' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 100px;
  height: 100px;
  transition: all 0.5s ease-in-out;
}

.child {
  position: absolute;
  top: 20%;
  left: 25%;
  background-image: url("data:image/svg+xml,%3Csvg width='100px' height='100px' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M204 193C200.597 212.6 153.367 269.446 153 271' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M169.047 285.451C166.232 289.154 163.477 292.992 160.318 296.349C157.678 299.198 154.971 301.965 152.144 304.569C149.605 306.624 146.958 308.455 144.414 310.523C140.955 313.304 133.085 318.218 132.098 323.25C131.346 326.987 135.108 328.326 136.654 331.771' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M235.801 334.627C235.035 334.874 234.326 335.232 233.674 335.702C232.328 336.256 231.034 336.944 229.731 337.621C227.437 338.646 225.08 339.373 222.694 340C222.67 339.95 222.651 339.899 222.627 339.849C221.223 336.877 219.858 333.861 218.474 330.889C215.513 324.526 211.475 290.841 208.5 284.5M222.627 280.5C229.654 254.549 206.059 198.231 204.361 194.602' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M204.689 192.928C203.134 193.356 201.624 194.187 200.581 195.444C197.993 198.542 195.386 201.388 192.392 203.909C188.851 206.565 185.262 209.1 181.779 211.892C178.706 214.351 175.67 216.857 172.675 219.491C167.997 223.546 163.327 227.557 158.54 231.424C155.474 233.683 152.344 235.731 149.116 237.579C148.317 237.248 147.465 237.039 146.561 236.984C142.619 236.743 138.854 239.63 137.538 243.885C137.374 244.49 137.169 245.06 137 245.665' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M252 255.5C247.756 255.5 234.175 240.887 230.5 238.5C222.611 232.479 212.54 200.962 205.091 193.602' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M197 121C197 121 224.362 121 242 90' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M170.404 93.6171C220.089 18.2304 301.06 116.858 244.975 156.087C201.395 186.573 146.157 147.751 166.618 106.406C142.601 100.432 134.837 91.5828 143.325 79.8577C151.814 68.1327 160.84 72.7191 170.404 93.6171Z' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 100px;
  height: 100px;
  transition: all 0.5s ease-in-out;
}

.woman {
  position: absolute;
  top: 20%;
  left: 35%;
  background-image: url("data:image/svg+xml,%3Csvg width='100px' height='100px' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M234.696 59.4415C235.625 58.9631 241.709 51.3179 257.487 57.2372C275.972 64.1722 306.082 119.51 243.148 133.626C199.287 143.464 205.541 95.8381 205.837 94.294C206.081 93.0348 206.255 91.7436 206.566 90.499C206.899 89.1722 207.236 87.8445 207.569 86.5177C207.654 86.176 207.751 85.8364 207.855 85.4979C207.262 85.2725 206.705 84.963 206.212 84.5719C206.078 84.4647 205.943 84.3583 205.808 84.2527C205.805 84.2527 205.801 84.2527 205.797 84.2535C205.422 84.3317 205.055 84.4279 204.689 84.5382C200.4 86.1326 196.173 87.8749 191.742 89.1799C185.474 91.0262 178.273 92.0135 172.13 89.2659C169.17 87.9391 166.692 85.8706 165.17 83.3741C164.318 81.9737 163.656 80.3238 163.895 78.738C164.104 77.3501 172.13 68.5464 183.706 68.6958C184.743 68.7092 185.764 68.5464 186.796 68.5464C188.846 68.5464 204.304 71.6813 207.234 73.1787C207.332 73.2287 207.429 73.2788 207.527 73.3296C207.635 73.3367 207.743 73.3445 207.853 73.3531C208.657 73.4141 209.444 73.4877 210.252 73.5057C211.022 73.5239 211.763 73.6487 212.452 73.8639' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M218.22 268.164C216.501 268.122 203.84 268.343 202.127 268.164C199.226 267.861 196.34 267.48 193.445 267.131C192.956 267.073 157.952 263.552 156.993 263.451L156.722 263.963C153.935 262.872 152.117 260.582 152.117 258.049C152.117 255.982 153.337 254.602 154.789 253.073C155.595 252.226 170.783 234.73 185.169 210.661C199.288 187.039 212.59 156.863 215.304 153.088' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M215.381 153.088C214.392 161.537 215.689 332.521 216.341 336.077C216.769 338.407 217.051 340.761 217.208 343.122C217.249 343.742 217.287 344.361 217.333 344.979C218.491 345.091 225.646 344.688 226.75 344.979' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M258.299 63.5293C258.335 63.7337 258.367 63.9395 258.396 64.148C258.652 65.9287 258.803 67.7103 258.705 69.5091C258.501 73.1502 257.966 76.8438 256.909 80.3428C254.912 86.9662 251.811 93.3389 248.075 99.1814C246.11 102.253 244.048 105.254 241.813 108.146C239.561 111.055 237.218 113.91 234.599 116.512C234.122 116.984 233.638 117.448 233.147 117.904' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M213.956 153.088C219.462 166.663 221.869 192.404 222.418 204.101C222.587 207.708 229.756 226.504 234.195 239.504C235.681 243.854 238.974 244.831 239.544 245.845' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M125.34 335.404C124.987 335.176 124.645 334.941 124.287 334.727C124.178 334.706 124.067 334.685 123.956 334.666C121.928 334.303 120.032 333.035 118.994 331.424C117.329 328.84 117.769 325.282 120.215 323.211C120.43 323.029 120.657 322.857 120.89 322.691C121.825 321.289 122.54 319.764 123.597 318.432C125.205 316.415 126.935 314.478 128.693 312.567C132.165 308.79 135.796 305.131 139.34 301.413C143.211 297.355 147.102 293.318 151.022 289.305C154.689 285.553 158.388 281.832 162.035 278.065C165.173 274.824 168.25 271.538 171.309 268.235' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 100px;
  height: 100px;
  transition: all 0.5s ease-in-out;
}

.date {
  position: absolute;
  top: 20%;
  left: 43%;
  background-image: url("data:image/svg+xml,%3Csvg width='100px' height='100px' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M265.535 85.8564C299.411 42.4413 361.197 112.346 317.78 140.96C284.043 163.197 244.434 128.537 260.273 98.38' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M101.629 118.164C101.629 118.164 122.948 118.164 136.691 88.0625' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M81.8385 97.1341C119.16 39.8453 179.983 114.795 137.854 144.607C105.118 167.775 63.6247 138.272 78.9944 106.853C60.9536 102.313 55.1214 95.5881 61.4977 86.6779C67.874 77.7677 74.6543 81.2531 81.8385 97.1341Z' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M97.458 172.912C97.9098 179.448 97.8306 185.981 98.0384 192.517C98.2693 199.39 98.6287 206.253 98.8992 213.126C99.1333 219.291 99.2487 225.479 98.6419 231.622C98.0549 237.611 97.4547 243.614 96.5741 249.573C96.5148 249.824 96.4323 250.072 96.3235 250.323' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.503384' d='M213 217C213 235.444 213 253.922 213 272.348C213 290.892 213 309.422 213 328' stroke='%23000000' stroke-opacity='0.9' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M249.233 326.353C252.215 326.353 256.54 326.353 262.206 326.353L259.441 261.244C261.093 262.108 298.787 250.461 315.056 255.853C326.114 255.853 310.278 197.733 315.056 172.881' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M99.0881 255.853C100.182 257.819 101.74 258.797 103.7 259.596C106.109 260.575 108.594 260.942 111.174 261.209C113.173 261.42 115.195 261.554 117.216 261.576C121.143 261.599 125.06 261.366 128.978 261.064C132.841 260.766 136.619 261.164 140.474 261.298C141.25 261.326 142.023 261.354 142.797 261.372C142.719 263.983 142.449 266.597 142.223 269.188C141.994 271.768 141.686 274.34 141.385 276.906C140.476 283.147 139.39 294.229 138.42 300.473C137.358 307.363 136.514 314.318 135.663 321.25C135.663 322.706 146.775 325.099 147.47 326.353' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.503384' d='M262.206 203.323C261.756 202.781 261.295 202.25 260.845 201.718C259.767 200.734 258.493 200.061 257.022 199.681C255.866 199.301 254.581 199.239 253.34 199.2C252.21 199.149 251.065 199.19 249.923 199.229C246.593 199.339 243.277 199.65 239.958 199.881C236.211 200.143 232.454 200.243 228.718 200.585C226.752 200.775 224.775 200.955 222.787 200.886C220.677 200.814 218.568 200.665 216.458 200.544C212.107 200.292 207.733 200.374 203.371 200.444C199.945 200.503 196.516 200.564 193.099 200.464C189.066 200.354 185.058 200.061 181.047 199.781C177.311 199.521 163.059 198.687 151.618 203.323' stroke='%23000000' stroke-opacity='0.9' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M314.42 172.904C315.858 172.183 283.487 188.894 251.62 192.581C247.351 193.617 238.838 192.6 238.437 193.617' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M176.5 199.176C176.066 198.64 175.622 198.105 175.181 197.58C174.417 196.675 165.844 200.263 141.502 192.225C117.16 184.188 101.115 172.912 100.471 172.912' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.503384' d='M130.882 265.452C129.823 262.522 126.35 262.928 122.606 262.928C121.91 262.928 121.205 262.987 120.504 263.114C118.718 263.435 110.192 262.696 108.386 262.928C92.8511 262.292 88.4304 263.709 86.966 263.836C84.0649 263.8 81.2331 264.966 79.7354 266.912' stroke='%23000000' stroke-opacity='0.9' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.503384' d='M341 260.427C337.458 256.098 332.193 255.903 327.513 255.86C327.047 255.857 326.58 255.853 326.114 255.853C322.373 255.853 318.623 255.999 314.891 256.208C305.407 256.749 295.858 258.042 286.835 261.901C284.606 262.857 282.774 264.343 281.559 266.912' stroke='%23000000' stroke-opacity='0.9' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.50107' d='M198.913 145C193.97 145.478 187.953 145.629 180.86 145.454C181.245 149.364 181.364 151.699 181.215 152.459C179.442 161.526 174.677 172.156 188.828 174.348C192.054 174.848 197.208 174.862 199.865 173.051C209.012 166.815 199.33 153.241 201.768 145.973' stroke='%23000000' stroke-opacity='0.9' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.50107' d='M191.5 176.197C191.387 183.334 191.081 192.958 191.081 198.815' stroke='%23000000' stroke-opacity='0.9' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.50107' d='M184.635 199.215C188.612 198.806 192.662 198.683 196.146 199.339C207.646 201.503 185.94 202.023 182.483 200.905' stroke='%23000000' stroke-opacity='0.9' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.50107' d='M182.906 157.291C212.011 156.566 196.356 161.519 182.339 158.054' stroke='%23000000' stroke-opacity='0.9' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.50107' d='M237.884 145.265C232.941 145.742 226.923 145.894 219.831 145.718C220.216 149.629 220.334 151.964 220.186 152.723C218.413 161.791 213.647 172.421 227.798 174.613C231.025 175.112 236.178 175.126 238.836 173.316C247.983 167.08 238.301 153.506 240.738 146.237' stroke='%23000000' stroke-opacity='0.9' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.50107' d='M230.47 176.461C230.357 183.599 230.051 193.223 230.051 199.08' stroke='%23000000' stroke-opacity='0.9' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.50107' d='M223.606 199.479C227.582 199.07 231.633 198.948 235.117 199.604C246.617 201.768 224.911 202.288 221.453 201.17' stroke='%23000000' stroke-opacity='0.9' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.50107' d='M221.876 157.556C250.981 156.831 235.326 161.784 221.309 158.319' stroke='%23000000' stroke-opacity='0.9' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 100px;
  height: 100px;
  transition: all 0.5s ease-in-out;
}

.family {
  position: absolute;
  top: 20%;
  left: 53%;
  background-image: url("data:image/svg+xml,%3Csvg width='100px' height='100px' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M109.898 84.7631C116.133 78.2322 120.869 74.9778 129.644 72.3269C166.695 61.134 172.838 123.951 144.841 140.865C108.776 162.652 82.0567 113.856 107.448 91.4799' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M267.376 100.825C276.854 93.0418 293.219 89.1778 305.67 94.1604C345.865 110.245 323.884 164.372 283.601 158.999C256.449 155.378 257.945 105.639 279.059 97.1891' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M189.401 187.114C198.189 180.136 213.365 176.672 224.909 181.139C262.181 195.56 241.799 244.088 204.446 239.27C179.269 236.024 180.655 191.43 200.234 183.855' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M87 272.568C88.4259 269.79 87 211 106.5 175C110.333 193.667 112.7 255.2 109.5 266M164.673 235.998C158.567 229.025 150.117 185.093 149.5 179C146.667 193 142.7 243.7 143.5 262.5' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M325.264 281.568C313.092 283.494 305.051 284.677 301.141 285.119C280.846 287.41 273.888 287.278 271.759 287.278C267.642 287.278 294.164 175.651 301.141 175.651C305.792 175.651 325.264 244.5 354.499 285.119' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M109.027 265.186C107.05 278.393 106.061 294.134 106.061 312.411C106.061 330.687 107.05 347.93 109.027 364.138L97.4336 366.349' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M143 265C146 274.969 147.5 288.354 147.5 305.155C147.5 321.957 146 339.905 143 359H152' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M160.035 234.954C165.283 244.584 169.072 249.826 171.405 250.68C173.737 251.534 179.978 253.268 190.129 255.884M231.377 253.498C240.953 252.046 247.199 250.039 250.114 247.477C253.03 244.916 256.236 242.307 259.735 239.652' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M190.366 258.209L197.133 300.272L190.366 347.744L172.987 320.427L164.673 317.621' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M230.169 252.395L219.159 300.705L230.169 341.93L248.939 315.38L258.575 312.434' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M291.035 287.279V369.47L281.761 371' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M316.54 283.791V371H325.814' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M300.31 175.651C276.911 216.453 262.613 238.934 257.416 243.093' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 100px;
  height: 100px;
  transition: all 0.5s ease-in-out;
}

.elderly {
  position: absolute;
  top: 20%;
  left: 62%;
  background-image: url("data:image/svg+xml,%3Csvg width='100px' height='100px' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M193.941 57.6963C202.731 47.1387 216.825 39.6388 231.307 43.287C267.608 52.4399 249.117 119.173 218.117 123.082C165.966 129.658 160.915 72.1301 200.538 52.1549' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M169.76 129.406C155.41 148.116 101.77 265.077 113.723 282.721C114.967 284.561 151.284 280.517 156.312 280.517C163.225 280.517 194.935 284.269 200.02 280.517C205.842 276.217 196.792 254.57 195.54 249.63C185.625 210.598 187.119 167.425 174.244 129.406' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M171.608 60.1185C168.728 24.9905 218.178 36.5562 198.956 61.2143' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M183.094 143.915C200.327 162.748 240.444 207.754 265.795 207.754' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath opacity='0.503384' d='M244.031 212.366C249.783 206.077 269.582 184.945 279.253 196.787C290.11 210.084 287.205 322.755 287.205 347.04' stroke='%23000000' stroke-opacity='0.9' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M172.438 289.004C175.568 311.362 174.806 333.516 174.806 355.745' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M145.504 289.004C146.318 312.715 146.688 336.321 146.688 360.098' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M178.741 356.471C181.156 356.471 179.948 357.197 182.368 357.197' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M146.822 360.499C148.454 359.968 149.811 361.557 151.174 361.208' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 100px;
  height: 100px;
  transition: all 0.5s ease-in-out;
}

.angel {
  position: absolute;
  top: 20%;
  left: 72%;
  background-image: url("data:image/svg+xml,%3Csvg width='100px' height='100px' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M174.064 112.948C207.342 52.3143 251.851 148.764 190.249 153.877C176.167 155.044 174.417 147.789 171 136.461' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M199.702 46C271.245 50.283 127.034 90.2658 173.381 53.7561' stroke='%23000000' stroke-opacity='0.5' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M152 171.703C151.506 154.539 84.7753 79.6499 76.0374 89.9723C52.8932 117.317 116.406 162.458 127.044 180.787C130.02 185.914 96.345 164.856 93.9463 186.129C92.1484 202.046 122.703 201.913 122.703 211.768C122.703 221.622 110.947 214.083 109.68 216.578C104.561 226.657 114.897 231 122.703 231' stroke='%23000000' stroke-opacity='0.5' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M237 158.755C248.729 146.46 258.679 132.694 269.196 119.394C273.135 114.417 312.176 72.1059 322.863 82.6939C348.974 108.573 267.049 171.37 267.049 173.649C267.049 178.123 303.032 166.576 301.396 176.306C299.402 188.168 283.486 190.693 277.248 198.112C275.092 200.673 302.414 220.904 273.489 218.854' stroke='%23000000' stroke-opacity='0.5' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M173 352.66C187.923 316.91 173.002 260.436 174.92 180.478M218.551 178C213.168 219.346 207.291 342.131 215.107 351.059C217.891 354.241 217.163 352.66 222 352.2' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M172 353C170.326 354.301 168.72 354.312 167 355' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M174 181C165 219.118 158.53 239.325 147 261' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M220 180C222.41 208.866 229.037 236.145 238 252' stroke='%23000000' stroke-opacity='0.9' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 100px;
  height: 100px;
  transition: all 0.5s ease-in-out;
}

8. 波纹抖动加载

<div class="loader">
  <span style="--i:0;"></span>
  <span style="--i:1;"></span>
  <span style="--i:2;"></span>
  <span style="--i:3;"></span>
  <span style="--i:4;"></span>
  <span style="--i:5;"></span>
  <span style="--i:6;"></span>
  <span style="--i:7;"></span>
  <span style="--i:8;"></span>
  <span style="--i:9;"></span>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
.loader {
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(175deg);
}
.loader span {
  position: absolute;
  top: calc(12px * var(--i));
  left: calc(12px * var(--i));
  right: calc(12px * var(--i));
  bottom: calc(12px * var(--i));
  border: 10px solid #0b0b0b;
  border-top: 10px solid #0f0;
  border-left: 10px solid #0f0;
  border-radius: 50%;
  animation: animate 1s alternate ease-in-out infinite;
  filter: hue-rotate(calc(60deg * var(--i)));
  animation-delay: calc(-0.1s * var(--i));
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

9. 波浪填入框上浮跳动文字

<div class="inputBox">
  <input type="text" required />
  <label>波浪&nbsp;填入框&nbsp;文字&nbsp;特效</label>
</div>

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #29313a;
}
.inputBox {
  position: relative;
  width: 350px;
}
.inputBox input {
  position: relative;
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 2px solid #999;
  color: #fff;
  letter-spacing: 0.05em;
  font-size: 1.25em;
  transition: 0.5s;
}
.inputBox label {
  position: absolute;
  left: 0;
  padding: 10px 0;
  pointer-events: none;
  color: #666;
  user-select: none;
}
.inputBox label span {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  font-size: 1.25em;
  letter-spacing: 0.05em;
  transition: 0.25s cubic-bezier(0.5, 1, 0.5, 1.5);
}
.inputBox input:focus ~ label span,
.inputBox input:valid ~ label span {
  color: #0f0;
  text-shadow: 0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0;
  transform: translateY(-30px);
}
.inputBox input:focus,
.inputBox input:valid {
  border-bottom: 2px solid #fff;
}