Как поворачивать текст вокруг иконки, да еще в несколько уровней?

Question

[Michey]

Дизайнер прислал на верстку блок, где вокруг иконки в два ряда по кругу идет текст. Нагуглил, что реально реализовать с помощью SVG, но неудобно, и текст снизу зеркально отображается и перевернуть его обычным rotate не получается (уезжает в сторону).


Реально ли подобное реализовать как-то на CSS? Видел также вариант, в котором каждую букву предлагали обернуть в тег и его через transform отдельно вращать. Может есть решения по изящнее?

Из того, что пока получается https://codepen.io/nma_nepomnu/pen/byRevy
Проблема перевернуть самый нижний текст, чтобы он был не верх ногами, как сейчас.

Comments

[Rustam Bainazarov]

SVG, чтобы без костылей.

[Lord_Dantes]

Берете блок родителя обертка всего блока. У него позишин релайтив. Фиксированная высота и ширина.
Далее Блок с первым текстом(тот что зеленый) создаете 2 блока: первая надпись(daylonger relax) и вторая надпись (fell the freedom). Родителю этих текстов делаете флекс и justfity-content: space-beetwen; И вам нужно их отлокнуть друг от друга. Кароче лучше на код пене щас сделаю.

Answer 1

[Максим]

Я там с колором не работал и не искал pattern для круга ...
Делается в общем это вот так : https://codepen.io/topicstarter/pen/qGjpXJ

Answer 2

[GreatRash]

SVG - самый простой и правильный вариант.

Answer 3

[Шохрух Шаймардонов]

Вот такой вариант можно найти при беглом гуглинге

Частенько годноту можно тут найти:
https://css-tricks.com/set-text-on-a-circle/

Comments

[Michey]

По первому варианту и делал первые шаги. Но даже отдаленно желаемый вариант не получался.

Второй вариант посмотрю, спасибо

[Шохрух Шаймардонов]

Michey, Код в студию)

[Шохрух Шаймардонов]

Michey, второй вариант на той же почве, но все же не помешает посмотреть)

[Michey]

Шохрух Шаймардонов, например, https://codepen.io/nma_nepomnu/pen/byRevy Здесь я сделал размеры круга больше, чем в было в примере, но не могу развернуть текст снизу, чтобы он не зеркалился.

[RAX7]

Michey, path против часовой стрелки сделай
https://codepen.io/anon/pen/ZNypxv

[Michey]

RAX7, трудно ориентироваться по координатам, чтобы рисовать фигуры и задавать им направления. Есть какой-то инструмент для автоматизации (может визуально как-то)?

[Rustam Bainazarov]

Michey, любой SVG-редактор, LOL. Но лучше Inkscape.

[Michey]

Рустам Байназаров, попробую, спасибо!

[Rustam Bainazarov]

Michey, можно ещё попробовать Boxy SVG, он платный, там нет столь много функций, но в целом, он для web тоже подходит.

Лучше подскажет только эксперт в этой области. RAX7, а ты в каком орудуешь?

[Сергей delphinpro]

Рустам Байназаров, Бесплатно - InkSpace
За деньги - Illustrator
Есть абсолютно всё, что нужно. Даже больше.

[Rustam Bainazarov]

Сергей delphinpro, я просто всеми в разной степени пользуюсь. С недавних пор стад много использовать Boxy SVG, где удобно сразу код редактировать.

[Сергей delphinpro]

Рустам Байназаров, код можно и в шторме редактировать =)) и результат сразу виден в режиме сплит-мод

[Rustam Bainazarov]

Сергей delphinpro, ну, так можно делать и в, например, Atom :))

Я имею в виду можно сразу и рисовать, и код редактировать. Плюс, он не генерирует лишний код, как Inkscape или Illustrator.

P. S. В Inkscape есть такой же режим, но я не пробовал никогда.

[RAX7]

Рустам Байназаров, в Adobe Illustrator, Inkscape как-то мне не зашел, Boxy SVG пока не пробовал.

[Rustam Bainazarov]

RAX7, не подскажешь, там есть режим просмотра кода, чтобы можно было сразу там его редактировать? Я просто не знаю, но я и пользуюсь им не так часто.

[RAX7]

Рустам Байназаров, нет, такого там нет. Да и вряд ли появится, у Illustrator`а куча фич которые просто не совместимы с svg (например: панель appearance, кисти, градиент вдоль обводки)

[Rustam Bainazarov]

RAX7, да, собственно, это и останавливает меня от работы с ним в контексте web.