Playground in SVG
I have an SVG playground where users can add components and connect them using poles and wires.
I need to implement a functionality that allows users to manipulate the wire. Specifically, they should be able to adjust the wire, as shown in the second image, where they can move the middle of the wire to make it more organized. How can I achieve this? I'm using only HTML, CSS, and JavaScript.
5 Replies
I’m not totally sure myself but you may take a look at Milanote or fig jam do it. They have little nodes where you can adjust the angle of arrows connecting two elements
This is a really cool project !! I’m awful with svgs , wish I could help more
Thank you for your interest, I'm very happy!
I need to find a tool that makes these wire connections faster. Since development time is already a bit scarce.
You could look into JointJS or D3.js or ReactFlow
I was using JointJS today, but it creates a new instance of my SVG, but it's not quite what I'm looking for.
Do you have any examples for this case with D3?
This looks pretty cool! I'm a former math teacher so my first big project was in html, css, and JS generating a whole bunch of SVGs representing fractions, mixed numbers, and multiplication and division of fractions and mixed numbers. Are you wanting to drag the wires with the mouse to adjust them?