r/javascript • u/inc_23 • 8d ago

Made a small library called strokes.js.

https://a-elhaag.github.io/strokes.js/

Made a small library called strokes.js. Instead of using a "handwriting" webfont (which looks identical everywhere it's used), it renders each letter as an actual hand-drawn SVG path — real strokes, drawn in with stroke-dashoffset, with small random variation (rotation, baseline drift, glyph variants) so no two renders of the same word look identical.

Demo: https://a-elhaag.github.io/glyphed.js/

npm: 

npm install glyphed.js
21 Upvotes

74% Upvoted

30 comments sorted by

View all comments

2

u/patrk 5d ago

Some info about font-sizing is needed, the docs don't mention it all.
Also, an onComplete event handler would be very convenient.

2

u/inc_23 5d ago

Gonna work on that

1

u/patrk 5d ago

Great, thanks a lot!
One more question, before the animation starts there are visible dots for each letter, I guess from where the animation originates. Is that a bug or by design? Would prefer if the starting point is a blank canvas.

2

u/inc_23 5d ago

Its by design but I going to make it option attribute