<div class="contaier">
  <div class="contents">
    <button class="contents__toggle-button js-toggle-button" type="button"></button>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 486 113">
      <g id="Frame" clip-path="url(#clip0)">
        <path id="Vector" fill="#FFF365" d="M201.2 52.2h5.6l-2.8 8-2.8-8z" />
        <path id="Vector_2" fill="#FFF365" d="M191.7 45.7l3.8 3.7-7.7 3.9 4-7.6z" />
        <path id="Vector_3" fill="#FFF365" d="M219 40v-5.6l8 2.8-8 2.8z" />
        <path id="Vector_4" fill="#FFF365" d="M212.6 49.4l3.7-3.7 4 7.6-7.7-4z" />
        <path id="Ellipse 2" fill="#FFCE00" d="M204.5 49.5c6.9 0 12.5-5.6 12.5-12.5h-25c0 6.9 5.6 12.5 12.5 12.5z" />
        <path id="marcury-line" stroke="#D1D1D1" d="M253 23.5c0 .5 0 1-.5 1.8-.4.8-1.1 1.6-2.2 2.6-2 1.9-5.3 4-9.5 6.2A200 200 0 01207 47.5a200 200 0 01-35.6 7.8c-4.7.5-8.6.6-11.4.2-1.4-.2-2.4-.5-3.2-.9-.8-.4-1.2-.8-1.4-1.3-.1-.5 0-1 .4-1.8s1.2-1.7 2.2-2.6c2.1-1.9 5.4-4 9.5-6.2a200 200 0 0133.9-13.4 200 200 0 0135.6-7.8c4.7-.5 8.5-.6 11.3-.2 1.4.2 2.5.5 3.3.9.8.4 1.2.8 1.3 1.3z" />
        <path id="venus-line" stroke="#FF9300" d="M312.6 33c0 1.1-.5 2.4-1.7 3.7a22.4 22.4 0 01-5.7 4 106 106 0 01-22 8 420 420 0 01-73.7 11A420 420 0 01135 59a106 106 0 01-22.8-4.7c-2.7-1-4.8-2.1-6.2-3.3-1.4-1.1-2.1-2.3-2.2-3.5-.1-1.1.4-2.4 1.7-3.7 1.3-1.4 3.2-2.7 5.7-4.1a106 106 0 0122-7.9c18.6-4.9 44.7-9 73.6-11 29-2 55.3-1.6 74.5.7a106 106 0 0122.8 4.7c2.8 1 4.8 2 6.3 3.2 1.4 1.2 2.1 2.4 2.2 3.5z" />
        <path id="Vector_5" fill="#FFF365" d="M206.8 22.2h-5.6l2.8-8 2.8 8z" />
        <path id="Vector_6" fill="#FFF365" d="M216.3 28.6l-3.7-3.8 7.6-3.9-3.9 7.7z" />
        <path id="Vector_7" fill="#FFF365" d="M189 34.4V40l-8-2.8 8-2.8z" />
        <path id="Vector_8" fill="#FFF365" d="M195.5 24.8l-3.8 3.8-3.9-7.7 7.7 4z" />
        <path id="Ellipse 1" fill="#FFCE00" d="M204.5 25c-6.9 0-12.5 5.6-12.5 12.5h25c0-6.9-5.6-12.5-12.5-12.5z" />
        <path id="earth-line" stroke="#00A7FF" d="M350 37c0 1.8-.8 3.6-2.7 5.4a31.2 31.2 0 01-8.2 5.5 145 145 0 01-30.8 10c-26.1 6-62.5 10.5-102.7 11.9-40.2 1.4-76.8-.5-103.3-4.7-13.3-2-24-4.7-31.4-7.8a31.2 31.2 0 01-8.6-5c-2-1.6-3-3.4-3-5.1 0-1.8.8-3.6 2.6-5.4 1.9-1.9 4.6-3.7 8.2-5.5 7.2-3.6 17.8-7 30.8-10 26.2-6 62.5-10.5 102.8-11.9 40.2-1.4 76.7.5 103.3 4.7 13.2 2 24 4.7 31.4 7.8 3.7 1.5 6.6 3.2 8.6 5 2 1.6 2.9 3.4 3 5.1z" />
        <path id="mars-line" stroke="red" d="M482.1 47.2c.2 3-1.3 6.1-4.4 9.3-3 3-7.6 6.2-13.5 9.2-12 6-29.3 11.7-50.9 16.7-43.1 10-103 17.4-169.3 19.8a928.5 928.5 0 01-170.3-8c-21.8-3.4-39.6-7.9-51.9-13-6.1-2.7-10.9-5.4-14.1-8.3-3.3-3-5-6-5-9-.2-3 1.3-6.2 4.3-9.3 3-3.1 7.6-6.2 13.6-9.2 11.9-6 29.3-11.8 50.8-16.8 43.2-10 103-17.4 169.4-19.7 66.3-2.3 126.5.9 170.2 7.9 21.9 3.5 39.6 8 52 13.1 6 2.6 10.9 5.4 14.1 8.3 3.3 2.9 5 5.9 5 9z" />
        <circle class="planet planet--mars" fill="red" cx="0" cy="0" r="4" />
        <g class="planet planet--earth">
          <circle fill="#00A7FF" cx="0" cy="0" r="5" />
          <g transform="translate(-11 -11)">
            <circle class="planet planet--moon" fill="#FFF365" cx="0" cy="0" r="2" />
          </g>
        </g>
        <circle class="planet planet--earth" fill="#00A7FF" cx="0" cy="0" r="5" />
        <circle class="planet planet--venus" fill="#FF9300" cx="0" cy="0" r="3" />
        <circle class="planet planet--marcury" fill="#D1D1D1" cx="0" cy="0" r="4" />
      </g>
    </svg>
  </div>
