How to make react native svg path smoother

Question

I am creating a mobile application with an image editor using react native. I am using react native svg's LineTo (L) function to draw the lines (as shown in the image). Is there a way to make the path smoother?

Answer 1

In order for your editor to have the opportunity to draw lines with smooth transitions, you need to add the functionality of drawing bezier curves to it.

For example, as @Peter Collingridge's Bezier Curve Generator did

Using Bezier curves, your curve will look like this

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50%" height="50%" viewBox="0 0 988 1132" preserveAspectRatio="xMinYMin meet">
 
  <path  d="m572.1 38c0 0-31.9-1.7-46 4.6-61.6 27.5-108 83.2-149.6 136.4-38 48.6-66.9 104.9-88.2 162.8-21.7 59.1-35.4 122-39 184.8-2.5 43.1-2 88 11.9 128.9 16.3 48.1 41.6 97.2 81.4 128.9 46.9 37.3 109.8 56.4 169.6 59.4 59.8 3 119.4-19.3 174.7-42.4 23.9-10 46.2-23 66.1-40.7 19.9-17.8 35.6-40.6 47.5-64.4 12.4-24.8 22.1-52 23.7-79.7 1.4-23.5-1.5-48.4-11.9-69.5-7.7-15.8-16.9-30.2-35.6-39-35.4-16.7-80.4-18.6-117-5.1-96.4 35.6-205.4 182.9-225.5 210.3-22.1 30.1-72.2 126.1-93.3 195-8.9 29.2-11.7 60-13.4 90.5-0.6 12.2 1.5 36.7 1.5 36.7" style="fill:none;stroke-width:8;stroke:#e91d1d; stroke-linecap:round"/>
</svg>