Для графики, где много линий, кругов, фигур со сложными контурами лучше использовать SVG
. Графика должна быть векторной.
Не надо ставить вопрос,- только SVG
или только CSS
и JS
. Вся эта троица прекрасно дополняет друг друга.
В вашем примере, конечно лучше использовать SVG
. Узоры повторяются, значит нужно использовать pattern
, в который необходимо поместить одно звено цепи, а потом автоматически заполнять выбранный регион элементом паттерна.
Заполнение паттерном идет по рядам, слева направо, после заполнения одного ряда, начинается заполнение следующего ряда.
Подробнее о svg патернах здесь и здесь
Ниже пример кода для одного звена:
#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle {
fill:#3D6B93;
}
#centerCircle {
fill:#01AA4D;
}
<svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="circleLine" x="0" y="0" width="106" height="16"
patternUnits="userSpaceOnUse" >
<g>
<polyline points="16,8 107,8" stroke="#3D6B93" />
<circle id="bigCircle" cx="8" cy="8" r="7" />
<circle id="centerCircle" cx="8" cy="8" r="2.5" />
<circle id="leftCircle" cx="16" cy="8" r="2.5" />
<circle id="rightCircle" cx="104" cy="8" r="2.5" />
</g>
</pattern>
</defs>
<rect y="16" width="106.5" height="16" stroke="none" fill="url(#circleLine)" />
</svg>
В секции <defs>... </defs>
с помощью базовых фигур создаем элемент паттерна.
Он не будет виден до тех пор пока мы не используем его для заполнения какой-то фигуры. Фигура внутри паттерна может иметь любые очертания, но она всегда заключена в прямоугольник, который должен быть не меньше габаритных размеров самой фигуры.
В нашем случае размеры паттерна определяют width="106"
height="16"
Команда заполнения паттерном :
<rect y="16" width="106.5" height="16" stroke="none" fill="url(#circleLine)" />
Габаритные размеры прямоугольника равны размерам паттерна, поэтому разместилось одно звено.
Для увеличения количества звеньев просто увеличим ширину прямоугольника. Понятно, чтобы не было обрезки последней фигуры, необходима кратность размеров
Пример с пятью звеньями
#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle {
fill:#3D6B93;
}
#centerCircle {
fill:#01AA4D;
}
<svg viewBox="0 0 550 100" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="circleLine" x="0" y="0" width="107" height="16"
patternUnits="userSpaceOnUse" >
<g>
<polyline points="16,8 107,8" stroke="#3D6B93" />
<circle id="bigCircle" cx="8" cy="8" r="7" />
<circle cx="1" cy="8" r="2.5" fill="#3D6B93" />
<circle id="centerCircle" cx="8" cy="8" r="2.5" />
<circle id="leftCircle" cx="16" cy="8" r="2.5" />
<circle id="rightCircle" cx="108" cy="8" r="2.5" />
</g>
</pattern>
</defs>
<rect y="16" width="530" height="16" stroke="none" fill="url(#circleLine)" />
</svg>
И ещё один пример с многорядовым заполнением:
#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle {
fill:#3D6B93;
}
#centerCircle {
fill:#01AA4D;
}
<svg viewBox="0 0 550 150" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="circleLine" x="0" y="0" width="107" height="16"
patternUnits="userSpaceOnUse" >
<g>
<polyline points="16,8 107,8" stroke="#3D6B93" />
<circle id="bigCircle" cx="8" cy="8" r="7" />
<circle cx="1" cy="8" r="2.5" fill="#3D6B93" />
<circle id="centerCircle" cx="8" cy="8" r="2.5" />
<circle id="leftCircle" cx="16" cy="8" r="2.5" />
<circle id="rightCircle" cx="108" cy="8" r="2.5" />
</g>
</pattern>
</defs>
<rect y="16" width="530" height="128" stroke="none" fill="url(#circleLine)" />
</svg>
Решение полностью адаптивно, работает во всех браузерах, включая IE11
, Edge
svg
лучше...