<body id="particle-js">
<div class="container">
<div class="planet">
<svg width="292px" height="292px" viewBox="0 0 292 292" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.1 (89650) - https://sketch.com -->
<title>CSS Motion Path</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="57" cy="57" r="57"></circle>
</defs>
<g id="CSS-Motion-Path" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="CSS-Tricks/Smooth-box-Shadow/7.-The-result" transform="translate(-394.000000, -514.000000)">
<path d="M540,804 C619.529004,804 684,739.529004 684,660 C684,580.470996 619.529004,516 540,516 C460.470996,516 396,580.470996 396,660 C396,739.529004 460.470996,804 540,804 Z" id="Oval" stroke="#555" stroke-width="3" stroke-dasharray="15"></path>
<path d="M540,757 C593.571621,757 637,713.571621 637,660 C637,606.428379 593.571621,563 540,563 C486.428379,563 443,606.428379 443,660 C443,713.571621 486.428379,757 540,757 Z" id="Oval-Copy" stroke="#555" stroke-width="3" stroke-dasharray="15"></path>
<g id="Rectangle-+-Rectangle-Mask" transform="translate(483.000000, 603.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EE6868" xlink:href="#path-1"></use>
<path d="M-6,13 C15.9595435,2.91781867 36.9595435,1.07454734 57,7.47018599 C77.0404565,13.8658247 98.4609556,22.9372813 121.261497,34.6845558 L125,57 C90.3986771,40.2204992 64.9814028,31.8307489 48.7481768,31.8307489 C32.5149509,31.8307489 14.2655586,34.2204992 -6,39 L-6,13 Z" id="Rectangle" fill-opacity="0.3" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M-6,57 C7.1159148,60.2551154 26.9487611,64.5688943 53.4985389,69.9413366 C80.0483167,75.3137789 102.636967,75.3137789 121.264489,69.9413366 L121.264489,103.053275 C98.1211585,105.569842 78.6161557,106.575455 62.7494802,106.070114 C46.8828048,105.564773 23.067676,100.186214 -8.69590604,89.934438 L-6,57 Z" id="Rectangle" fill-opacity="0.3" fill="#FFFFFF" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</svg>
</div>
<div class="moon-1"></div>
<div class="moon-2"></div>
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</body>body {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
background: #212121;
}
.container {
display: grid;
place-items: center;
position: relative;
}
canvas {
position: absolute;
z-index: -1;
}
.moon-1 {
background: #eee;
border-radius: 100%;
width: 30px;
height: 30px;
offset-path: path('M0,144 C79.529004,144 144,79.529004 144,0 C144,-79.529004 79.529004,-144 0,-144 C-79.529004,-144 -144,-79.529004 -144,0 C-144,79.529004 -79.529004,144 0,144 Z');
position: absolute;
top: 145px;
animation: rotate 20s linear infinite;
left: 145px
}
.moon-2 {
background: #eee;
border-radius: 100%;
width: 20px;
height: 20px;
offset-path: path('M0,97 C53.5716207,97 97,53.5716207 97,0 C97,-53.5716207 53.5716207,-97 0,-97 C-53.5716207,-97 -97,-53.5716207 -97,0 C-97,53.5716207 -53.5716207,97 0,97 Z');
position: absolute;
top: 145px;
left: 145px;
animation: rotate-clockwise 10s linear infinite;
motion-offset: 100%;
offset-distance: 100%;
}
div[class^='moon']:after {
width: 50%;
height: 30%;
position: absolute;
background: #ccc;
left: 25%;
top: 10%;
content: '';
border-radius: 100%;
}
div[class^='moon']:before {
width: 20%;
height: 20%;
position: absolute;
background: #ccc;
left: 60%;
top: 50%;
content: '';
border-radius: 100%;
}
@keyframes rotate {
to {
motion-offset: 100%;
offset-distance: 100%;
}
}
@keyframes rotate-clockwise {
to {
motion-offset: 0%;
offset-distance: 0%;
}
}// Particle js stars
particlesJS("particle-js", {
"particles": {
"number": {
"value": 200,
"density": {
"enable": true,
"value_area": 100
}
},
"color": {
"value": ["#fff", "#eee"],
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000",
}
},
"opacity": {
"value": 0.8,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": false,
}
},
"size": {
"value": 1.5,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"size_min": 0.2,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 100,
"color": "#000d1f",
"opacity": 1,
"width": 0.5
},
"move": {
"enable": false,
"speed": 3,
"direction": "none",
"random": true,
},
"interactivity": {
"detect_on": "none",
"events": {
"onhover": {
"enable": false,
},
"onclick": {
"enable": false,
}
}
},
"retina_detect": true
}
});
External CSS
This Pen doesn't use any external CSS resources.