Path with decreasing stroke SVG

I’m writing a program in Julia that creates SVG images. My program generates the figure on the left, and I want the same figure, but with a decreasing stroke, like the one on the right (dont mind the colour):

curves

How can I achieve this effect? Here is the SVG image source code in case it helps:

<svg
    xmlns="http://www.w3.org/2000/svg"
    height="161.7875" width="97.609375"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M38.3,131.8 Q72.25,103.9 70.44,93.44 M70.44,93.44C68.6,83.0 29.0,78.9 27.16,68.44 M27.16,68.44Q25.31,58.0 59.3,30.12"
    style="stroke:#0000ff;stroke-width:1px;stroke-opacity:1;fill:none"
    />
    <circle cx ="59.3" cy="30.12" r="2"
        style="
            stroke= #000000;
            stoke-width: 1;
            fill: #000000;
        "
    />

</svg>

Answer

Since you don’t give details on which technology you use to create your SVG file, it’s hard to advice. However, I assume you could need some javascript in order to create some sort of “brush style”.
See this interesting example from https://bl.ocks.org/maelp/5913757:
stroke

Attribution
Source : Link , Question Author : Jennifer Hurtado , Answer Author : Vinny

Leave a Comment