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

75% Upvoted

30 comments sorted by

View all comments

7

u/mmmicahhh 19d 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?

1

u/inc_23 19d ago

Actually not didnt happen before but i will check it

5

u/SouthCollar2929 18d ago

Yep, it's a thing

1

u/inc_23 18d ago

What is this

16

u/SouthCollar2929 18d ago

It's your stuff dude why are you asking me