Bezier | Algorithm to draw smooth bezier curves through a set | Learning library

I have a CSS-type cubic bezier where
A = 0,0
B = a, b where 0<1
C = p, q where 0

<1
D = 1, 1

I want a function pointOnBezier(a,b,p,q,x) => {x:x, y:y}
I've found this which helps but no mathematical formula😓
https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif
Any help would be appreciated. Thanks in advance!!!

I use the micro modal js package in my project but I have a problem. this modal closed when occurring mouse down or mouse up event Outside the medal range. but I want mouse-up event Do not do anything and just mouse-down event can close the medal. this is my HTML code.

I uploaded my code and svgs to this github repo.

I have some svgs of some circles, blobs and triangles. I am trying to make the circles shake, like how the guy shakes in this code pen when you hover on him, I am trying to make the blobs move like waves like in this code pen, and I'm trying to make the triangles spin around. The blobs and triangles are not responding at all, even though I can see that they have the styling applied when I inspect the html. The circles have some effect, but not the one I want.

Here is the code for each

circles.scss

I searched for it for a long time, and I have already seen many questions including the two:

How to draw Arc between two points on the Canvas?

How to draw a curved line between 2 points on canvas?

Although they seem like the same question, I'm very sure they are not the same. In the first question, the center of the circle is known, and in the second, it draws a Bezier curve not an arc.

Now we have two points A and B and the curve radius given, how to draw the arc as the image shows?

Since Path.arcTo's required arguments are RectF, startAngle and sweepAngle, there seems hardly a easy way.

I now have my solution, I'll show that in the answer below.

Since the solution is so complex, I wonder if there is a easier way to solve it?

update: After discussing with others, I decided that it is a bit silly question. I wanted to animate Bezier curve with changed width, but it has no width property. with Line Bezier, I can change width, but then can't animate.

I can't change witdh of Bezier curve like Line.
here is the code:

I'm looking for a way to add another layer of hexagon bezier path like the ones below.

I have been able to create Hexagon using bezier path and animate accordingly but I am trying to add another grey colour layer of bezier path. I tried adding multiple bezier paths but it doesn't work.

This is the output I achieved.

Here is my LoaderView class

I have built a grid, and centered it in the middle of the page with top: 50%; left: 50%; transform: translate(-50%, -50%);

The code above centered the grid exactly as i needed it to, in the middle of the page, but it also seems to have put the grid over the image. I need to put the grid under the image, centered in the middle of the screen.

The merge portion of my question has been well answered here: https://stackoverflow.com/a/49051988/4272389 which resolved two LineGradients with one line node and the other a path node.

In my situation I have an Open Bezier path and a Line path and am not sure if that answer for LineGradient still applies

I have started making a small app in Electron, and want to make a loading screen.

But every time I add the animation to the container div, it gives its background color weird color banding.

Here's an image of it.

Basically the top is a color I do not even use anywhere, while the bottom is the actual color I want.

Here's an image with the animation disabled.

1. Ran the website in Edge, did produce the color banding.
2. Ran the website in the snippet, did not produce the color banding.
3. Tried setting the background color in the animation itself, did not fix the problem.