Typing Effects

Overview

Typing Effects allow you to create animated SVGs that simulate a typing and deleting effect.

Choose between a smooth rounded font or a technical mono font.

![](https://icon.mzrdev.com/typing?text=Beautiful+rounded+font&font=Nunito)

![](https://icon.mzrdev.com/typing?text=Technical+monospace+font&font=Fira+Code)

Customize the text appearance with gradients or solid hex colors.

![](https://icon.mzrdev.com/typing?text=Vibrant+Gradients)

![](https://icon.mzrdev.com/typing?text=Clean+Solid+Color&color=3b82f6)

Use a colon : to define a prefix that stays while the rest of the text cycles.

![](https://icon.mzrdev.com/typing?text=I+am+a:Developer;Designer;Creator)

Parameter	Description	Default
`text`	Semicolon-separated lines. Use `:` for prefix.	`Hello there`
`font`	`Nunito` or `Fira Code`	`Nunito`
`fontSize`	Font size in pixels	`52`
`color`	Solid text color (hex)	Gradient
`align`	`left` or `center`	`left`
`background`	Background color (hex)	`transparent`
`speed`	Typing speed (ms per char)	`85`
`pause`	Pause at end of line (ms)	`1100`