<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;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.