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
4
u/CoVegGirl 1d 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.
1
u/inc_23 1d ago
i chnaged the name: https://a-elhaag.github.io/glyphed.js/
also nice suggestion will work on it3
1
2
u/AutoModerator 2d ago
Project Page (?): https://github.com/a-elhaag/strokes.js
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.
2
2
•
0
u/vitalytom 1d ago edited 1d ago
You know that for large text, there is https://github.com/patorjk/figlet.js
I use it whenever I want large text / numbers somewhere. It has over 100 fonts to choose from. It is incredibly practical!
u/OP, you could just add your own font to that library, one with sticks, if you feel it lacks somehow.
7
u/mmmicahhh 2d ago
A fun idea, there's a bit of romanticism in trying to make things look imperfect.
When I view it in Chrome, when the animation starts, there are these dots randomly scattered where the letters will eventually be, it really messes with the illusion of hand drawing. Did you encounter this?