Испытание: восход солнца 100%

Курсы §36. Знакомство с SVG
1

Если кто-то не понял как делать, оставлю это здесь.

HTML

<svg width="300" height="150">
<circle class="circle-1" r="70" cx="50%" cy="100%"></circle>
<circle class="circle-2" r="60" cx="50%" cy="100%"></circle>
<circle class="circle-3" r="50" cx="50%" cy="100%"></circle>
</svg>


CSS

svg {
  border: 1px solid #dddddd;
}

.circle-1 {
    fill: none;
    stroke: tomato;
    stroke-width: 150;
    stroke-dasharray: 15 15;
}

.circle-2 {
    fill: none;
    stroke: darkorange;
    stroke-width: 125;
    stroke-dasharray: 10 10;
}

.circle-3 {
    fill: gold;
    stroke: gold;
    stroke-width: 75;
    stroke-dasharray: 15 10;
}
2
3

Вот попроще будет

.c1{
fill:none;
stroke:tomato;
stroke-width:150;
stroke-dasharray:15;
}
.c2{
fill:none;
stroke:darkorange;
stroke-width:125;
stroke-dasharray:10;
}
.c3{

fill:gold;
stroke:gold;
stroke-width:75;
stroke-dasharray:15 10;
}