Chapter 900: <Circle>

Core Idea

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

Key Concepts

• Example
• API
• strokeWidth?
• iterations?
• padding?
• box?
• curveFitting?
• curveTightness?

Code Examples

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>
  );
};

• What it demonstrates: Usage pattern for <Circle> from the official docs.

Key Takeaways

1. Understand example when working with <Circle>.
2. Understand api when working with <Circle>.
3. Understand strokewidth? when working with <Circle>.
4. Understand iterations? when working with <Circle>.
5. Understand padding? when working with <Circle>.

Connects To

• api: related page in the Rough Notation (@remotion/rough-notation) section.
• box: related page in the Rough Notation (@remotion/rough-notation) section.
• Bracket: related page in the Rough Notation (@remotion/rough-notation) section.