ToDou

/**
 * Animated pie chart
 */

.pie {
	width: 100px; height: 100px;
	border-radius: 50%;
	background: yellowgreen;
	background-image: linear-gradient(to right, transparent 50%, currentColor 0);
	color: #655;

ToDou

<svg width="100" height="100"> <circle r="25" cx="50" cy="50" />
</svg>

circle {fill: yellowgreen;stroke: #655;stroke-width: 50;stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */}

ToDou

/**
 * Vertical stripes
 */

background: linear-gradient(#fb3 50%, #58a 0);
background-size: 10% 100%;

ToDou

background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
 radial-gradient(tan 20%, transparent 0); 
background-size: 30px 30px;
background-position:0 0, 15rpx 15rpx;

ToDou

/**
 * Inner rounding
 */

div {
	linear-gradient(#fb3, #58a);	}

ToDou

/**
 * Polka dot
 */

background: #655;
background-image: radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;