Polygon Layers

Polygon layers bring geometric precision and versatility to Component.Studio. From triangles to icosagons (20-sided shapes), polygons offer mathematically perfect regular shapes with equal sides and equal angles. Whether you're designing badges, icons, decorative elements, or complex geometric patterns, polygon layers give you the creative freedom to explore shapes beyond simple rectangles and circles. With adjustable side counts, optional rounded corners, and all the fill and border options you'd expect, polygons are powerful building blocks for sophisticated designs.

What Makes a Polygon?

In Component.Studio, polygons are regular polygons - meaning all sides are equal length and all angles are equal. The defining characteristic is the number of sides, which you can set anywhere from 3 to 20. Each polygon is drawn from its center point and oriented with one point facing upward (at the 12 o'clock position).

Common Polygon Shapes

Position and Size

Polygon layers use a slightly different sizing system than boxes or orbs. Instead of defining dimensions directly, you work with width and height that describe the bounding area the polygon occupies.

Fill Properties

Polygons support the complete range of fill options, from solid colors to complex gradients and textures.

Fill Types

Fill Properties

Border Properties

Borders on polygons follow the geometric edges perfectly, creating clean outlines that emphasize the polygonal shape.

Border Types

Border Controls

Corner Styles

Unlike box layers which offer nine corner types, polygons keep it simple with two options: square (sharp) corners or round (smooth) corners. This simplicity makes sense because polygons are already geometric by nature.

Corner Radius

When Corner Type is set to "round", the Corner Radius property (0-100) controls how curved the corners become. The system automatically limits the radius to 40% of the edge length to prevent corners from overlapping or creating distorted shapes.

Visual Effects

Polygon layers support the complete Component.Studio effects pipeline, allowing you to add depth, glow, and visual sophistication to geometric shapes.

Working with Polygon Layers

Common Use Cases

Adding Text to Polygons

Polygon layers include an "Add Text to Polygon" button that automatically creates a centered text layer within the polygon. This is incredibly useful for:

• Badge labels: Numbers, letters, or short words centered in hexagonal or pentagonal badges
• Icon text: Single letters or numbers in triangular or diamond shapes
• Stat displays: Numerical values in polygonal frames
• Decorative monograms: Initials in distinctive polygon shapes

Text automatically starts with center/middle alignment, ensuring perfect centering within the polygon regardless of its shape.

Rotation and Orientation

All polygons start with one point facing upward (12 o'clock position). This means:

• Triangles: Point up by default. Rotate 180° to point down, or 90°/270° to point left/right.
• Squares (4-sided): Appear as diamonds by default. Rotate 45° to make them look like squares.
• Hexagons: Have flat edges at top and bottom. Rotate 30° to have points at top and bottom instead.
• Pentagons: Point upward like a shield or house shape.

Stretching Polygons

While "regular polygon" traditionally means equal sides, Component.Studio lets you stretch polygons by using different width and height values:

Stretched polygons maintain their angular relationships but elongate in one direction. A stretched hexagon becomes an elongated hex, perfect for horizontal or vertical labels. A stretched triangle becomes a longer, narrower arrow.

Dynamic Polygon Designs

Polygons become powerful when combined with template variables and data:

• Data-driven colors: Use {{teamColor}} in Fill Color 1 to match team branding with polygon badges
• Variable side counts: Use {{difficulty}} to change the number of sides based on difficulty level (3 sides = easy, 8 sides = hard)
• Dynamic sizing: Use {{score / 10}} in Width and Height to make polygons grow with higher scores
• Rotation for variety: Use {{random() * 360}} to randomly rotate decorative polygons for organic variation

Design Tips and Best Practices

Choosing the Right Number of Sides

• 3-5 sides: Strong geometric identity, very recognizable as distinct shapes. Great for icons and bold design elements.
• 6-8 sides: Balanced between geometric and soft. Versatile for badges, tiles, and decorative elements.
• 9-12 sides: Approaching circular but still distinctly polygonal. Good for softer badges or medallions.
• 13-20 sides: Very close to circles with subtle geometric quality. Use when you want almost-circular shapes with a technical edge.

Corner Rounding Guidelines

• Keep it subtle for geometric emphasis: Corner radius of 5-15 maintains geometric character while softening edges slightly
• Go bold for friendly designs: Corner radius of 30-50 creates notably rounded, approachable shapes
• Sharp corners for technical feels: Use square corners (radius 0) for technical, precise, mathematical aesthetics
• Match corner style to content: Sharp for data/stats, rounded for friendly/playful content

Border and Fill Combinations

• No fill + thick border: Creates outline shapes perfect for wireframe designs or geometric patterns
• Gradient fill + contrasting border: Professional badge appearance with visual depth
• Solid fill + no border: Clean, simple shapes that work well for icons
• Texture fill + subtle border: Adds definition to textured polygons without overwhelming the pattern

General Polygon Tips

• Start regular, stretch as needed: Begin with equal width and height, then adjust if elongation would improve your design
• Use rotation purposefully: Don't just accept the default orientation - rotate to create the exact effect you want
• Layer polygons for complexity: Overlap different-sized polygons to create stars, compound shapes, or layered badges
• Consider border alignment: Outside borders maintain your intended polygon size; inside borders eat into the fill area
• Match polygon complexity to size: Use fewer sides (3-6) for small polygons, more sides (8+) for larger ones

Troubleshooting

My polygon looks like a circle

If you have 12+ sides, the polygon will look very circular. Lower the Number of Sides to 3-8 for more recognizable geometric shapes. Alternatively, if you actually want a circle, use an orb layer instead - it will be more efficient.

My rounded corners don't seem as round as I specified

The system automatically clamps corner radius to 40% of edge length to prevent overlapping corners. If you have a small polygon or one with many sides, the actual applied radius may be less than your setting. Try:

• Making the polygon larger (increase width and height)
• Using fewer sides (which creates longer edges)
• Accepting the automatic limit - it's preventing distorted shapes

My 4-sided polygon looks like a diamond, not a square

That's correct! Polygons always start with one point facing up. A 4-sided polygon has its corner at 12 o'clock, making it appear as a diamond. To make it look like a square, rotate it 45 degrees. Or, if you need a true square with horizontal and vertical edges, use a box layer instead.

Rotation doesn't seem to do anything

Check if you have a very high-sided polygon (15-20 sides) with no directional gradient. These look nearly identical at any rotation. Add a horizontal or vertical gradient, use texture fill, or add text inside the polygon to make rotation more apparent.

My border looks uneven

• If using center border alignment (50), the border splits evenly across the edge - this is correct
• Very thick borders on small polygons can appear uneven at sharp angles - reduce border thickness or increase polygon size
• Texture borders may look uneven if the texture has directional patterns - try a different texture or use color borders instead

My stretched polygon looks weird

Extreme stretching (like 400x50 or 50x400) can create unusual-looking shapes because the mathematical relationships between sides get distorted. For best results:

• Keep width:height ratio within 1:2 or 2:1 for recognizable shapes
• Use 3-6 sides for stretched polygons - higher side counts look odd when stretched
• Consider if a stretched box or orb might work better for extreme elongation

Polygon layers bring mathematical precision and geometric beauty to Component.Studio. From bold triangular arrows to sophisticated hexagonal badges, from simple diamonds to complex 20-sided medallions, polygons offer endless creative possibilities. Experiment with side counts, explore rounded corners, combine with gradients and effects, and discover the elegant world of geometric design!