- 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