Dynamically draw/turn SVG with variable input

I want to dynamically draw/turn an SVG with React from degree paramters that im recieving. Its like the direction arrow from a weather-info. enter image description here

  1. How do I dynamically draw an SVG in Javascript / ReactJS?
  2. How do I turn the SVG with variable input?

I’m aware, that you can draw SVG-Graphics like this:

function draw_square() {
    var draw = SVG('square_1');
    draw.size(120, 120);
    var square = draw.rect(100, 100);
    square.attr({ fill: '#f06' });
}
 
draw_square()

but how do I connect different svg-paths to each other?

134 thoughts on “Dynamically draw/turn SVG with variable input”

Leave a Comment