How to make react native svg path smoother

user_10665516 0
Viewed 809

I am creating a mobile application with image editor using react native.
I used react native svg to draw lines on an image but it outputs sharp edges (as shown in the image) since Im just using the LineTo (L) to connect the points.
Do you guys have any idea on how to make the path smoother.
I already set the strokeLineCap and strokeLineJoin to be rounded.

output of react native svg path (L)

expo react-native svg
1 Answers

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

enter image description here

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>

user_73948710
Related