mbvissers/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Conic Gradient Pie Charts</title>
    <style>
        .pie {
            margin: 16px;
            height: 100px;
            width: 100px;
            border-radius: 50%;
        }

        .one {
            background: conic-gradient(
                dodgerblue 0% 85%,
                orangered 25% 85%,
                limegreen 85% 93%,
                #f9f000 93%
            );
        }

        .two {
            background: conic-gradient(
                cornflowerblue 0% 35%,
                darkorange 35% 57%,
                greenyellow 57% 85%,
                #FFFFFF 85%
            );
        }

        .three {
            background: conic-gradient(
                    deepskyblue 0% 85%,
                    #FFFFFF 85%
            );
        }

        .pie.hollow {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pie.hollow::after {
            content: '';
            position: absolute;
            height: 80px;
            width: 80px;
            border-radius: 50%;
            background-color: #FFFFFF;
        }

        .pie.two.hollow::after {
            content: '';
            position: absolute;
            height: 60px;
            width: 60px;
            border-radius: 50%;
            background-color: #FFFFFF;
        }

        .pie.three.hollow::after {
            content: '';
            position: absolute;
            height: 85px;
            width: 85px;
            border-radius: 50%;
            background-color: #FFFFFF;
        }

        .pie.hollow span {
            font-size: 28pt;
            z-index: 2;
            font-weight: bold;
            font-family: "JetBrains Mono", sans-serif ;
        }
    </style>
</head>
<body>
<div style="display: flex; flex-direction: row;">
    <div class="pie one"></div>
    <div class="pie hollow two"></div>
    <div class="pie hollow three"><span>12</span></div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Conic Gradient Pie Charts</title>
	<style>
	.pie {
	margin: 16px;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	}

	.one {
	background: conic-gradient(
	dodgerblue 0% 85%,
	orangered 25% 85%,
	limegreen 85% 93%,
	#f9f000 93%
	);
	}

	.two {
	background: conic-gradient(
	cornflowerblue 0% 35%,
	darkorange 35% 57%,
	greenyellow 57% 85%,
	#FFFFFF 85%
	);
	}

	.three {
	background: conic-gradient(
	deepskyblue 0% 85%,
	#FFFFFF 85%
	);
	}

	.pie.hollow {
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.pie.hollow::after {
	content: '';
	position: absolute;
	height: 80px;
	width: 80px;
	border-radius: 50%;
	background-color: #FFFFFF;
	}

	.pie.two.hollow::after {
	content: '';
	position: absolute;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	background-color: #FFFFFF;
	}

	.pie.three.hollow::after {
	content: '';
	position: absolute;
	height: 85px;
	width: 85px;
	border-radius: 50%;
	background-color: #FFFFFF;
	}

	.pie.hollow span {
	font-size: 28pt;
	z-index: 2;
	font-weight: bold;
	font-family: "JetBrains Mono", sans-serif ;
	}
	</style>
	</head>
	<body>
	<div style="display: flex; flex-direction: row;">
	<div class="pie one"></div>
	<div class="pie hollow two"></div>
	<div class="pie hollow three"><span>12</span></div>
	</div>
	</body>
	</html>