Quick Reference

A comprehensive quick reference for all Custom slide dynamic elements. For full configuration and examples, each element has a dedicated page—use the Custom overview table to jump to any of them.

Progress & Metrics

{% raw %}

Element	Element Type	Input Format	Example
Horizontal Bars `lc_bar_*`	`<rect>`	`"40"` or `{"value": 40, "color": "blue"}`	`{{ revenue }} = "75"`
Vertical Columns `lc_column_*`	`<rect>`	`"60"` or `{"value": 60, "color": "red"}`	`{{ q1 }} = "85"`
Circular Progress `lc_circle_*`	`<circle>`	`"50"` (percentage)	`{{ completion }} = "68"`
Range Sliders `lc_range_*`	`<rect>`	`"10,40"` (position, width)	`{{ price }} = "20,50"`

{% endraw %}

Background Elements: Add _bg_ suffix for semi-transparent backgrounds

lc_bar_bg_*, lc_column_bg_*, lc_circle_bg_*, lc_range_bg_*

→ Dedicated pages: lc_bar_* · lc_column_* · lc_circle_* · lc_range_*

Distribution & Proportions

{% raw %}

Element	Element Type	Input Format	Example
Donut Charts `lc_doughnut_*`	`<circle>`	`"58;32;10"` or with colors: `"58,green;32,yellow;10,red"`	`{{ nps }} = "58,#4CAF50;32,#FFC107;10,#F44336"`
Ring Charts `lc_rings_*`	`<rect>`	JSON array: `[{"value": 85, "label": "Label", "color": "#4285F4"}]`	See detailed format below
Labels/Legends `lc_label_*`	`<text>`	`"Label1;Label2;Label3"` or: `"Label1,color1;Label2,color2"`	`{{ legend }} = "Promoters,green;Passives,yellow"`

{% endraw %}

Donut Chart Format:

"value1,color1;value2,color2;value3,color3"

Ring Chart Format:

[
  { "value": 85, "label": "Item 1", "color": "#4285F4" },
  { "value": 72, "label": "Item 2", "color": "#EA4335" }
]

Label Format with Wrapping:

"Label Text,color,20"

(Third parameter = character wrap limit)

→ Dedicated pages: lc_doughnut_* · lc_rings_* · lc_label_*

Styling & Effects

{% raw %}

Element	Element Type	Input Format	Example
Dynamic Colors `lc_color_*`	Any SVG	`"#2196F3"` or `"royalblue"`	`{{ status }} = "#4CAF50"`
Glass Overlay `lc_glass_*`	`<rect>`	`"10"` or `"13.5px"`	`{{ kpiBlur }} = "20"`
Heatmaps `lc_heatmap_*`	Any SVG (requires `dataFill` attribute)	`"75"` (opacity 0-100)	`{{ intensity }} = "85"`
Ken Burns `lc_kenburns_*`	Any SVG	JSON config (see below)	See detailed format below

{% endraw %}

Heatmap Required Attribute:

<rect id="lc_heatmap_item" dataFill="#2196F3" />

Ken Burns Format:

{
  "duration": 4,
  "startScale": 0.8,
  "endScale": 1.0,
  "ease": "power2.out"
}

→ Dedicated pages: lc_color_* · lc_glass_* · lc_heatmap_* · lc_kenburns_*

Text & Media

{% raw %}

Element	Element Type	Input Format	Example
Scrolling Text `lc_scrolltext_*`	`<rect>`	Plain text string	`{{ description }} = "Long text..."`
Faded Text `lc_fadetext_*`	`<rect>`	Plain text string	`{{ summary }} = "Preview text..."`
Dynamic Images `lc_image_*`	`<rect>`	Image URL	`{{ logo }} = "https://cdn.../image.png"`
Dynamic Videos `lc_video_*`	`<rect>`	Video URL	`{{ demo }} = "https://cdn.../video.mp4"`
Formatted Dates `lc_date_*`	`<rect>`	`"YYYY-M-D"` or `"today"`	`{{ event }} = "2025-10-13"`
Lottie Animations `lc_lottie_*`	`<rect>`	Lottie JSON URL	`{{ animation }} = "https://cdn.../anim.json"`

{% endraw %}

→ Dedicated pages: lc_scrolltext_* · lc_fadetext_* · lc_image_* · lc_date_* · lc_video_* · lc_lottie_*

