HighlightRing

Draws the rings of one running highlight as an SVG filter over a region.

@internote/canvas-sdk/reactComponent
On this page
import { HighlightRing } from '@internote/canvas-sdk/react';

The rings are the content's own shape grown by each ring's width, filled flat, with the content laid back over the lot. A drop shadow cannot do this, since shadows blur outwards and have no spread, so it is drawn as a dilation, which gives an edge rather than a haze. Render it inside the SVG and name its id as the filter of the group holding the content.

The region is in the environment's own coordinates and should cover the plot and no more: every pixel of it is rasterised on every frame the ring runs, and a region that collapses to no area in one direction stops the element being drawn at all.

#Props

Takes no className, style or id.

regionRequired
The box they are rasterised over.
Region
specRequired
The rings to draw, from highlightSpec.
HighlightSpec

Declared in packages/canvas-sdk/src/react/attention.tsx:228.

Last updated