hypeimage

Generate stylized typography SVGs and PNGs with gradient colors, emoji patterns, and animated text. I run this on a CF worker but you can run on either Browser or Node.

Install

npm install hypeimage

Usage

import { generateImage, generateAnimatedText, generateImagePNG } from 'hypeimage';

// Generate SVG string
const svg = generateImage({ text: 'hello' });

// Generate animated SVG string (open in browser to see the animation)
const animSvg = generateAnimatedText({ text: 'hype', style: 'soft', speed: 3, loop: true });

// Generate PNG buffer (requires @resvg/resvg-js)
const png = await generateImagePNG({ text: 'hello', gradient: 'sunset' });

Demo

Try these live — each URL renders directly in your browser:

Style	URL
Crochet — hype with fire & art	/image?text=hype&style=crochet&emoji=🔥,🎨&emoji-opacity=0.3
Soft — wavy with sunset & sparkles	/image?text=wavy&gradient=sunset&style=soft&emoji=✨,💫&emoji-opacity=0.4
Yarn — knit with purpledream & stars	/image?text=knit&gradient=purpledream&style=yarn&emoji=⭐,🌟&emoji-opacity=0.3
Outlined — wave with beach & ocean	/image?text=wave&gradient=beach&style=outlined&emoji=🌊,🐚&emoji-opacity=0.35
Crochet dark — dark with gems	/image?text=dark&gradient=purpledream&bg=%231a1a2e&style=crochet&emoji=💎,✨&emoji-opacity=0.5

API

generateImage(options): string

Returns an SVG string.

generateAnimatedText(options): string

Returns an SVG string with CSS keyframe animations. Set speed and loop to control the animation. Works anywhere — the CSS animations play when the SVG is rendered in a browser.

generateImagePNG(options): Promise<Buffer>

Returns a PNG buffer. Requires @resvg/resvg-js as a peer dependency.

npm install @resvg/resvg-js

Options

Option	Type	Default	Description
text	string	(required)	Text to render (max 10 chars, alphanumeric)
gradient	string	"valkyrie"	Color scheme: valkyrie, sunset, purpledream, beach
bg	string	"#FFF9C4"	Background hex color
style	string	"outlined"	Render style: outlined, soft, crochet, yarn
emoji	string[]	[]	Background emoji pattern (max 4)
emojiAngle	number	45	Emoji rotation in degrees
emojiOpacity	number	0.5	Emoji opacity 0-1
paddingLeft	number	0	Horizontal padding in px
paddingTop	number	0	Vertical padding in px
speed	number	1	Animation speed multiplier (animated only)
loop	boolean	false	Loop the animation (animated only)

getAllGradients(): string[]

Returns the list of available gradient names.

Examples

Basic

const svg = generateImage({ text: 'Hello' });

Gradient

const svg = generateImage({ text: 'World', gradient: 'sunset' });

Crochet style with emoji

const svg = generateImage({
  text: 'hype',
  gradient: 'sunset',
  bg: '#FFF9C4',
  style: 'crochet',
  emoji: ['🔥', '🎨', '😻', '🐻'],
  emojiAngle: 45,
  emojiOpacity: 0.25,
});

Soft style

const svg = generateImage({ text: 'Soft', style: 'soft' });

Yarn style

const svg = generateImage({ text: 'Knit', style: 'yarn' });

Animated text

const svg = generateAnimatedText({
  text: 'hype',
  style: 'crochet',
  speed: 3,
  loop: true,
  emoji: ['🔥', '✨', '🎨', '💎'],
  emojiOpacity: 0.25,
});
document.getElementById('out').innerHTML = svg;

Dark background with emoji

const svg = generateImage({
  text: 'Hey',
  bg: '#333',
  emoji: ['✨'],
  emojiOpacity: 0.5,
});

Flat emoji angle

const svg = generateImage({
  text: 'Flat',
  emoji: ['💎'],
  emojiAngle: 0,
});

PNG output

const png = await generateImagePNG({
  text: 'party',
  gradient: 'purpledream',
  style: 'crochet',
  emoji: ['🔥', '✨', '🎉'],
});

License

GNU GPL v3