John Rhea

The CSS animation-range property lets you control how a view timeline animation works, setting exactly when and where the animation starts and stops. You can think of it as letting you pin the start and end of your animation to …

The ray() function is used in combination with the offset-path property and creates a line segment, a ray. It lets you move or place an element using polar coordinates, i.e. coordinates based on a distance and an angle instead of Cartesian coordinates, where the X coordinate is on the horizontal axis and the Y coordinate is on the vertical axis.

John Rhea challenged himself to recreate the fancy button using the new CSS shape() function sprinkled with animation to get things pretty close.

The CSS polygon() function allows you to create any type of polygon to use in the shape-outside, clip-path, and offset-path properties.

The CSS xywh() function allows you to create rectangles by setting the upper-left corner point and the width and height for use in the shape-outside, clip-path properties.

The CSS inset() function allows you to create rectangles to use with the shape-outside, clip-path, and offset-path properties.

The CSS ellipse() function allows you to create ellipses when used with the shape-outside, clip-path, and offset-path properties.…

The CSS circle() function allows you to create, you guessed it, circles when used with the shape-outside, clip-path, and offset-path properties.…

The CSS path() function enables us to create complex paths, polygons and other shapes using SVG path command syntax.