Determine the SVG arc connecting two given points

My situation involves having coordinates for points X and A, A',... as follows:
X [x,y] (starting point)
A [a,b], A'[a',b'], etc. (ending points)

I also have information about angles XCA, XCA', etc.

However, I am struggling to find a formula that calculates arcs connecting point X with the other A-points, similar to the ones shown in the picture.

My attempts at calculating radius X and radius Y using abs(x - a) and abs(y - b) only seemed accurate when the angles were 90, 180, or 270 degrees.

I then tried determining the radius of an inscribed circle cutting through points X and A, but the resulting arc did not flow "naturally" from X to A.

Any help is greatly appreciated.

PS: The image above illustrates the desired outcome (hand-drawn). Gray lines are purely for reference.

EDIT ==========================

After some experimentation, I found that using the inscribed circle option yields decent results. However, I am unsure about when to set the large-arc-flag as 1 versus 0 (similar issue with sweep-flag)

javascriptmathsvgcoordinates

Answer №1

It seems that the most straightforward solution would involve using quadratic Bezier curves. Here's an illustration to demonstrate:

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="400" height="400" version="1.0">
    <g transform="translate(200 200)">
        <circle cx="0" cy="0" r="150" stroke="#000" fill="none" />
        <path d="M0,-150 Q0,0 106.066,-106.066" fill="none" stroke="red" stroke-width="3" />
        <path d="M0,-150 Q0,0 106.066,106.066" fill="none" stroke="red" stroke-width="3" />
        <path d="M0,-150 Q0,0 -106.066,106.066" fill="none" stroke="red" stroke-width="3" />
        <path d="M0,-150 Q0,0 -106.066,-106.066" fill="none" stroke="red" stroke-width="3" />
    </g>
</svg>

The pathways are determined by the path attribute Mx0,y0 Qx1,y1 x2,y2 where x0,y0 represents the starting point (X), x1,y1 is the control point (in this case, the center of the circle, C), and x2,y2 marks the end point A.

If you desire more influence over the curve's curvature, consider utilizing cubic Bezier curves instead. These involve two control points which should be positioned on the straight lines connecting X to C and C to A. By placing them closer to C, a tighter curve can be achieved.

[JSFiddle link]

Answer №2

Here is how you can calculate all the points along an arc between two specified points:

double x = centerX + length * Math.Cos(angle * Math.PI / 180);
double y = centerY + length * Math.Sin(angle * Math.PI / 180);

To find additional points, simply increase the angle by +1 each time until you reach your end angle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for the failure of the jQuery code to disable the submit button in the following snippet?

I am working on a feature to disable the submit button in a form when the username, email, password fields are empty. When all of them are filled, I want to enable the submit button. However, the current code is not disabling the submit button as expected. ...

javascriptjqueryajax

Encounter the following issue: Unable to access property '0' due to being undefined

After restructuring my entire Javascript code, I managed to solve the problem with asynchronous calls. However, an error occurs when editing a repair and the server prompts the client for repair information again. The error message displayed is "Uncaught ...

javascriptvue.jswebsocketsocket.io

What is the best way to incorporate a loop into a React return statement?

After learning React, I decided to develop the Tic-tac-toe game following the official documentation. There were extra tasks listed below the "Tutorial" section, and one of them was: "Rewrite the Board component to use two loops to generate the squares in ...

javascriptreactjsjsx

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

Looking to transform a div with the transform: scale(-1,1) property while using background-clip: text on the text within it. However, this causes the text to disappear. Here's what I've attempted: .reverse { transform: scale(-1, 1); } .gr ...

javascripthtmlcss

Run a script on a specific div element exclusively

Up until this point, we have been using Iframe to load HTML and script in order to display the form to the user. Now, we are looking to transition from Iframe to DIV, but we are encountering an issue with the script. With Iframe, the loaded script is onl ...

javascripthtmliframe

Using Google's Closure Compiler to Optimize JSON Files

