How can I draw a single svg path with variable width stroking?

Question

How can I draw this shape using a single svg path?

those parts doesn't seem connected to each other, so probably no. — David, Dec 06 '17 at 11:51
Let's assume that they are connected. Is it still not possible? — abhishek khandait, Dec 06 '17 at 11:52
if they are connected, i would assume that you could draw it with only one svg path. — David, Dec 06 '17 at 11:56
I'm voting to close this question as off-topic because this yes / no question isn't a programming problem. If the question turns to "How do I do this", it's too broad. — Cerbrus, Dec 06 '17 at 11:58
Possible duplicate of [How to convert a PNG image to a SVG?](https://stackoverflow.com/questions/1861382/how-to-convert-a-png-image-to-a-svg) — ashleedawg, Dec 06 '17 at 12:08
Now that you changed the question to _"How"_, this question is too broad. — Cerbrus, Dec 06 '17 at 12:26

score 7 · Accepted Answer · answered Dec 06 '17 at 22:17

You can do it with a single path, but currently there's no such thing as variable width stroke. Instead, such a shape can be drawn using fill on a path criss-crossing itself:

#hide-stroke:checked ~ svg path {
  stroke: none;
}

svg {
  display: block;
}

<input id="hide-stroke" type="checkbox" />
<label for="hide-stroke">Hide stroke</label>

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0,0 200,100" >
   <path d="M20,80  q26,-100 53,-25  q26,75 53,0  q26,-90 53,0  q-26,-70 -45,-10  q-26,80 -70,0  q-25,-40 -37,0" 
         fill="black" stroke-width="1" stroke="limegreen" />
</svg>

I can't add an answer this question is closed. The answer is no you cannot do this in SVG as a single stroke. There is a proposal to change SVG to support it: https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke — user1529413, Jul 04 '22 at 14:50

How can I draw a single svg path with variable width stroking?

1 Answers1