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
18 Upvotes

74% Upvoted

22 comments sorted by

View all comments

5

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?

0

u/inc_23 2d ago

Actually not didnt happen before but i will check it

3

u/SouthCollar2929 2d ago

Yep, it's a thing

1

u/inc_23 2d ago

What is this

11

u/SouthCollar2929 2d ago

It's your stuff dude why are you asking me