JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main"></div>

CSS

#container{
    width:400px;
    height:400px;
    }

JavaScript

var paper = Raphael('main', 500, 500);
	
	// Creates circle at x = 50, y = 40, with radius 10
	var line = paper.path( ["M", 100, 100, "L", 30, 100 ] );
	// Sets the fill attribute of the circle to red (#f00)
	line.attr({
		'stroke': '#000',
		'stroke-width':'3',
	});
	line.rotate(200,100,100);
        
    // to animate ??
   line.animate({rotation:"500 100 100"},1000,'<>');

var paper = Raphael('main', 500, 500);
	
	// Creates circle at x = 50, y = 40, with radius 10
	var line_1 = paper.path( ["M", 100, 100, "L", 30, 100 ] ).attr({'stroke': '#000','stroke-width':'3'});
	var line_2 = paper.path( ["M", 200, 200, "L", 30, 200 ] ).attr({'stroke': '#000','stroke-width':'3'});
        line_1.rotate(200,100,100);
        line_2.rotate(100, 200, 200);

    // to animate ??
	line_1.animate({rotation:"300 100 100"},1000,'<>');
	line_2.animate({rotation:"300 200 200"},1000,'<>');