Handwriting Text SVG

Example 1 — Preset: ink

Thin 2px stroke with a subtle SVG ink-texture filter. Fill reveals after the stroke finishes.

<script src="https://cdn.jsdelivr.net/gh/clonegarden/squarespaceplugins@latest/handwriting-text-svg/handwriting-text-svg.min.js?text=Hello%20World&preset=ink&targetId=demo-ink&width=880&height=180&fontSize=90&duration=3&fillReveal=true"></script>

Example 2 — Preset: marker

Thick 6px rounded stroke — a broad marker or brush feel. Different font and left-aligned.

<script src="https://cdn.jsdelivr.net/gh/clonegarden/squarespaceplugins@latest/handwriting-text-svg/handwriting-text-svg.min.js?text=Creative%20Studio&preset=marker&targetId=demo-marker&width=880&height=180&fontSize=80&align=left&padding=32&duration=2&fillReveal=true&strokeColor=222222&fillColor=222222"></script>

Example 3 — Repeat loop, stroke only

The stroke draws continuously in a loop. Fill reveal is off so only the stroke is visible — like a neon sign being re-traced.

<script src="https://cdn.jsdelivr.net/gh/clonegarden/squarespaceplugins@latest/handwriting-text-svg/handwriting-text-svg.min.js?text=Always%20Writing&preset=ink&targetId=demo-loop&width=880&height=180&fontSize=80&strokeColor=ffffff&fillColor=ffffff&fillReveal=false&repeat=true&repeatDelay=1&duration=2.5"></script>

Example 4 — Squarespace position targeting

In production you don't need a targetId. The plugin auto-inserts before the first page section (default), after the header, or before the footer.

<!-- Insert before first Squarespace section -->
<script src="...handwriting-text-svg.min.js?text=Welcome&preset=ink&position=first-section"></script>

<!-- Insert after the site header -->
<script src="...handwriting-text-svg.min.js?text=Our%20Story&preset=marker&position=after-header"></script>

<!-- Insert just above the footer -->
<script src="...handwriting-text-svg.min.js?text=Thank%20You&preset=ink&position=before-footer"></script>
  