Hello! I'm creating random triangles.
For the exterior angle I'm using an svg Line, the thing is that I'm passing the center of rotation as a prop to a react component, but the rotation works well just the first time.
This is the component:
const LineExtension = ({centerX, centerY, rotation, length}) => {
let [tl] = useState(gsap.timeline())
useEffect(() => {
tl.to(`#line`, {rotation: -rotation, svgOrigin: `${centerX} ${centerY}`})
}, [centerX, centerY, rotation, tl])
return (
<g
>
<line
id="line"
x1={centerX} y1={centerY} x2={centerX+length} y2={centerY} style={{stroke: "rgb(255,0,0)", strokeWidth:"1"}}
/>
</g>
);
};
Hope you can help me, thanks!