Antlii 🇺🇦's profile

RASTR → Typography Art Web Tool

UI/UX


RASTR Tool
Web tool for rasterising text into graphics & motion art

RASTR is a powerful web-based tool built on p5.js, designed to transform text into captivating typography graphics and kinetic motion art based on the custom rasterization algorithm and geometric shapes. The program allows users to choose from an extensive library of fonts available on Google Fonts, or to upload their custom fonts, for a personalized touch to the final result.

The tool also offers a range of export options, allowing users to save their creations in high-quality vector SVG or bitmap PNG formats. For animations, users can export in high-resolution WebM format or select a WebP/PNG sequence. 

In addition, the program provides the ability to export and import program settings as custom presets in JSON format. This feature allows users to save their text and graphical settings so that they can easily access them when needed.

Link to the tool:

Get a license:



Get a quick overview of how to use the program by experimenting with a few key settings, from the wide list of available in the program



Presets

The program is quite straightforward to use, but I totally understand how the variety of features and settings can be overwhelming for first-time users. 

Therefore, my recommendation for a quick and efficient start would be to explore the Presets section. This will give you an idea of the tool's features, and also allow you to make something of your own using off-the-shelf solutions.

Standard preset | Ugly is the new black
Standard preset | Blue sky screams, no answer comes
Standard preset | Every sunrise casts a longer shadow
Standard preset | Text as Texture
Standard preset | Crying is my cardio
Standard preset | I wear socks with sandals
Standard preset | One rastr a day
Standard preset | See you next time
Standard preset | The End




Animation

The tool offers basic animation capabilities, such as particle position manipulation through noise-based displacement and periodic motion driven by trigonometric sine and cosine functions.

While the program only animates the position of particles on the canvas for now, it is capable of more! In few examples below, I've animated the size of shapes or the angle of gradients using periodic functions, demonstrate how I could easily expand the program's particle animation features.


Custom Preset | Shivers on my spine
Custom Preset | ISOMETRIC
Custom Preset | Ghost In The Shell
Custom Preset | INHALE EXHALE
Custom Preset | Is there life outside the grid?
Standard preset | Love, Death and Robots
Standard preset | Die Sci-Fi




SVG Export

A key strength of the tool lies in its ability to export your work as SVG vector graphics. This is achieved through a custom-developed SVG converter that captures all transformations applied on the canvas, ensuring accurate representation in vector form.

As a result, the exported SVG graphics can be scale to any size and remain editable within any vector editing software. This surpasses the limitations of bitmap formats, which can suffer from quality loss when scaled or edited.​​​​​​​​​​​​​​

To demonstrate this functionality, I have created a basic sketch that you can try right here, as Behance provides a feature that allows embedding scripts directly into a project. You can input text which will be rasterized by the program algorithm, and then export it to an SVG file.
Interactive Playground → Feel free to write any text and export it as SVG graphics



Tech Notes

The tool should run smooth in Chrome and Firefox browsers, but it most likely won't work in Safari so please keep that in mind.

For an optimal experience, use a desktop or laptop with a minimum screen resolution of 800x600 pixels. The program's performance depends heavily on your processor's power.

Fonts may take some time to load, and certain fonts may not display correctly.
The WOFF2 font type currently isn't supported.

When saving graphics as SVG, note the following restrictions:
 - Emoji and most of special characters are not supported.
 - Color fonts are not supported.

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

Showcasing some randomly selected fonts from Google's 1600+ collection, making them instantly usable within your project


License

The tool is available for anyone to try at the following link:
https://antlii.work/RASTR-Tool

The free version is fully functional but adds watermarks to exported graphics and restricts access to saving in SVG format. This allows you to thoroughly evaluate its capabilities and test everything out before deciding if it's the right fit for you.

To remove watermarks/restrictions and obtain usage rights for the tool, please get a license key at Gumroad.​​​​​​​


RASTR → Typography Art Web Tool
Published:

RASTR → Typography Art Web Tool

RASTR is a powerful web-based tool built on p5.js, designed to transform text into captivating typography graphics and kinetic motion art based o Read More

Published: