Shaders logo
presetssectionsmcppricingcommunity
  • Components190+
    • All components

    Categories

    • Textures54
    • Shapes16
    • Shape Effects23
    • Stylize30
    • Interactive16
    • Distortions22
    • Transitions13
    • Blurs9
    • Adjustments14
  • Presets
  • Sections55+
  • Docs
  • Tutorials
  • MCP
  • Pricing
  • Legal
  1. Components
  2. Shapes

Shapes

Crisp signed-distance shapes at any resolution.

All 197Textures 54Shapes 16Shape Effects 23Stylize 30Interactive 16Distortions 22Transitions 13Blurs 9Adjustments 14
  • Arc rendered

    Arc

    Pie sector (arc wedge) with adjustable radius and aperture angle

  • Circle rendered

    Circle

    Generate a circle with adjustable size and softness

  • Crescent rendered

    Crescent

    Crescent moon shape — an outer circle with an inner circle subtracted

  • Cross rendered

    Cross

    Plus / cross shape with adjustable arm length, width, and rounding

  • Ellipse rendered

    Ellipse

    Ellipse with independently adjustable horizontal and vertical radii

  • Flower rendered

    Flower

    Petal shape with N lobes and adjustable inner-to-outer radius ratio

  • Heart rendered

    Heart

    Heart shape with adjustable size

  • Line rendered

    Line

    Draw a straight line between two points with color, thickness, and solid, dashed, or dotted styles

  • Parallelogram rendered

    Parallelogram

    Parallelogram with adjustable width, height and skew

  • Polygon rendered

    Polygon

    Regular polygon with adjustable sides and corner rounding

  • Ring rendered

    Ring

    Annular ring (donut) with adjustable radius and band thickness

  • RoundedRect rendered

    RoundedRect

    Rounded rectangle with adjustable width, height, and corner rounding

  • Star rendered

    Star

    Classic star polygon with straight sides and sharp pointed tips

  • Teardrop rendered

    Teardrop

    Teardrop — a rounded bulb tapering to a sharp point

  • Trapezoid rendered

    Trapezoid

    Trapezoid with adjustable top and bottom widths and height

  • Vesica rendered

    Vesica

    Vesica piscis (lens shape) formed by the intersection of two overlapping circles

Shaders logo

Product

  • Home
  • MCP
  • Pricing
  • Support

Frameworks

  • React
  • Vue
  • Svelte
  • Solid
  • JavaScript
  • Framer

Presets

  • Explore
  • Backgrounds
  • Logo Shaders
  • Image Effects

Resources

  • Learn
  • Documentation
  • Components
  • Updates
  • WebGPU check

Legal

  • Privacy
  • Terms
  • License

© 2026 Shader Effects Inc. All rights reserved.
Shaders™ is a trademark of Shader Effects, Inc.

XDiscordYouTubenpm