Pie Chartin

by kthornbloom

HTML

<figure id="fig1"
  data-segment=[]
></figure>

SCSS

// Set a bunch of properties, using syntax to say what kind of value it is. 
@property --p1 {
  syntax: "<percentage>";
  initial-value: 40%;
  inherits: false;
}

@property --p2 {
  syntax: "<percentage>";
  initial-value: 60%;
  inherits: false;
}

@property --c1 {
  syntax: "<color>";
  initial-value: Tomato;
  inherits: false;
}

@property --c2 {
  syntax: "<color>";
  initial-value: rosyBrown;
  inherits: false;
}

@property --c3 {
  syntax: "<color>";
  initial-value: DarkKhaki;
  inherits: false;
}

figure {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  background-image: conic-gradient(var(--c1), var(--c1) var(--p1), var(--c2) 40.25%, var(--c2) var(--p2), var(--c3) 60.25%);
  transition: --p1 1.2s, --p2 1s, --c1 1s, --c2 1s, --c3 1s;
  
  &:hover {
    // Now you can override the property values on hover! Neat-o
    --p1: 50%;
    --p2: 80%;
    --c1: SteelBlue;
    --c2: DeepSkyBlue;
    --c3: Aquamarine;
  }
  
  &::after {
    content: 'HOVER ME';
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 50%;
    height: 50%;
    width: 50%;
  }
}

body {
background: snow;
    font-size: 12px;
    font-family: sans-serif;
    }

JavaScript

const fig = document.getElementById('fig1');

setTimeout(function(){
	fig.style.setProperty('--c1', 'SteelBlue');
}, 1000);