Рабочий код для задания:
<svg width="300" height="400" viewBox="0 0 400 200" preserveAspectRatio="xMidYMin">
<g id="rainbow" stroke-width="10" transform="translate(25 30)" stroke-linecap="round" fill="none">
<path stroke="#D0021B" d="M351,176 C351,78.797884 272.425974,0 175.5,0 C78.5740264,0 0,78.797884 0,176"/>
<path stroke="#F5A623" d="M342,176 C342,83.7684468 267.455411,9 175.5,9 C83.5445892,9 9,83.7684468 9,176"/>
<path stroke="#F8E71C" d="M332,176 C332,88.7390095 261.708706,18 175,18 C88.2912943,18 18,88.7390095 18,176"/>
<path stroke="#7ED321" d="M323,176 C323,94.261857 256.738143,28 175,28 C93.261857,28 27,94.261857 27,176"/>
<path stroke="#50E3C2" d="M315,176 C315,99.2324198 252.76758,37 176,37 C99.2324198,37 37,99.2324198 37,176"/>
<path stroke="#4A90E2" d="M305,176 C305,104.202983 247.020875,46 175.5,46 C103.979125,46 46,104.202983 46,176"/>
<path stroke="#BD10E0" d="M295,176 C295,109.173545 241.27417,55 175,55 C108.72583,55 55,109.173545 55,176"/>
</g>
</svg>
CSS
svg {
background-color: #ffffff;
background-image: url("road-landscape.svg");
background-repeat: no-repeat;
background-position: 50% 0;
border: 1px solid #dddddd;
}