Coordinates for a svg bezier curve of length 0

Question

I want to animate 2 svg paths. for this thy need similiar nodes. if path1 has a bezier, path2 must have it too at same node. So I insert c0 0 0 0 0 0 to path2. but it changes the 2nd shape. What can I do?

<html>
 
        <title>Page Title</title>
    </head>
    <body>
        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
 preserveAspectRatio="xMidYMid meet">

           <g 
fill="#000000" stroke="none">
               

<path fill ="red" d= "m50 50 50 50 100 100 50 100" />
<path d= "m0 0 50 50 100 100 50 100" />
<path fill = "blue" d= "m0 0 c0 0 0 0 0 0 50 50 100 100 50 100" />

</g>
</svg>
        
    </body>
</html>

you will need to use the same coords as the previous command. For example instead of `M10,10L50,10L90,90` you can write `M10,10L50,10C50,10 50,10 50,10L90,90` If this is not kelping please edit your question and add at least the d attribute mentioning the position where you need to add the bezier — enxaneta, Sep 22 '20 at 16:36
I have relative coordinates https://code.sololearn.com/WvyA4BJ3Hiqh/?ref=app — user9507356, Sep 22 '20 at 17:14
Please edit the question and add a [mininal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), i.e. a specific sample simple path — Jan Stránský, Sep 23 '20 at 09:20
Finally I want the blue shape being like the black shape by keeping the Bezier Curve in the path. The curve should be a "neutral element" . — user9507356, Sep 23 '20 at 12:10
if path1 has only one Bezier, path2 also must have exactly one.otherwise morphing wont work. — user9507356, Sep 23 '20 at 14:40

score 1 · Answer 1 · answered Sep 23 '20 at 14:10

The path definition

m 0 0 50 50 100 100 50 100

Is equivalent to

An equivalent bezier curve to that might be

m 0 0
c 0 0 50 50 50 50
c 0 0 100 100 100 100
c 0 0 50 100 50 100"

I am choosing to put the first control point at the start of the line/bezier. And the second at the end. I could have chosen to put them both at the start, or both at the end.

If you were using the path for animated motion, you should place the control points at the 1/3 and 2/3 point along the line. Eg.:

m 0 0
c 16.7 16.7 33.3 33.3 50 50
c 33.3 33.3 66.7 66.7 100 100
c 0 0 16.7 33.3 33.3 66.7 50 100"

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
 preserveAspectRatio="xMidYMid meet">

  <g fill="#000000" stroke="none">

    <path fill ="red" d= "m50 50 50 50 100 100 50 100" />
    <path d= "m0 0 50 50 100 100 50 100" />
    <path fill = "blue" d= "
      m 0 0
      c 0 0 50 50 50 50
      c 0 0 100 100 100 100
      c 0 0 50 100 50 100" />

  </g>
</svg>

for morphing path1 must be mapped to path2. So I must add exactly one node. — user9507356, Sep 23 '20 at 15:05
As I said, the first two paths are equivalent. Depending on your browser, you may need to use the non-shortcut form with 'm' and 'l'. There is no shortcut form for the bezier curve case. — Paul LeBeau, Sep 23 '20 at 17:00
if you're using `c` instead of `q`, don't make both control points lie on the same coordinate, or overlap the start or end coordinate. Instead, use `m 0 0 c 33 33 66 66 100 100`. (first control at 1/3rd between start and end, second control at 2/3 between start and end). — Mike 'Pomax' Kamermans, Sep 25 '20 at 21:54

Coordinates for a svg bezier curve of length 0

1 Answers1