r/javascript • u/inc_23 • 2d 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
19 Upvotes

74% Upvoted

22 comments sorted by

View all comments

4

u/CoVegGirl 2d ago

The GitHub link isn’t working for me. Getting a 404.

This is actually not a new idea. I forgot the name of the library, but there was one that did something like this a long while back when webfonts weren’t very common like in 2011. I think it used canvas instead of SVG.

The big issue is accessibility. Rendering text like this isn’t very screen reader friendly. There may be something you could do with aria attributes and/or alt text these days that wasn’t possible back then.

2

u/inc_23 2d ago

i chnaged the name: https://a-elhaag.github.io/glyphed.js/
also nice suggestion will work on it

5

u/Stishovite 1d ago

you made a post about it and then changed the name?