Venn Diagram
A Venn diagram for visualizing set intersections with 2 or 3 circles.
Preview
Import
import { VennDiagram } from "@sigil-ui/components";Usage
<VennDiagram
circles={[{ label: "Design" }, { label: "Engineering" }, { label: "Product" }]}
intersectionLabel="DX"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
circles | VennCircle[2] | VennCircle[3] | — | 2 or 3 circle definitions |
intersectionLabel | string | — | Label for the center intersection |
width | number | 340 | SVG width |
height | number | 240 | SVG height |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | First circle color |
--s-success | Second circle color |
--s-warning | Third circle color |
--s-text | Circle and intersection labels |
--s-font-mono | Intersection label font |