Haklo — Ensō Brush Stroke Techniques

SVG feTurbulence Filter

No Assets · Easy

Authenticity★★★

AnimatableFull draw-on

RN supportLimited

Effort~1 hour

SVG filter roughens the stroke edges at render time. Better than plain stroke but noise feels mechanical at close inspection.

Canvas Brush Simulation

Pure Code · No Assets

Authenticity★★★★

AnimatableFull, frame-by-frame

RN support✓ Skia

Effort~1–2 days

Hundreds of overlapping semi-transparent bristle dots with pressure simulation. The draw-on IS the animation — organic by construction.

PNG / Real Brush + Clip Reveal

★ Production Pick

Authenticity★★★★★

AnimatableClip rect reveal

RN support✓ Image + mask

Effort~4 hours

Paint the real ensō in Procreate on transparent canvas. Export PNG @3×. Animate a clip-rect sweeping across to reveal it. Authentic by definition.

Variable-Width SVG Path

Scalable Vector

Authenticity★★★★

AnimatableClip reveal only

RN support✓ SVG

Effort~1 day SVG craft

Layered strokes at different widths and opacities fake brush pressure. Scales infinitely. Draw-on dashoffset doesn’t work on filled paths — clip reveal is the workaround.

Lottie (After Effects)

Highest Fidelity · Requires AE

Authenticity★★★★★

AnimatableFully native

RN support✓ lottie-react-native

Effort1–2 days (AE)

Real brush stroke animated frame-by-frame in After Effects. Lottie JSON (~15KB) plays back identically on every platform. Permanent brand asset.

Static Preview Only

Recommended path for Haklo

Now (Option 03)

Paint the ensō in Procreate on a transparent canvas. Export PNG @3×. The clip-rect reveal animation is ~20 lines of code and gives 100% authentic ink texture immediately.

Before launch (Option 05)

Commission the Lottie file from a calligrapher + AE animator. The JSON becomes a permanent cross-platform asset — the only approach where the ensō is painted by a human hand every time the app opens.

Pure code fallback (Option 02)

The Canvas/Skia brush simulation requires no external assets. Use as the React Native fallback while the Lottie file is in production. React Native Skia gives the same API with GPU acceleration.

What to avoid

Option 01 (SVG filter alone) looks recognizably filtered rather than painted. Option 04 (variable-width SVG) is elegant but the clip reveal breaks the gestural illusion.