Alphabet SVG Path Library

A TypeScript library that provides SVG path data, line segments, and fillable glyph outlines for rendering letters, numbers and basic symbols. Each character is normalized to fit within a 1x1 unit square.

Features

• SVG path data for letters A-Z, numbers 0-9, and common symbols
• Normalized coordinates (all paths fit in [0,1] x [0,1] bounds)
• Line segment representation for each character
• Closed polygon outlines generated from the stroked glyph geometry
• Support for basic punctuation and mathematical symbols

Installation

To install dependencies:

bun install

Usage

The library exports:

• svgAlphabet: Raw SVG path data for each character
• lineAlphabet: Pre-processed line segments for each character, with coordinates normalized to [0,1]
• glyphLineAlphabet: Alias of lineAlphabet for glyph consumers
• @tscircuit/alphabet/outline-polygons: Closed outline rings for fill, clipping, and knockout operations

import { svgAlphabet, lineAlphabet } from '@tscircuit/alphabet'
import outlinePolygons from '@tscircuit/alphabet/outline-polygons'

// Get SVG path data for 'A'
const aPath = svgAlphabet['A']

// Get line segments for 'A'
const aLines = lineAlphabet['A'] // Array of {x1,y1,x2,y2} coordinates

// Get fillable outline rings for 'A'
const aOutlines = outlinePolygons['A']
// Array<Array<{x:number,y:number}>> with closed rings in glyph coordinate space

@tscircuit/alphabet/outline-polygons is intended for downstream fill and boolean operations such as knockout text. The rings are generated ahead of time from the current stroke geometry using the font's stroke width, round caps, round joins, and polygon union.

Outline polygons are generated by a separate post-processing step:

bun run generate-alphabet-outlines

Development

To run the project:

bun run index.ts

This project uses Bun as its JavaScript/TypeScript runtime.

You can use this website to edit paths to change letters