Simple Circle Clip

Learn the basics of clipping elements with circular shapes. This demo shows how to use circle() function with different sizes and positions.

Key Concepts

• Basic circle() function syntax
• Positioning circles with 'at' keyword
• Using percentages for responsive sizing

Technical Details

clip-path: circle(50% at 50% 50%);
/* Syntax: circle(radius at x y) */
/* radius: percentage or length */
/* x, y: center position