I saw a video in Youtube where an obviously experienced svg specialist draws everything with his hands as any vector editor generates a lot of extra code: https://www.youtube.com/watch?v=_y2YZux5wZI

So: I did not quite understand how and from where he took these coordinates of the curve.

The question is, how to get the coordinates of the curves with your hands, without special software?

For example :

 <svg width="400px" height="300px" preserveAspectRatio="none"> <defs> <style> #path1{fill:none; stroke:red; stroke-width:2px;} </style> </defs> <g style="transform:translate(220px,-50px)" preserveAspectRatio="none"> <path id="path1" fill="none" stroke="red" d="m 154 187 c -197 -86 -363 -135 -371 0z" /> </g> </svg>

There are coordinates:

  m 154 187 c -197 -86 -363 -135 -371 0z

how to get them manually ...? how to calculate .. naturally for minimizing SVG markup points and other things

I know how to use corel illustrator, inkscape, but I'm interested in exactly how to do curves with my hands.

In codepen, I made a demonstration: https://codepen.io/topicstarter/pen/oOYywb

where there is a path and, exactly according to the coordinate, I arranged a circle, and the most interesting thing is that only two points coincided: this is the beginning and the end of the path, but the other points are not

enter image description here

  • What does it mean to get the coordinates of the curves? Build them with straight lines? - MBo
  • @MBo yes! not programmatically ... that is, not a corel, not a chandelier, not an inkskape, namely, a manual one .. how to draw them ... that form you need - MaximLensky
  • one
    но остальные точки нет see the paragraph after the formula - MBo
  • one
    @MaximLensky is visually easy enough to imagine the location of these points if you see something once bl.ocks.org/joyrexus/5715642 - Stranger in the Q
  • one
    @MaximLensky not for that, if you connect the control points to each other, you can see the edges of the polygon, to which the line tends, if you always see these edges, it is easier to visually understand how the curve itself - Stranger in the Q

2 answers 2

A cubic Bezier curve is defined by a parametric equation using control points.

 P(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3

P0 and P3 are the start and end points, P1 and P2 are control points, which generally do not lie on the curve, they specify the direction of the curve from the end points.

According to this equation, you can calculate the points of the curve (separately X and Y coordinates) with the necessary step in t - for example, with a step of 0.01 in the range t = 0..1 and connect them with segments.

In practice, the recursive division method (Bezier subdivision) using the de Castelgio algorithm is more often used - the middle point of the curve is found

 P(1/2) = 1/8* (P0 + 3P1 + 3P2 + P3)

and estimated how far it is from the segment connecting the start and end point. If close - you can just draw a straight line segment, if far away - the curve is divided into two curves, for each procedure is repeated. This allows you to build fewer segments on smooth sections and more on sections with a large curvature for more accurate reproduction of the form, i.e. the method is adaptive.

Even more adaptability (or rather, a more accurate assessment of the need for further partitioning) can be achieved, for example, using the adaptive partitioning of Maxim Shemanarev (there is a code in C)

    So: I do not quite understand how and from where he took these coordinates of the curve

    Judging by the presence in the formula of the patch d="m 154 187 c -197 -86 -363 -135 -371 0z" command
    "С" is the Cubic Bezier curve

    enter image description here

    Hands, that is, manually select the coordinates to achieve the desired shape of the curve - this is of course a bust. For this purpose, in order not to bother with vector editors, there are Bezier curve generators .

    Here's your curve

    enter image description here

    How convenient is such a generator compared to vector editors?

    • The code is clean, which can be copied unchanged.
    • Moving the control points is visible the process of changing the curve
    • By copying several positions of the curve, you can do different animations with the attribute "d"

    Animation example

     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" > <path fill="dodgerblue" stroke="gold" stroke-width="3" d="M70,111 C73,23 241,33 352,111 " > <animate attributeName="d" dur="3s" values="M70,111 C73,23 241,33 352,111; M70,111 C190,58 349,39 352,111; M70,111 C73,23 241,33 352,111" repeatCount="indefinite"> </animate> </path> </svg>

    • one
      strange that ... I was not notified of the answer, put + - MaximLensky
    • @MaximLensky Yes, there are such failures and in the chat earlier it was blamed for a new appeal, now, for some reason, silence - Alexandr_TT