<svg  viewBox="0 0 1300 1000" class="anim">
  <path id="path" fill="none" stroke="#90acef" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="10 20.1" d="M20.2 679.7c210.3-19.1 398.9-219.6 236.5-257.5-170.5-16.8-132.5 146.2-6.8 184.7 141.6 55.7 242.3-9.9 215.3-89.3-43.7-94-330-292-85-347.3 135.5-18.7 251 54.7 302.9 141.5 50.2 85 25.5 183.8 136.6 248.6C1000 627 1037.7 427 1039 395.7c20.3-196.6-133.8-218-199.5-170s-11.3 138.5 107 114S1126.7 147.6 1092.6 67c-2.4-12.2-1.4-23.1 9.2-31.8 100.8-49.4 112.2 198.4 239-23.8"/>
 <g class="rocket">
      <g fill="#fff">
        <path d="M77.4 651.4a13.3 13.3 0 00-14.8-11.6c-19 2.2-29.8 17-55.5 20 25.7-3 39.7 8.7 58.7 6.4a13.3 13.3 0 0011.6-14.8z" opacity=".5" style="isolation:isolate"/>
        <path d="M77.4 651.4a9 9 0 00-9.9-7.8c-12.7 1.5-20 11.4-37.1 13.4 17.2-2 26.5 5.8 39.2 4.3a9 9 0 007.8-9.9z"/>
      </g>
      <g fill="#63c6be">
        <path d="M111.9 669.7l-15.1 13.7a8.4 8.4 0 01-6.7 2.1l-23-2.8a1 1 0 01-1-1.1 1 1 0 01.2-.5l14-19.7z"/>
        <path d="M106.7 625.4L89 615.5a8.4 8.4 0 00-7-.5l-21.8 8a1 1 0 00-.3 1.7l18.2 16z"/>
      </g>
      <path fill="#fff" d="M173.2 640.3c-18.8-18.2-72-23.2-94.7-4a2.6 2.6 0 00-1 2.2l3 25a2.6 2.6 0 001.4 2c26.4 13.6 77-3.3 91.3-25.2z"/>
      <path fill="#63c6be" d="M173.2 640.3a63.6 63.6 0 00-30.8-14c-.4-6.5 4 34.5 4 34.5a63.7 63.7 0 0026.8-20.5z"/>
      <circle cx="123.2" cy="646" r="11.7" fill="#63c6be" transform="rotate(-49.2 123.2 646)"/>
      <path fill="#22173f" d="M125.7 655a9.4 9.4 0 116.6-11.5 9.4 9.4 0 01-6.6 11.6z"/>
    </g>
</svg>



<div class="tutorials">
  <a href="https://s.juejin.cn/ds/i8jEtgJx/" target="_blank">
    <svg t="1696988571607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4422" width="200" height="200">
      <path d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z" p-id="4423"></path>
    </svg>
  </a>

</div>

@layer reset, base, form,demo, animation;

@layer animation {
  @keyframes fly {
    from {
      offset-distance: 0%;
    }
    to {
      offset-distance: 100%;
    }
  }
  .rocket {
    transform-box: fill-box;
    offset-anchor: 50% 50%;
    transform-origin: 50% 50%;
    offset-rotate: auto;
    offset-path: path(
      "M20.2 679.7c210.3-19.1 398.9-219.6 236.5-257.5-170.5-16.8-132.5 146.2-6.8 184.7 141.6 55.7 242.3-9.9 215.3-89.3-43.7-94-330-292-85-347.3 135.5-18.7 251 54.7 302.9 141.5 50.2 85 25.5 183.8 136.6 248.6C1000 627 1037.7 427 1039 395.7c20.3-196.6-133.8-218-199.5-170s-11.3 138.5 107 114S1126.7 147.6 1092.6 67c-2.4-12.2-1.4-23.1 9.2-31.8 100.8-49.4 112.2 198.4 239-23.8"
    );
    animation: fly 10s infinite ease-in-out;
  }
}

