A site with generating svg images into code, or how to make an element without shit code?

Question

css

Hello everyone, I want to make such a thing as in the photo above - the call to action is drawn in Photoshop, and displayed with the help of position: absolute, later I stopped myself in time, I realized that if they enter from the retina displays, this fragment, to put it mildly, will turn out to be complete shit. After reading articles (habr, etc.), I found an option for myself in drawing up clean svg lines with any transformation, and later animating them using js. Now the question itself: how to draw all this? are there any generators where you draw an arrow and it translates it all into SVG code - like this. Or is it all written by hand?
I found a site that draws, but more primitive things - https://svg-art.ru/?p=1112
UPD: or tell me how you solve these dilemmas)

<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

Draw in a vector editor like adobe illustrator and then export to svg

Answer 2

are there any generators

There is! They are called vector editors. Adobe Illustrator for example.

Answer 3

any online vector editor can upload svg. e.g. figma.com