GitHub - syi0808/asciianimesvg: Generate animated ASCII art SVGs from text. CLI, Rust library, WASM, and web editor.

Fully vibe coded.

Generate animated ASCII art SVGs from text. Available as CLI, Rust library, WASM, and web editor.

Installation

CLI

git clone https://github.com/syi0808/asciianimesvg.git
cd asciianimesvg
cargo build --release

Web Editor

cd web && pnpm install && pnpm run dev

Or visit the hosted version at syi0808.github.io/asciianimesvg.

Usage

Basic

# Static ASCII art SVG
asciianimesvg "Hello World"

# Output to file
asciianimesvg "Hello World" -o output.svg

# With animation
asciianimesvg "Hello" "World" --effect morph

Animation Effects

Effect	Description	Example
`typing`	Characters appear one by one	`--effect typing --speed 10 --cursor`
`morph`	Density-based crossfade between texts	`--effect morph`
`fade`	Fade out source, fade in target	`--effect fade`
`dissolve`	Three-phase dissolve (out, hold, in)	`--effect dissolve`
`slide`	Slide source out, target in	`--effect slide --slide-direction left`
`glitch`	Random character substitution with burst pattern	`--effect glitch --intensity 0.5`
`particle`	Characters scatter and reassemble into new text	`--effect particle`
`frame`	Frame-by-frame, no interpolation	`--effect frame`

CLI Options

Text & Rendering

Option	Default	Description
`[TEXT]...`		One or more text strings. Multiple texts create animation transitions
`--font-family`	`noto-sans`	TTF font: `noto-sans`, `noto-serif`, `anton`, `oswald`
`--font-size`	`32`	Font size in pixels
`--bold`	`false`	Render text in bold (horizontal dilation)
`--color`	`#ffffff`	Text color (hex)
`--bg`	`transparent`	Background color (hex or `transparent`)
`-o, --output`	stdout	Output file path

Animation

Option	Default	Description
`--effect`	none	Animation effect (see table above)
`--duration`	`2000`	Total animation duration in milliseconds
`--loop-mode`	`infinite`	`infinite`, `once`, or a repeat count

Effect-Specific

Option	Effect	Default	Description
`--speed`	typing	`10`	Characters per second
`--cursor`	typing	`false`	Show blinking cursor
`--intensity`	glitch	`0.5`	Glitch intensity (0.0 to 1.0)
`--slide-direction`	slide	`left`	`left`, `right`, `up`, `down`

Examples

# Typing with cursor, green on dark background
asciianimesvg "Hello World" --effect typing --cursor \
  --color "#00ff41" --bg "#0d1117" --font-family oswald

# Particle transition between words
asciianimesvg "Hello" "World" --effect particle --duration 3000

# Glitch effect with high intensity
asciianimesvg "GLITCH" --effect glitch --intensity 0.9 --font-family anton

# Slide transition, play once
asciianimesvg "Before" "After" --effect slide --slide-direction up --loop-mode once

# Bold text with custom font size
asciianimesvg "Big Bold" --font-size 48 --bold --font-family noto-serif

# Output to file for GitHub README
asciianimesvg "My Project" --effect typing --cursor --loop-mode once \
  --color "#58a6ff" --bg "#0d1117" -o assets/banner.svg

use asciianimesvg_core::{
    text_to_svg, animate_to_svg,
    SvgOptions, Effect, RepeatMode,
    bitmap::BitmapOptions,
};

// Static rendering
let svg = text_to_svg("Hello", &SvgOptions::default(), None).unwrap();

// With custom bitmap options
let bitmap_opts = BitmapOptions {
    font_family: Some("anton".to_string()),
    font_size: 24.0,
    bold: true,
    ..Default::default()
};
let svg = text_to_svg("Hello", &SvgOptions::default(), Some(&bitmap_opts)).unwrap();

// Animated
let svg = animate_to_svg(
    &["Hello", "World"],
    Effect::Morph,
    2000,
    RepeatMode::Infinite,
    &SvgOptions::default(),
    None,
).unwrap();

// Typing effect
let svg = animate_to_svg(
    &["Type this out"],
    Effect::Typing { cursor: true, speed_cps: 10.0 },
    3000,
    RepeatMode::Once,
    &SvgOptions::default(),
    None,
).unwrap();

WASM

wasm-pack build crates/wasm --target web --out-dir ../../pkg

import init, { render, animate, list_font_families } from "asciianimesvg-wasm";
await init();

// Static
const svg = render("Hello", {
  font_family: "noto-sans",
  font_size: 20,
  color: "#000000",
  bg: "#ffffff",
  bold: true,
});

// Animated
const svg = animate(["Hello", "World"], {
  effect: "particle",
  duration: 3000,
  font_family: "anton",
  font_size: 24,
  color: "#00ff41",
  bg: "#0d1117",
});

// Available fonts
const fonts = list_font_families(); // ["noto-sans", "noto-serif", "anton", "oswald"]

WASM Options

Field	Type	Default	Description
`font_family`	string	`"noto-sans"`	TTF font family
`font_size`	number	`32`	Font size in pixels
`color`	string	`"#ffffff"`	Text color
`bg`	string	none	Background color
`bold`	boolean	`false`	Bold rendering
`scale`	number	`1`	Scale factor (1x, 2x, 3x)
`max_width`	number	auto	Max width in pixels (enables word wrap)
`max_height`	number	auto	Max height in rows
`text_align`	string	`"left"`	`"left"`, `"center"`, `"right"`
`vertical_align`	string	`"top"`	`"top"`, `"middle"`, `"bottom"`
`effect`	string	none	Animation effect name
`duration`	number	`2000`	Animation duration (ms)
`loop_mode`	string	`"infinite"`	`"infinite"`, `"once"`, or count
`speed`	number	`10`	Typing speed (cps)
`cursor`	boolean	`false`	Show typing cursor
`intensity`	number	`0.5`	Glitch intensity
`slide_direction`	string	`"left"`	Slide direction

Embedded Fonts

All fonts are embedded in the binary (including WASM). No external font loading required.

Font	Style	License
Noto Sans Bold	Sans-serif	OFL 1.1
Noto Serif Bold	Serif	OFL 1.1
Anton	Display	OFL 1.1
Oswald Bold	Condensed	OFL 1.1

Project Structure

crates/
  core/    # Rust library: bitmap rendering, animation engine, SVG generation
  cli/     # Command-line tool
  wasm/    # WebAssembly bindings
web/       # Browser-based editor (Preact + Vite + 98.css)
fonts/ttf/ # Embedded TTF fonts

License

Apache-2.0

推荐订阅源

Hacker News: Show HN