Shape artwork

Visual effects

An original SVG silhouette with a cast shadow and a rotated rear outline. The same vector layers power its live preview and standalone SVG export.

React · copy into your project · light and dark themes

Try it

Variant

Rotation · 0°

Cast shadowRear outline

All three layers share one morphing contour. This preview changes local artwork settings only.

ShapeArtwork usagetsx

import { ShapeArtwork } from "@/components/ui/shape-artwork";

<ShapeArtwork
  name={"daisy-12"}
  tone={"pink"}
  rotation={0}
  filled={true}
  shadow={true}
  shadowAngle={45}
  echo={true}
  echoAngle={-18}
  label={"An original organic shape"}
  style={{ width: "100%", maxWidth: 400 }}
/>

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/shape-artwork.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes shape, toggle-group, slider, switch, label, code-block, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/shape-artwork.json https://luv-jeri.github.io/cojeev-ui/r/shape.json https://luv-jeri.github.io/cojeev-ui/r/toggle-group.json https://luv-jeri.github.io/cojeev-ui/r/slider.json https://luv-jeri.github.io/cojeev-ui/r/switch.json https://luv-jeri.github.io/cojeev-ui/r/label.json https://luv-jeri.github.io/cojeev-ui/r/code-block.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using shape artwork

Set name to one of the 12 signature shapes; choose pink, olive, blue or yellow with tone. Set rotation in degrees and filled={false} for an outlined foreground.
Use shadow and echo to toggle the cast shadow and rear outline. shadowAngle sets the cast direction clockwise from the right; echoAngle rotates the rear outline relative to the foreground.
shapeArtworkSvg(options, colors?) returns an original standalone SVG string; supply resolved fill, shadow and echo colors to preserve a customized palette. Its fixed viewBox contains every supported shape at all layer angles.
shapeArtworkCode(options) returns a React usage snippet containing every selected prop. The landing workbench downloads a transparent SVG and provides accessible copying with visible success or failure feedback.
Live name changes morph through the shared choreography policy. Rotation and layer changes follow the supplied props; no idle foreground motion is added.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

ShapeArtworkProps

Prop	Type	Required
`name`	`SignatureShapeName`	No
`tone`	`ShapeArtworkTone`	No
`rotation` Foreground rotation, in degrees.	`number`	No
`filled` False draws the foreground as an outline.	`boolean`	No
`shadow`	`boolean`	No
`shadowAngle` Direction of the cast shadow, clockwise from the right.	`number`	No
`echo`	`boolean`	No
`echoAngle` Rear outline rotation relative to the foreground.	`number`	No
`label` Omit when decorative.	`string`	No

Accessibility

The SVG is decorative by default. Supply label when the graphic conveys meaning; native SVG props and refs are forwarded.
Motion Off, Flow Off, reduced motion and hidden or offscreen rendering settle the contour immediately.
The example changes local artwork settings only. Export is vector artwork, with the selected target contour rather than a transient animation frame.

States and appearance

restmorphrotationlayersreduced-motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.