Interactive Shape Controls

38 interactive shapes with dedicated configurator panels let you build data-rich architecture infographics. Each shape has metadata-driven controls in the right menu for real-time editing.

February 27, 2026

Beyond basic rectangles and flowchart symbols, NeoArc Studio includes 38 interactive shapes designed for data visualisation and architectural infographics. Each shape stores its configuration in metadata and regenerates its SVG on every change, giving you live preview as you adjust settings in the right panel.

Shape Categories

Interactive shapes are organised into four categories in the left panel, plus a Basic Shapes category with 16 non-container geometric shapes.

Data Visualisation (14 shapes)

Charts and data display: pie chart, donut, ring segment, gauge, progress ring, bar chart, radar chart, treemap, heatmap grid, sparkline, bubble chart, stacked bar, sankey diagram, and timeline.

Structural / Decorative (18 shapes)

Geometric and decorative shapes: funnel, speech bubble, cylinder, wave, bracket, chevron, shield, ribbon, arrow, polygon, callout, gear, spiral, tab, puzzle piece, torus, cross, and rounded arrow.

Infographic / Layout (6 shapes)

Metric display and indicators: icon badge, comparison bar, rating stars, thermometer, battery, and pie progress.

Basic Shapes (16 shapes)

Non-container geometric shapes: rectangle, circle, pill, diamond, hexagon, parallelogram, trapezoid, cloud, bracket, octagon, ellipse, triangle, right triangle, pentagon, cross, and star.

Using the Configurator Panel

When you select an interactive shape, its configurator appears in the right panel. Controls vary by shape type but follow consistent patterns.

Common Control Types

Control Type	Used For	Examples
Colour picker	Fill colours, stroke colours, segment colours	Pie chart segment colours, gauge zone colours
Slider	Numeric values within a range	Gauge value (0-100%), opacity, corner radius
Value input	Precise numeric values	Bar chart values, sparkline data points
Dropdown	Selection from fixed options	Chevron direction, bracket direction, blend mode
Toggle	Boolean properties	Sparkline show dots, rounded arrow double-headed
Array editor	Lists of data items	Chart segments, timeline items, funnel stages

Theme Integration

Interactive shapes integrate with the light/dark theme system. Shapes fall into two theme categories.

Gradient Fill Support

In infographic mode, fill-and-stroke shapes support gradient fills. The colour picker includes a gradient editor where you can set linear or radial gradients with multiple colour stops. Gradient definitions are stored as compact descriptors and rendered as SVG gradient definitions.