html`
<svg version="1.1" x="0px" y="0px" viewBox="0 0 2050 300">
<style type="text/css">
.dark{fill:#000000}
.dark-grey{fill:#A9A9A9;}
.pale-yellow{fill:#FFFACD}
.deep-skyblue{fill:#00BFFF}
.tomato{fill:#FF6347}
.rosy-brown{fill:#BC8F8F}
.gold{fill:#FFD700}
.pale-turqoise{fill:#AFAEEE}
.cornflower-blue{fill:#6495ED}
.burly-wood{fill:#F5DEB3}
.white{fill:#FFFFFF}
.label{font-size:20px}
.stroke{fill:none; stroke:#FFFFFF; stroke-width:1}
</style>
<rect x="0" y="0" class="dark" width="2050" height="300"/>
<circle class="dark-grey" cx="20" cy="150" r="2.4"/>
<circle class="pale-yellow" cx="37.4" cy="150" r="6.1"/>
<circle class="deep-skyblue" cx="51.7" cy="150" r="6.4"/>
<circle class="tomato" cx="78.7" cy="150" r="3.4"/>
<circle class="rosy-brown" cx="268.9" cy="150" r="71.5"/>
<circle class="gold" cx="495.2" cy="150" r="60.3"/>
<circle class="pale-turqoise" cx="992.2" cy="150" r="25.6"/>
<circle class="cornflower-blue" cx="1552.7" cy="150" r="24.8"/>
<circle class="burly-wood" cx="2040.2" cy="150" r="1.2"/>
<text x="5" y="250" class="label white">Mercury</text>
<line class="stroke" x1="20" y1="250" x2="20" y2="150"/>
<text x="20" y="50" class="label white">Venus</text>
<line class="stroke" x1="37.4" y1="150" x2="37.4" y2="50"/>
<text x="40" y="200" class="label white">Earth</text>
<line class="stroke" x1="51.7" y1="200" x2="51.7" y2="150"/>
<text x="70" y="100" class="label white">Mars</text>
<line class="stroke" x1="78.7" y1="100" x2="78.7" y2="150"/>
<text x="240" y="250" class="label white">Jupitar</text>
<text x="470" y="250" class="label white">Saturn</text>
<text x="965" y="250" class="label white">Uranus</text>
<text x="1520" y="250" class="label white">Neptune</text>
<text x="2000" y="250" class="label white">Pluto</text>
<line class="stroke" x1="2040.2" y1="150" x2="2040.2" y2="250"/>
`