Toggle switch

<label
  type="checkbox"
  class="reduceMotionToggle st-reduceMotionToggleBtn"
  for="reduceMotionToggle"
>
  <input
    class="reduceMotionToggleInput"
    id="reduceMotionToggle"
    type="checkbox"
  />
  <svg
    stroke-width="0"
    stroke="currentColor"
    fill="currentColor"
    viewBox="0 0 18 18"
    height="18"
    width="18"
  >
    <mask id="lineMask">
      <rect fill="white" height="18" width="18"></rect>
      <rect
        fill="black"
        style="rotate: 30deg;"
        height="16"
        width="4.1"
        y="-5"
        x="9.807"
        class="line"
      ></rect>
    </mask>
    <rect
      style="rotate: 30deg;"
      height="13"
      width="1.3"
      y="-3.3"
      x="11.3"
      class="line"
    ></rect>
    <g mask="url(#lineMask)">
      <circle
        style="--_toCenterXOffset: 5.76px;--_appearOffset: -.1s;"
        fill="none"
        stroke-width=".1"
        r="2.95"
        cy="9"
        cx="3.24"
        class="ballTrace"
      ></circle>
      <circle
        style="--_toCenterXOffset: 3px;--_appearOffset: .02s;"
        fill="none"
        stroke-width=".2"
        r="2.9"
        cy="9"
        cx="6"
        class="ballTrace"
      ></circle>
      <circle
        style="--_toCenterXOffset: 0px;--_appearOffset: .07s;"
        fill="none"
        stroke-width=".3"
        r="2.8"
        cy="9"
        cx="9"
        class="ballTrace"
      ></circle>
      <circle
        style="--_toCenterXOffset: -2.75px;--_appearOffset: .13s;"
        fill="none"
        stroke-width=".4"
        r="2.75"
        cy="9"
        cx="11.75"
        class="ballTrace"
      ></circle>
      <circle
        style="--_toCenterXOffset: -5.7px;"
        r="3"
        cy="9"
        cx="14.7"
        class="ball"
      ></circle>
    </g>
  </svg>
</label>