• Check out the npm package here
• And play around with the brushes here

‍

A major challenge when translating web designs into web pages is figuring out how to recreate the same visual style with a completely different set of tools.

‍

For our most recent story, Does X Cause Y?, which introduces causal inference through a gentle and approachable lens, we wanted the graphics to carry a hand-drawn, sketch-like style to add levity to the technical concepts. But as we began developing our Figma wireframes into code, we ran into a seemingly strange roadblock. There didn’t seem to be any existing technique to generate these brush strokes in JavaScript. We couldn’t just export them as static assets, because our data was dynamic. So the brush strokes had to be generated live.

‍

Peeved by the idea that this simple desire had no solution, we built our own.