title: Faked SVG path stroke pattern published: true tags: codepen, svg, stroke patterns


A stroke of an SVG shape can have only one constant shape. Though vector drawing apps like Affinity Designer and Adobe Illustrator offers advanced stoke patterns, it has not yet landed in SVG. This little pen uses a very heavy and not very method to generate something which looks like patterns, but certainly is not. It uses a combination of adding many copies of the path and changing the stroke-dasharray to only draw a 1 pixel wide path, which at that given point have the calculated stroke-width. Fun, to play with, but not intended for real-world use.

{% codepen https://codepen.io/netsi1964/pen/yLBMYPo %}