When dealing with a json string that is parsed and properties of the object are accessed using dot notation, a warning may be triggered by the google closure compiler stating that the property is not defined. To overcome this issue, one workaround is to c ...

javascriptjsongoogle-closure-compiler

Is there a method for the parent to detect changes in its output when passing around complex objects to its child?

I am facing a challenge with a complex object that is being passed down from a parent component to its child components. The child components further break down this object and pass parts of it to their own children, creating layers of complexity. At times ...

javascriptangular

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

javascriptcsswebdom

Using the $.each loop to iterate through JSON data within the <optgroup>

I am currently working on extracting information from a JSON file and displaying the subsectors within <optgroup label=""> tags in a non-selectable format. The JSON file I am working with looks like this: { "sectors": [ { "title": "Busi ...

javascriptjqueryjsonloopsoptgroup

Increase in textbox size depending on selected dropdown value

Our concept involves offering three choices: Email #1 pulled from the database Email #2 retrieved from the database Input a new email Should the user select option #3, a textbox will expand at the bottom of the dropdown menu for easy entry of a new emai ...

javascripthtmlcss

Making AJAX requests repeatedly within a loop

My current challenge involves implementing multiple ajax requests within a loop to populate several dropdown lists. Running the requests sequentially has resulted in only the last item in the loop being populated with values. var targetcontrols = []; ...

javascriptjqueryajax

Looking for a way to extract information from two nested objects within an array by utilizing lodash, and then transferring it as a property to a react component

My react components require dynamic preloading of values from nested arrays within an array of data. import React, { useEffect } from "react"; export function loadComponent({ config, LayoutRenderer }) { const loadModules = (name) => q ...

javascriptarraysreactjsreact-props

Check for mobile browser without having to refresh the page

Currently, I am facing an issue with closing the sidebar when the user clicks on Click Me button in mobile view using flexbox layout. The problem arises because the page needs to be refreshed for it to recognize if it's in mobile mode or not by utiliz ...

javascriptangularflexbox

In search of assistance with creating a function that can transform an asynchronous function into a time-limited version

Let's discuss the challenge requirements: Given a function called fn that operates asynchronously and a time limit t in milliseconds, the goal is to create a new version of this function with a time constraint. This new function should behave accordi ...

javascriptnode.jsasynchronouspromisetimeout

Serialize a form while keeping the submitted data private

Is there a way to achieve serialization without triggering the submit function for an ajax call? I've searched extensively for a solution to this issue without any luck. The java script function is invoked when a button within the form is clicked. do ...

javascriptajaxforms

Data-bind knockout select knockout bind data

Hello! I am a beginner at using knockout and I have encountered an issue with data-binds and the "option" binding. My goal is to display two drop downs populated with data from my database. Surprisingly, I have managed to get the first drop down working pe ...

javascripthtmlajaxknockout.jsbootstrap-4

Sort through an array of objects using a different array

I am looking to showcase projects based on specific skills. For instance, if I choose "HTML", I want to see all projects that have "HTML" listed in their array of skills. If I select multiple skills, then only display projects that have those exact skills. ...

javascriptreactjs

Even after dynamically removing the class from the element, the Click event can still be detected

My buttons have a design like this: <a class="h-modal-btn branch-modal-btn"> Buy Now </a> The issue arises when I need to remove certain classes and add attributes to these buttons based on the query string in the URL. Skipping ahead ...

javascripthtmljquerycss

Refresh the texture mapping within ThreeJS

Hey there! Just wanted to share that I was able to find a solution by using mesh.material.map.image.src = texture; Here was the original question: I'm working on a ThreeJS project and I'm trying to change the texture on a mesh. Unfortunately, I ...

javascriptthree.js

Tips for incorporating JavaScript code into back4app.com using Objective-C:1. Start by accessing the

Currently, I am trying to retrieve "ServerDate" from back4app.com using PFCloud. Unfortunately, I have encountered the following issue: Invalid function: "getServerDate" (Code: 141, Version: 1.13.0) When I attempted to use the code below: [PFCloud ...

javascriptiosobjective-cparse-platformback4app