<Circle>v4.0.490

Draws an animated hand-drawn circle around the text or element it wraps.

Example

MyComp.tsx
import {Circle} from '@remotion/rough-notation';

export const MyComp: React.FC = () => {
  return (
    <Circle
      progress={1}
      color="rgba(37, 99, 235, 0.57)"
      strokeWidth={12}
      roughness={1.8}
      padding={{left: 10, right: 10, top: 10, bottom: 10}}
      box="inside"
    >
      circular
    </Circle>
  );
};

API

strokeWidth?

The stroke width in pixels. Default: 20.

iterations?

The number of rough strokes to draw. Each iteration gets a different seed. Default: 2.

padding?

Insets or outsets for the circle. Accepts left, right, top and bottom.

box?

Set to around to circle the element bounds or inside to fit the ellipse inside the padded box. Default: around.

curveFitting?

Controls how closely the curve fits its points. Default: 0.95.

curveTightness?

Controls the curve tightness. Default: 0.

curveStepCount?

Controls how many steps approximate the curve. Default: 9.

Also accepts the common annotation props.

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

See also

• Text highlights
• <Highlight>