DEV Community

netsi1964 πŸ™πŸ»
netsi1964 πŸ™πŸ»

Posted on

Faked SVG path stroke pattern

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.

Top comments (0)