@layer demo {
  .anim {
    display: block;
    width: 100vw;
  }
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    width: 100vw;
    min-height: 100vh;
    font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
    background-color: #37043b;
    color: #f1e2d7;
    display: grid;
    place-content: center;
    gap: 1rem;
  }

  .tutorials {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3f517e;
    padding: 0.5rem;
    display: grid;
    place-content: center;
    transition: all 0.28s linear;

    &:hover {
      background: #4161b2;
    }

    & svg {
      display: block;
      width: 100%;
      height: 100%;
      filter: invert(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  }
}

@layer form {
  :root {
    --color-primary: #3740ff;
    --color-primary-dark: #272eb5;
    --color-primary-light: #3740ff;
    --color-primary-x-light: #e8f0fe;
    --color-light: #ffffff;
    --color-dark: #202124;
    --color-off-white: #f3f4f4;
    --color-mid: #5f6368;
    --color-mid-dark: #3c4043;
    --color-stroke: #dadce0;
    --metric-gutter: 1.5rem;
    --metric-box-spacing: 1rem;
    --metric-radius: 3px;
    --generic-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
      0px 2px 6px 2px rgba(60, 64, 67, 0.15);
    --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  }

  .forms {
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 3vh;
    color: #333;
    gap: 15px;
    background-color: rgba(120, 120, 120, 0.1);
    padding: 10px;
    border-radius: 0.5em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    place-self: center;
  }

  .control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .toggle {
    --metric-toggle-thumb-size: 1rem;
    --metric-toggle-thumb-space: 0.25rem;
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .toggle__element {
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--metric-toggle-thumb-size);
    width: 1em;
    height: 1em;
  }

  .toggle__decor {
    display: block;
    position: relative;
    overflow: hidden;
    width: calc(
      (var(--metric-toggle-thumb-size) * 2) +
        (var(--metric-toggle-thumb-space) * 2)
    );
    height: calc(
      var(--metric-toggle-thumb-size) + (var(--metric-toggle-thumb-space) * 2)
    );
    background: var(--color-mid);
    margin-left: 0.5rem;
    border-radius: var(--metric-toggle-thumb-size);
    box-sizing: content-box;
    border: 1px solid var(--color-light);
  }
  :checked + .toggle__decor {
    background: var(--color-primary-light);
  }

  label::after {
    content: "\A";
    white-space: pre;
  }

  .toggle__thumb {
    display: grid;
    place-items: center;
    width: var(--metric-toggle-thumb-size);
    height: var(--metric-toggle-thumb-size);
    border-radius: var(--metric-toggle-thumb-size);
    background: linear-gradient(
        229.84deg,
        rgba(255, 255, 255, 0) 14.29%,
        rgba(48, 48, 48, 0.15) 81.82%
      ),
      #ffffff;
    box-shadow: var(--generic-shadow);
    position: absolute;
    top: var(--metric-toggle-thumb-space);
    left: var(--metric-toggle-thumb-space);
    transform: none;
    transition: transform 200ms cubic-bezier(1, 0, 0.55, 0.85);
    will-change: transform;
    z-index: 1;
  }

  .toggle__thumb::before {
    content: "";
    display: none;
    width: calc(
      var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
    );
    height: calc(
      var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
    );
    border: 1px solid var(--color-primary-light);
    border-radius: calc(
      var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
    );
  }

  :checked + .toggle__decor .toggle__thumb {
    transform: translateX(var(--metric-toggle-thumb-size)) rotate(270deg);
  }

  input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 2px;

    border-radius: 5px;
    background: rgb(0 0 0);
    outline: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
  }
  input[type="range"]::-webkit-slider-thumb:hover {
    background: #333;
    transform: scale(1.2);
  }
  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
  }
  input[type="range"]::-moz-range-thumb:hover {
    background: #d4d4d4;
  }
  label {
    white-space: nowrap;
  }
  select {
    padding: 0.5em;
  }

  button {
    --background-color: #ff5722;
    --border-color: transparent;
    min-width: 128px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: 200ms cubic-bezier(0.08, 0.52, 0.52, 1) background-color,
      200ms cubic-bezier(0.08, 0.52, 0.52, 1) box-shadow,
      200ms cubic-bezier(0.08, 0.52, 0.52, 1) transform;
    color: #fff;
    background-color: var(--background-color);
    border: none;
    border-color: var(--border-color);
    border-radius: 4px;
    font-size: 18px;
    padding-block: 0;
    padding-inline: 16px;
    min-block-size: 3rem;
    font-weight: 700;
    /*     margin-inline: auto; */
    &:hover {
      --background-color: #be3a10;
    }

    &:nth-child(2) {
      --background-color: #90acef;

      &:hover {
        --background-color: #60acef;
      }
    }
  }
}