A web tool to generate the timing texture of a handwriting animation effect from a PNG logo, painted directly with the mouse — no Photoshop or Figma needed.
Live demo: https://simerca.github.io/Handwriting-GrayScale/
A grayscale image, the same size as the logo, that encodes the drawing order pixel by pixel:
| Value | Meaning |
|---|---|
| Black (0) | First pixel drawn (animation start) |
| Gray (0.5) | Mid-animation |
| White (1) | Last pixel drawn (animation end) |
Used in a shader, it lets you progressively reveal the logo following a natural writing order — as if a hand were drawing it.
Painting this texture by hand in Photoshop is tedious: you have to trace a manual gradient that follows the logo strokes in the correct order. This tool flips the problem:
You paint freely with the mouse, the timing is recorded automatically, and the logo itself acts as a stencil to clean up the smudges.
Result: a "messy" stroke with the right timing → a clean timing texture, masked by the logo shape.
- Open the live demo (or clone the repo and open
index.html). - Import the PNG of the logo (button or drag & drop).
- Adjust the brush size to match the stroke thickness.
- Choose the mask mode:
- Alpha — logo on a transparent background (most common case)
- Dark — black logo on a white background
- Light — white logo on a black background
- Paint the stroke in the natural writing order. The blue → red overlay shows the timing in real time.
- (Optional) Preview animation to validate the result.
- Export PNG → downloads
timing-texture.png.
You don't need to be precise: the mask handles the cleanup. Focus only on the order of strokes.
| Unpainted option | Behavior for logo pixels you didn't paint |
|---|---|
| White (default) | Rendered last in the animation |
| Black | Rendered first |
| Transparent | Excluded from the animation |
- HTML + Canvas 2D + vanilla JS, single-page, zero dependencies.
- Everything is client-side: no image is uploaded anywhere.
- A
Float32Arraystores the timestamp of the first brush stroke for each pixel; on export, these values are normalized to[0, 255]and masked by the logo shape.
git clone https://github.com/Simerca/Handwriting-GrayScale.git
cd Handwriting-GrayScale
open index.html # or double-clickNo build, no server — it's just an HTML file.
Served by GitHub Pages from main / root. Any commit to main redeploys automatically.
MIT