Как создать такие кривые?

Question

[smiros]

Вопрос к опытным верстальщикам
Есть картинка


Как можно получить данную картинку в SVG ну или по другому, чтобы грамотно ))

Answer 1

[A K]

stroke-dasharray Пожалуйста

Comments

[Сергей delphinpro]

думаете у автора трудность в рисовании штрихов? Лучше бы про кривые Безье подсказали...

[A K]

Сергей: он же так и написал прерывистые линии.

[Сергей delphinpro]

Symphony: тогда сорри, видимо я невнимателен =)

[A K]

Сергей: все в порядке, бывает.

[smiros]

Сергей: вы все правильно поняли. То я вопрос неправильно сформулировал ;)

Answer 2

[xtala zen]

Прерывистые линии задаются свойством border-style: dashed;, но здесь они сложной формы поэтому стоит использовать картинку бэкграундом, а лучше форматом svg, т.к вектор дает хорошую адаптивность.

Comments

[smiros]

картинку отдельно от типографики?

[xtala zen]

Хорошим тоном считается когда надписи особенно контекстные это именно надписи (текст), а не картинка.

[smiros]

xtala zen: я имел в виду рисунки - кружочки (не знаю как правильно назвать). Надписи понятно, что отдельно

[xtala zen]

smiros: кружки можно и в CSS сделать за это отвечает border-radius. Но лично мой внутренний идеалист противится этому решению т.к. оно не будет работать в старых браузерах. Кто-то забивает на это. Если в ТЗ нет пункта что сайт должен полноценно работать в старых IE, то наверное можно и пренебречь этой особенностью.

[xtala zen]

smiros: кружки отдельно от SVG вряд ли получится потому что при адаптации все поедет в разные стороны.

Answer 3

[iBird Rose]

или нормально учишь svg. или гуглишь по запросам типа "svg bezier curve" и находишь либо подобные решения, либо даже конструкторы готовые есть для рисования

Comments

[smiros]

я так понимаю адаптивности практически не будет? Ну если, к примеру 4 круга становятся в столбец ну или 2 на 2...

[xtala zen]

smiros: svg это векторная графика. Она рассчитывается машиной по формулам, поэтому она адаптивна так же как и шрифт. Побочный эффект тормоза. Поэтому svg изображения нужно оптимизировать, убирать лишние узлы.

[smiros]

xtala zen: ну то что масштабируется я по аббревиатуре понял))) Но как быть в случае с бутстрап-решетки? То есть, при просмотре на мобильных свг-картинка не обеспечит связь между кругами? Верно?