Сайт с генерацией svg рисунка в код, или как сделать элемент без говнокода?

Question

[Underdoggit]

Всем привет, хочу сделать вот такую штуку, как на фото сверху - призыв к действую нарисован на фотошопе, и выведен с помощью position: absolute, позже вовремя остановил себя, понял что если зайдут с ретина дисплеев, этот фрагмент мягко говоря получится полным говном. Почитав статьи (хабр и тд), нашел для себя вариант в составлении чистых svg линий с любой трансформацией, и позже их анимированием с помощью js. Теперь сам вопрос: как это все нарисовать? есть ли какие-либо генераторы, где ты рисуешь стрелку, и он переводит все это в SVG код - вот такой. Или все это прописывается вручную?
Нашел сайт который рисует, но более примитивные вещи - https://svg-art.ru/?p=1112
UPD: либо подскажите как вы решаете данные дилеммы)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100" width="350" height="100">
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" 
    refX="0" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" />
    </marker>
  </defs>
  <line x1="3" y1="4" x2="250" y2="50" 
	stroke="#000" stroke-width="8" 
	marker-end="url(#arrowhead)" />
</svg>

Answer 1

[tyzberd]

Рисовать в векторном редакторе, например в adobe illustrator а потом экспортировать в svg

Answer 2

[frammmm]

есть ли какие-либо генераторы

Есть! Векторными редакторами называются. Adobe Illustrator, например.

Answer 3

[forspamonly2]

любой онлайновый векторный редактор умеет выгружать svg. например figma.com