Chapter 7: Shape Elements

Shape elements provide geometric forms for backgrounds, highlights, decorations, and visual structure. This chapter covers creating and styling shapes in FX Express.

Shape Types

FX Express includes three basic shape types:

Shape	Description	Use Cases
Rectangle	Four-sided shape with optional rounded corners	Backgrounds, buttons, cards, containers
Circle	Perfectly round shape	Avatars, bullets, decorations, icons
Triangle	Three-sided shape	Arrows, pointers, decorative elements

Adding Shapes

To add a shape:

Find the Shapes section in the element palette
Click Rectangle, Circle, or Triangle
The shape appears on the canvas with default styling
Position and resize as needed

Shape Properties

All shapes share these properties:

Fill Color

The interior color of the shape:

Click the palette icon to open the color picker
Select from preset colors or enter a custom value
Choose “No fill” for transparent interior
Supports opacity/alpha values

Stroke Color

The border/outline color:

Click the pen icon to open the stroke color picker
Select a color for the outline
Choose “No stroke” to remove the border
Stroke appears around the shape’s perimeter

Stroke Width

The thickness of the border in pixels:

Width	Appearance
0	No visible stroke
1	Thin hairline
2	Standard (default)
4	Medium
8	Thick

Border Radius (Rectangles Only)

Corner rounding for rectangle shapes:

Option	Value	Effect
None	0px	Sharp corners
Small	4px	Subtle rounding
Medium	8px	Noticeable rounding
Large	16px	Pronounced rounding
Extra Large	32px	Very rounded
Pill	9999px	Fully rounded ends

When you select a shape, a toolbar appears with these options:

Control	Function
Fill color (🎨)	Open fill color picker
Stroke color (✏️)	Open stroke color picker
Width	Dropdown for stroke width
Corner radius	Dropdown for border radius (rectangles only)
Timing (🕐)	Open element timing dialog
Animate	Open animation dialog (rectangles only)
Lock (🔒)	Lock element position and size

Creating Common Shape Styles

Solid Background

Fill: Your chosen color
Stroke: None (width: 0)
Border Radius: As needed

Outlined Shape

Fill: Transparent (no fill)
Stroke: Your chosen color
Width: 2 or higher

Card/Panel

Fill: White or light color
Stroke: Light gray
Width: 1
Border Radius: Medium (8px)

Button Style

Fill: Brand color
Stroke: None
Border Radius: Small to Medium

Circle Avatar Frame

Shape: Circle
Fill: Background or transparent
Stroke: Brand color
Width: 4

Badge/Tag

Shape: Rectangle
Fill: Color
Border Radius: Pill
Size: Small, fit to content

Using Shapes for Layout

Background Panels

Create visual separation between content areas:

Add a Rectangle
Size it behind your content
Set Z-Index lower than content
Apply subtle fill color
Optional: Add border radius for softer look

Highlight Boxes

Draw attention to important content:

Add a Rectangle
Position around content to highlight
Use bright stroke color
Keep fill transparent or semi-transparent
Add border radius to match style

Dividers

Create visual breaks between sections:

Add a Rectangle
Set width to 100%, height to small value (1-2%)
Position horizontally
Use subtle fill color

Bullet Points

Custom bullets for lists:

Add a Circle
Size small (1-2%)
Fill with accent color
Duplicate and position for each point

Shape Animation

Rectangle shapes support special animations:

Reveal Animation

Animate the shape from one edge:

Select the rectangle
Click “Animate…” in toolbar
Choose reveal direction
Set animation duration

Available Animation Types

Reveal from left/right/top/bottom
Wipe effects
Scale animations (via keyframes)

See Chapter 12: Animations and Keyframes for advanced animations.

Shapes and Z-Index

Proper layering is essential when using shapes:

Background Shapes

Set Z-Index to lowest values (0, 1, 2)
Ensure content appears above

Overlay Shapes

Set Z-Index higher than content
Useful for highlighting or framing

Layering Example

Background shape: Z-Index 0
Image: Z-Index 1
Text: Z-Index 2
Highlight frame: Z-Index 3

Color Tips

Theme Colors

Use colors from your theme for consistency:

Primary/accent colors for emphasis
Background colors for containers
Text colors for strokes when framing text

Contrast

Ensure sufficient contrast:

Dark shapes on light backgrounds (or vice versa)
Strokes should be visible against both fill and background

Transparency

Use semi-transparent fills for overlay effects:

Darken areas behind text
Create frosted glass effects
Subtle highlighting

Common Shape Patterns

Call-to-Action Button

Shape: Rectangle
Fill: Bright accent color
Stroke: None
Border Radius: Medium
Position: Centered
Z-Index: Above background

Text Background Panel

Shape: Rectangle
Fill: Semi-transparent dark (rgba)
Stroke: None
Border Radius: Small
Position: Behind text
Z-Index: Below text

Profile Picture Frame

Shape: Circle
Fill: None
Stroke: Brand color
Width: 4
Position: Around profile image
Z-Index: Above image

Section Divider

Shape: Rectangle
Fill: Subtle gray
Stroke: None
Width: 100%
Height: 1-2px (0.1-0.2%)

Decorative Accent

Shape: Triangle
Fill: Accent color
Position: Corner
Rotation: As needed
Z-Index: Background layer

Troubleshooting

Shape Not Visible

Check if fill and stroke are both transparent
Verify Z-Index (may be behind other elements)
Check opacity setting
Verify position is on-canvas

Stroke Looks Wrong

Width may be 0 (invisible)
Color may match background
Try increasing stroke width

Corners Not Rounding

Only rectangles support border radius
Check that shape type is “rectangle”
Increase border radius value

Shape Covers Content

Lower the Z-Index value
Or raise Z-Index of content elements
Check layering order

Animation Not Working

Only rectangles support built-in animations
Use keyframes for other shapes
Check animation settings in dialog

Performance Considerations

Shapes are lightweight elements:

Use freely without performance concerns
SVG-based rendering is efficient
Multiple shapes have minimal impact
Prefer shapes over images for simple graphics

← Previous: Video Elements | Next: Tables and Lists →