на svg еще вчера сделал
<svg>
<line x1="155" y1="203" x2="301" y2="203" stroke-width="2" stroke="#fff"/>
<line x1="405" y1="203" x2="551" y2="203" stroke-width="2" stroke="#fff"/>
<line x1="657" y1="203" x2="803" y2="203" stroke-width="2" stroke="#fff"/>
<line x1="155" y1="487" x2="301" y2="487" stroke-width="2" stroke="#fff"/>
<line x1="405" y1="487" x2="551" y2="487" stroke-width="2" stroke="#fff"/>
<line x1="657" y1="487" x2="803" y2="487" stroke-width="2" stroke="#fff"/>
<polyline points="905,203 958,203 958,339 2,339 2,487 52,487" fill="none" stroke-width="2" stroke="#fff"/>
<polygon points="219,210 230,203 219,196" fill="#fff" stroke-width="1" stroke="#fff"/>
<polygon points="469,210 480,203 469,196" fill="#fff" stroke-width="1" stroke="#fff"/>
<polygon points="721,210 732,203 721,196" fill="#fff" stroke-width="1" stroke="#fff"/>
<polygon points="469,346 458,339 469,332" fill="#fff" stroke-width="1" stroke="#fff"/>
<polygon points="219,480 230,487 219,494" fill="#fff" stroke-width="1" stroke="#fff"/>
<polygon points="469,480 480,487 469,494" fill="#fff" stroke-width="1" stroke="#fff"/>
<polygon points="721,480 732,487 721,494" fill="#fff" stroke-width="1" stroke="#fff"/>
<circle cx="104" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
<circle cx="354" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
<circle cx="604" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
<circle cx="854" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
<circle cx="104" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
<circle cx="354" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
<circle cx="604" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
<circle cx="854" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
</svg>
а текст и иконки divaми