Shapes & Graphics
For the longest time, creating advanced graphic effects on the web has either required a lot of upfront work in graphics editor apps, or else just plain not been possible.
But now, with wider support for masking, blend modes, filters, and more, effects that previously seemed impossible are just a couple lines of code away. Best of all: because they're now achievable through pure CSS, you don't have to give up on accessibility and adaptability anymore.
The size of the outer circle corresponds to the total number of users who know about a feature, while the inner one represents those who have actually used it.
Hover on each node to view detailed data along with an overlay representing the total number of survey respondents.
Usage by Years Of Experience
The “overall” column shows overall usage for each feature (respondents who selected “have used it”), while the following columns show the usage ratio for each “years of experience” bracket.
A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.
clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
Filters & Effects
filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.