- let data = [
- 	{ val: 65, col: '#f2d786', txt: 'html' }, 
- 	{ val: 70, col: '#ff9784', txt: 'css' }, 
- 	{ val: 25, col: '#c09491', txt: 'js' }
- ];
- let n = data.length;

h3 skills
ul(style=`--n: ${n}`)
	- for(let i = 0; i < n; i++)
		- let c = data[i]
		li(style=`--i: ${i}; --v: ${c.val}; background: ${c.col}`) #{c.txt}

$d: 7em;
$r:.5*$d;
$t: 1s;

@property --v {
	syntax: '<integer>';
	initial-value: 0;
	inherits: false
}

* { margin: 0; padding: 0; list-style: none; font: inherit }

body, h3, ul { display: grid }

body {
	box-sizing: border-box;
	place-content: end start;
	overflow: hidden;
	padding: $r;
	min-height: 100vh;
	background: #262626;
	font: 1.25em/ 1.5 ubuntu, rebuchet ms, sans-serif
}

h3, ul, li { grid-area: 1/ 1 }

h3 {
	place-content: center;
	overflow: hidden;
	z-index: 1;
	width: $d; height: $d;
	border-radius: 50%;
	box-shadow: inset 0 0 0 .75em rgba(#323232, .5);
	background: darkslategrey;
	color: gainsboro;
	text-transform: capitalize;
	animation: 
		disc $t cubic-bezier(.35, 1.65, .65, 1) $t both, 
		text $t ease-out 2*$t both
}

@keyframes disc {
	0% { transform: scale(0) }
	90% { transform: scale(.9) }
}

@keyframes text {
	0% {
		color: transparent;
		text-indent: -$d
	}
}

ul {
	--m: calc(.5*(var(--n) - 1));
	place-self: center;
	width: 0;
}

li {
	--o0: calc((30 + var(--v))*1%);
	--o1: calc(var(--o0) - .5em);
	padding-left: calc(#{$r} + .5em);
	width: 25em;
	transform-origin: 0;
	transform: rotate(calc((var(--i) - var(--m))*20deg));
	text-transform: uppercase;
	clip-path: 
		polygon(0 0, 0 100%, 
						var(--o1) 100%, var(--o0) 50%, var(--o1) 0);
	counter-reset: v var(--v);
	animation: 
		arrw 2*$t ease-in-out 3*$t both, 
		text $t ease-out 5*$t both, 
		v calc(var(--v)*.02s) linear 6*$t both;
	
	&::after { content: ' ' counter(v) '%' }
}

@keyframes arrw {
	0% { transform: rotate(-90deg) rotatey(90deg) }
	50% { transform: rotate(-90deg) }
}

@keyframes v { 0% { --v: 0 } }

// no JS
// demo uses Houdini, so it's fully functional in Chromium only