How to draw S- Curve in SVG? - html

Question

Please help me to draw something like this using SVG.
<svg class="slide__overlay" viewbox="0 0 100 100" preserveAspectRatio="none"><path class="slide__overlay-path" d="M0,0 L100,0 C25,50 50,75 0,100z" /></svg>
I got this code from an old question. But i need to rotate this.
Thanks

Answer 1

so the easiest way to do this is to just rotate your shape:
transform="(-90, 50, 50)"
<svg viewbox="0 0 100 100" width="200" height="200">
<path transform="rotate(-90, 50, 50)" d="M0,0 L100,0 C25,50 50,75 0,100z"/>
</svg>
but let me explain to you how the path commands work... in the end, we will have a much nicer solution to your rotation problem...
so let's look at your path commands.
"M0,0 L100,0 C25,50 50,75 0,100z"
M0,0 means move to the coordinate 0,0 which is the top left corner of your image.
L100,0 is the line to command which draws a line from our current point (0,0) to point 100,0. 100 to the right and 0 down is the right to corner.
next up is the curve to command C25,50 50,75 0,100. the last two numbers are the coordinates your path will end at. 0,100 is your bottom left corner. and then you have the two control points. to understand these a bit better I have added a circle at each of these coordinates to your original drawing:
<svg viewbox="0 0 100 100" width="200" height="200">
<path d="M0,0 L100,0 C25,50 50,75 0,100z" opacity="0.5"/>
<g>
<line x1="100" y1="0" x2="25" y2="50" stroke="green" stroke-width="0.5"/>
<circle cx="25" cy="50" r="2" fill="green"/>
</g>
<g>
<line x1="0" y1="100" x2="50" y2="75" stroke="blue" stroke-width="0.5"/>
<circle cx="50" cy="75" r="2" fill="blue"/>
</g>
</svg>
as you can see, the control points determine the angle of the curve at the endpoints as well as the slope of the curve itself.
so to rotate your curve we start with the endpoints again:
what was your top left corner (0,0) will end up on the bottom left (0,100).
M0,100
then the line to command will end up in the top left corner L0,0
and the curve to command will end up in the bottom right corner (100,100)
Cx1,y1 x2,y2 100,100
but where to draw your control points?
your first control point (25,50) will end up 25 from the bottom and 50 from the left so at 50,75
your second control point will have to end up 25 from the right and 50 from the bottom. so at 75,50
so the curve to command looks like this: C50,75 75,50 100,100
to wrap it all up, here is your rotated path:
<svg viewbox="0 0 100 100" width="200" height="200">
<path d="M0,100 L0,0 C50,75 75,50 100,100z" opacity="0.5" fill="red" />
<g>
<line x1="0" y1="0" x2="50" y2="75" stroke="red" stroke-width="0.5"/>
<circle cx="50" cy="75" r="2" fill="red"/>
</g>
<g>
<line x1="100" y1="100" x2="75" y2="50" stroke="red" stroke-width="0.5"/>
<circle cx="75" cy="50" r="2" fill="red"/>
</g>
</svg>

Answer 2

In order to exactly repeat the shape of the curve as in the figure, you need to load the image into a vector editor.
And draw nodal points along the contour
Save file as SVG.
And copy only path to another file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100vw" height="100vh" viewBox="0 0 688 535" preserveAspectRatio="xMinYMin meet">
<path d="m4.8 11.6c0 0 34.3 55.4 56.1 79.3 25.6 28.2 55.7 52.3 86.6 74.5 36.1 26 75.7 46.7 114.6 68.1 26.5 14.5 54 27.3 81 40.9 27 13.6 54.2 26.8 81 40.9 23.2 12.2 46.6 23.9 68.9 37.7 27.6 17 54.9 35 80.1 55.3 25.6 20.6 50.3 42.7 72.1 67.3 13.2 14.9 35.3 48.1 35.3 48.1H4.8Z" style="fill:#5B7E95;stroke:none"/>
</svg>

Answer 3

You can use any of the online PNG to SVG convertor tools available. Also there are many opensource sites available for free hand drawing.
Examples
https://shapeshifter.design/
https://editor.method.ac/
For conversion of PNG to SVG you can use
https://image.online-convert.com/convert-to-svg
https://www.pngtosvg.com/