</div>
.contaier {
  background-color: #000;
  height: 100vh;
  display: grid;
  place-items: center;
}

.contents {
  width: 500px;
  position: relative;
  > .contents__toggle-button {
    position: absolute;
    bottom: 0;
    right: 0;
    &::before {
      content: "pause";
      display: inline;
    }
    &.is-pause::before {
      content: "start";
    }
  }
}

.planet {
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  &.is-pause {
    animation-play-state: paused;
  }
  &.planet--mars {
    offset-path: path('M482.1 47.2c.2 3-1.3 6.1-4.4 9.3-3 3-7.6 6.2-13.5 9.2-12 6-29.3 11.7-50.9 16.7-43.1 10-103 17.4-169.3 19.8a928.5 928.5 0 01-170.3-8c-21.8-3.4-39.6-7.9-51.9-13-6.1-2.7-10.9-5.4-14.1-8.3-3.3-3-5-6-5-9-.2-3 1.3-6.2 4.3-9.3 3-3.1 7.6-6.2 13.6-9.2 11.9-6 29.3-11.8 50.8-16.8 43.2-10 103-17.4 169.4-19.7 66.3-2.3 126.5.9 170.2 7.9 21.9 3.5 39.6 8 52 13.1 6 2.6 10.9 5.4 14.1 8.3 3.3 2.9 5 5.9 5 9z');
    animation-duration: 6s;
  }
  &.planet--earth {
    offset-path: path('M350 37c0 1.8-.8 3.6-2.7 5.4a31.2 31.2 0 01-8.2 5.5 145 145 0 01-30.8 10c-26.1 6-62.5 10.5-102.7 11.9-40.2 1.4-76.8-.5-103.3-4.7-13.3-2-24-4.7-31.4-7.8a31.2 31.2 0 01-8.6-5c-2-1.6-3-3.4-3-5.1 0-1.8.8-3.6 2.6-5.4 1.9-1.9 4.6-3.7 8.2-5.5 7.2-3.6 17.8-7 30.8-10 26.2-6 62.5-10.5 102.8-11.9 40.2-1.4 76.7.5 103.3 4.7 13.2 2 24 4.7 31.4 7.8 3.7 1.5 6.6 3.2 8.6 5 2 1.6 2.9 3.4 3 5.1z');
    offset-rotate: 0deg;
    animation-duration: 5s;
  }
  &.planet--moon {
      offset-path: path('M20.6 3.2C22 5 22.4 7.4 21.7 10c-.6 2.6-2.3 5.3-4.9 7.4A14.7 14.7 0 018.6 21c-2.6.2-5-.6-6.4-2.4C.7 17 .3 14.4 1 12c.6-2.6 2.3-5.3 4.9-7.5 2.6-2.1 5.5-3.3 8.2-3.5 2.6-.2 5 .6 6.5 2.3z');
      animation-duration: 2s;
  }
  &.planet--marcury {
    offset-path: path('M312.6 33c0 1.1-.5 2.4-1.7 3.7a22.4 22.4 0 01-5.7 4 106 106 0 01-22 8 420 420 0 01-73.7 11A420 420 0 01135 59a106 106 0 01-22.8-4.7c-2.7-1-4.8-2.1-6.2-3.3-1.4-1.1-2.1-2.3-2.2-3.5-.1-1.1.4-2.4 1.7-3.7 1.3-1.4 3.2-2.7 5.7-4.1a106 106 0 0122-7.9c18.6-4.9 44.7-9 73.6-11 29-2 55.3-1.6 74.5.7a106 106 0 0122.8 4.7c2.8 1 4.8 2 6.3 3.2 1.4 1.2 2.1 2.4 2.2 3.5z');
    animation-duration: 2s;
  }
  &.planet--venus {
    offset-path: path('M312.6 33c0 1.1-.5 2.4-1.7 3.7a22.4 22.4 0 01-5.7 4 106 106 0 01-22 8 420 420 0 01-73.7 11A420 420 0 01135 59a106 106 0 01-22.8-4.7c-2.7-1-4.8-2.1-6.2-3.3-1.4-1.1-2.1-2.3-2.2-3.5-.1-1.1.4-2.4 1.7-3.7 1.3-1.4 3.2-2.7 5.7-4.1a106 106 0 0122-7.9c18.6-4.9 44.7-9 73.6-11 29-2 55.3-1.6 74.5.7a106 106 0 0122.8 4.7c2.8 1 4.8 2 6.3 3.2 1.4 1.2 2.1 2.4 2.2 3.5z');
    animation-duration: 4s;
  }
  &.planet--marcury {
    offset-path: path('M253 23.5c0 .5 0 1-.5 1.8-.4.8-1.1 1.6-2.2 2.6-2 1.9-5.3 4-9.5 6.2A200 200 0 01207 47.5a200 200 0 01-35.6 7.8c-4.7.5-8.6.6-11.4.2-1.4-.2-2.4-.5-3.2-.9-.8-.4-1.2-.8-1.4-1.3-.1-.5 0-1 .4-1.8s1.2-1.7 2.2-2.6c2.1-1.9 5.4-4 9.5-6.2a200 200 0 0133.9-13.4 200 200 0 0135.6-7.8c4.7-.5 8.5-.6 11.3-.2 1.4.2 2.5.5 3.3.9.8.4 1.2.8 1.3 1.3z');
    animation-duration: 2s;
  }
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
View Compiled
let isAnimate = true;
const planetEls = document.querySelectorAll(".planet");
const buttonEl = document.querySelector(".js-toggle-button");
buttonEl.addEventListener("click", () => {
  [...planetEls, buttonEl].forEach((el) => {
    if(isAnimate) {
      el.classList.add("is-pause");
    } else {
      el.classList.remove("is-pause");
    }
  });
  isAnimate = !isAnimate;
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.