Chapter 257: <Solid>

Core Idea

Renders a solid-color rectangle on a <canvas> element.

Key Concepts

• API
• width
• height
• effects?<AvailableFrom v="4.0.464" />
• color?
• pixelDensity?<AvailableFrom v="4.0.472" />
• className?
• style?

Code Examples

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Solid color="#3344ff" width={1920} height={1080} />
    </AbsoluteFill>
  );
};

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

Key Takeaways

1. Understand api when working with <Solid>.
2. Understand width when working with <Solid>.
3. Understand height when working with <Solid>.
4. Understand effects?<availablefrom v="4.0.464" /> when working with <Solid>.
5. Understand color? when working with <Solid>.

Connects To

• Angular: related page in the Framework & Renderer Integrations section.
• Figma: related page in the Framework & Renderer Integrations section.
• use Gsap Timeline: related page in the Framework & Renderer Integrations section.