Animated SVG
Animated diagrams via SVG.
Renders an SVG string with CSS-like animation classes (animate-rise, animate-orbit, animate-pulse, …) — the agent's main tool for 'how does X work' explainers.
type · animated_svg
A visual explainer the agent uses for 'how does X work' answers.
How to use it
Just ask for it in chat — the agent emits this widget and the shell renders it:
Try saying
“show me how a volcano erupts”
Example
The agent returns this A2UI component (inside the components array of a /chat response):
animated_svg.json
{
"type": "animated_svg",
"content": "<svg viewBox='0 0 400 300'>…</svg>",
"height": 300
}Properties
| Prop | Type | Description |
|---|---|---|
content | string | SVG markup |
width | number | Width |
height | number | Height |
backgroundColor | color | Background |
Browse the full Widget Index, the Widget Catalog, or learn the A2UI system behind it.