JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="temp.css">

<svg id="view" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve">

    <circle class="orbit" r="300" fill="none" transform="translate(500 500)" stroke-width="1" stroke="#ffffff" />
    <circle class="orbit" r="120" transform="translate(500 500)" stroke-width="1" stroke="#ffffff" />
    <circle r="30" transform="translate(500 380)" fill="#777777" />
    <circle r="70" transform="translate(500 500)" fill="#FDB813" />
    <circle r="60" transform="translate(500 500)" fill="#ff8800" />

</svg>

CSS

view{
    width: 60%;
    margin: 0 auto;
    display: block;
  }
  
  html{
     background-color:black;
  }
  
  .orbit{
    stroke-dasharray:2;
  }