Isometric Cylinder
SVG isometric cylinder with configurable radius, height, and face colors.
Preview
Import
import { IsometricCylinder } from "@sigil-ui/components";Usage
<IsometricCylinder radius={64} height={100} /><IsometricCylinder radius={50} height={80} />Custom colors
<IsometricCylinder
topColor="oklch(0.7 0.15 280)"
bodyColor="oklch(0.4 0.08 280)"
strokeColor="oklch(0.3 0.05 280)"
/>Different sizes
<div className="flex items-end gap-4">
<IsometricCylinder radius={20} height={30} />
<IsometricCylinder radius={30} height={60} />
<IsometricCylinder radius={40} height={90} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 40 | Cylinder radius |
height | number | 60 | Cylinder height |
topColor | string | var(--s-primary) | Top ellipse fill |
bodyColor | string | var(--s-surface) | Body fill |
strokeColor | string | var(--s-border) | Stroke color |
strokeWidth | number | 1 | Stroke width |
className | string | — | Additional CSS classes |