Image alignment patterns: lc_image_left_*, lc_image_right_*, plus _top_ / _bottom_ variants (for example lc_image_left_top_1). Center + middle is the default lc_image_*.

Basic Text Personalization

Replace any text in your SVG using lc_ prefix:

<!-- In SVG -->
<text id="lc_customer-name">Placeholder</text>
<text id="abc-lc_revenue">$0</text>

<!-- In Dataset -->
{{ customer-name }} = "Acme Corp"
{{ revenue }} = "$125,000"

Note: Prefixes before lc_ are automatically detected (e.g., abc-lc_name works)

Show/Hide Elements

Control visibility with lc_ or hid_ prefixes:

<text id="lc_metric-label">Label</text>
<g id="hid_performance">...</g>

These can be controlled in narration settings to show, hide, or dim elements.

Color Specification Options

All color inputs accept:

Format	Example
Hex codes	`"#2196F3"`, `"#FF5722"`
CSS names	`"blue"`, `"royalblue"`, `"green"`
RGB values	`"rgb(33, 150, 243)"`

Value Ranges & Clamping

Element Type	Range	Notes
Bar/Column	0-100%	Values >100 clamped to 100
Circle	1-100%	0 converted to 1 (minimum)
Glass Overlay Blur	0-100	Empty value defaults to 20px
Range	Position: 1-100% Width: 0-99%	Combined cannot exceed 100%
Heatmap	0-100	Values >100 treated as 100
Ken Burns Scale	0-2	1.0 = 100% (original size)
Ken Burns Duration	1-10 seconds	Default: 4 seconds

Element Type Requirements

Feature	Required Element
`lc_bar_`, `lc_column_`, `lc_range_*`	`<rect>`
`lc_circle_`, `lc_doughnut_`	`<circle>`
`lc_rings_*`	`<rect>`
`lc_label_*`	`<text>`
`lc_scrolltext_`, `lc_fadetext_`	`<rect>`
`lc_image_`, `lc_video_`, `lc_date_`, `lc_lottie_`	`<rect>`
`lc_glass_*`	`<rect>`
`lc_color_`, `lc_heatmap_`, `lc_kenburns_*`	Any SVG element

Figma Export Checklist

When exporting SVGs from Figma:

✅ Include bounding box - Checked
✅ Include “id” attribute - Checked
❌ Outline Text - Unchecked (unless text doesn’t need personalization)

SVGator Export Checklist

When exporting animated SVGs from SVGator:

✅ Exported IDs → “Element’s name”
✅ Animation type → “CSS only”
✅ Direction → Normal/Reverse/Alternate
✅ Iterations → Infinite or count
✅ Save → Before exporting

Troubleshooting Quick Fixes

Problem	Quick Fix
Element not updating	Check ID prefix matches feature (`lc_bar_`, etc.)
Wrong element type	Verify element type (e.g., bars need `<rect>`, circles need `<circle>`)
Text not personalizing	Ensure “Outline Text” was unchecked in Figma
Animation not playing	Check SVGator export: “CSS only”, not JavaScript
Colors not matching	Use exact same color values in chart and labels
Values not clamping	Check value ranges - most are 0-100
JSON not parsing	Validate JSON format with quotes around strings
Date not displaying	Use ISO format: `YYYY-M-D` (e.g., `2025-10-13`)

SVG Standards

Desktop SVGs:

Dimensions: 1080 x 810 pixels
Aspect Ratio: 4:3

Mobile SVGs:

Dimensions: 440 x 836 pixels
Aspect Ratio: 1:1.9

Animation Support:

✅ CSS animations
❌ JavaScript animations

JSON Formatting Examples

Ring Chart:

[
  { "value": 85, "label": "Item 1", "color": "#4285F4" },
  { "value": 72, "label": "Item 2", "color": "#EA4335" },
  { "value": 58, "label": "Item 3", "color": "#FBBC04" }
]

Ken Burns Animation:

{
  "duration": 4,
  "startScale": 0.8,
  "endScale": 1.0,
  "ease": "power2.out"
}

Bar/Column with Color:

{
  "value": 75,
  "color": "blue"
}

Need More Details?

Custom overview — Elements and widgets table with example images and links to every dedicated page
Setup & Export Guide — Figma and SVGator setup for SVGs

← Back to Custom Overview