SAMPL Tool

SAMPL is a web-based generative typography tool that lets you reshape text using geometry and motion. When you type a letter, word, or text, each glyph is converted into a vector outline. Points are then sampled along this outline and used as anchors for geometric shapes that can be customized and animated, controlling their amount, size, rotation, color, and movement.

The tool allows experimenting with a wide range of visual materials — from simple geometric primitives to gradients and image-based fills. Users can adjust colors, transformations, motion, and deformation, turning type into a flexible visual system rather than a fixed design.

A powerful animation engine provides control over position, scale, and rotation, allowing motion to be both rhythmic and expressive. Users can choose a font from Google's vast library or seamlessly import any custom fonts on the canvas through drag-and-drop functionality.

SAMPL provides flexible export options, and its main advantage is the ability to export graphics in scalable SVG format. Animations can be exported as MP4 video files or as sequences of PNG/WebP images, which can be compiled into videos with tools like the FFmpeg library or similar.

As always, the tool offers ready-to-use presets for quick starts. Designers can save and load their custom presets in JSON format, making it easy to revisit and continue their creative projects.

Performance and compatibility

Some technical tips regarding the use of the tool:

• Fonts: The program supports fonts in OTF, TTF, WOFF formats. But some fonts may not be read properly resulting in an error. Also, in some cases, font features such as kerning or ligatures may not be properly handled.

• Video Export: During export to video, the process may stop due to insufficient memory, especially with high resolution or long videos. If this happens, try reducing the resolution or length of the video. For large or high-resolution videos, consider exporting as a PNG sequence and later converting it to a video using the FFmpeg library. When exporting to MP4 format, a library-related lag can lead to performance drops, causing the program to slow down noticeably after capturing and exporting the animation. Refreshing the page resolves this issue.

• SVG Export: Exporting to SVG format is a demanding task can take a significant amount of time, that you may get a warning message about the page not responding - don't pay attention, just be patient. Besides this, in the current version, bitmap texture is not supported and will be omitted during export.

• Mobile Support: The program is not designed to run on mobile devices.

• Screen size: A minimum resolution of 800x600 is required.

Please let me know if you're running into any issues or discover a bug while using the program.

Credits

I would like to acknowledge the use of several third-party libraries and materials within this project and express my sincere gratitude to their creators for making these resources available:

• The p5.js ↗ Creative Coding Library, a product of the collective efforts of an incredible team;
• The Tweakpane ↗ interface library, ingeniously developed by Hiroki Kokubun;
• The Opentype.js ↗ library that lets you bake cookies out of font files;
• The Paper.js ↗ project allowing to make magic with SVG format;
• The super quick Simplex Noise ↗ algorithm developed by Jonas Wagner;
• The p5.capture ↗ library by tapioca24 for recording animations;
• The sick Pilowlava ↗ font by Velvetyne studio
• The unique Misto ↗ font by Kateryna Korolevtseva