SVX Shape Playground

Customize your SVX shape and see the code in real-time

Shape Examples

Reference shapes to verify rendering

Circle

Square

Rounded

Pill

Hexagon

Octagon

Diamond

Preview

See your shape in action

SVX

Current background color: #3b82f6

Current shape type: circle

Controls

Customize your shape

Shape Type

Size

Content

Interactive

As Button

As Link

Auto-fit Text

Code

Copy and paste into your project

<SVXShape
  type="circle"
  animation="pulse"
  autoFitText={true}
>
  SVX
</SVXShape>

Don't forget to import SVXShape from "@/components/shape/svx-shape"