How to draw curves in svg?

Question

Please give me example code, And explain the command.....

Answer 1

using path..

example:

<svg height="400" width="450">
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />

Explanation:

100 = left margin for curve start point (x)
350 = top margin for curve start point (y)
q = quadratic Bézier curve (to draw curve)
150 = center point for the curve (curve ending point(x) / 2)
-300 = curve direction ( <0 for up, >0 down, 0 = straight line)
300 = curve ending point (x)
0 = curve ending point (y) (always 0 for same point position(y) with curve start point )

I hope you understand what I mean. Forgive me can't explain more details, and correct me if im wrong

Answer 2

https://code.sololearn.com/WNAB98G0h0jC/?ref=app

Answer 3

My linked code use also svg <path> element as good explained by @Mugfirfauzy Siregar, and animation is done by animating stroke style property (dashed border with dash/space size growing/reducing for simulating the realtime draw ;)

Answer 4

@Mugfirfauzy thanks for explanation.
It is really good.

Answer 5

@visph can you explain it?
Or, tell me other way....

Answer 6

Thanks to all (siregar and visph)

Answer 7

@Ankur Dutta Jha you're welcome..