Settings›Geometry
Geometry
Circles, ellipses, continuous curves and SVG contours use the existing optical engine.
Try a contour
Available shapes
| Value | Geometry |
|---|---|
rounded-rect | Default; follows the CSS corner radius. |
circle | Inscribed in the shorter side of the element. |
ellipse | Spans the element width and height. |
superellipse | Continuous curve; curvature 2–8, default 4. |
path | SVG path mapped from a view box. |
<edinstvo-glass shape="superellipse" curvature="5"></edinstvo-glass>
<edinstvo-glass shape="path" path="M50 0L100 100H0Z"
view-box="0 0 100 100" fill-rule="evenodd"></edinstvo-glass>JavaScript API
const surface = attachGlass(element, {
geometry: { shape: "path", path: "M50 0L100 100H0Z", viewBox: [0, 0, 100, 100] },
material: { depth: 12, refraction: 0.4 },
});
surface.set({ geometry: { shape: "ellipse" } });
glassElement.geometry = { shape: "superellipse", curvature: 6 };Contours and normals affect refraction, dispersion, light, rim and reflection. Shapes participate in existing merging and layers. A merged group shares a material, while its individual contours can differ.
SVG data and limits
Only path data is accepted: no SVG markup, scripts or external resources. Limits are 64 KiB, 4096 commands and finite coordinates within ±1,000,000. Each path uses a cached 256×256 distance tile. Normal interaction does not rebuild it.
Small details, concave contours and extreme scaling may show sampling artifacts. HTML layout and hit testing remain rectangular; content is not automatically clipped. Custom paths have no automatic box shadow. CSS fallback retains an ordinary rounded rectangle.