[HTML/CSS] pure css pie charts

using sass variables

pies/_pie-charts.scss

@@ -1,33 +1,52 @@
+$pie-size:300px;
+$pie-bg:#3434AF;
+$red:#ed3457;
+$green:#248991; 
+$orange:#ed8724; 
+$line-color:#cecece;
+$border-width:5px;
+$segment-border-width:1px;
+
 :root{
-  --pie-size:300;
-  --pie-bg:#3434AF;
-  --red:#ed3457;
-  --green:#248991; 
-  --orange:#ed8724; 
-  --line-color:#cecece;
+  font-family: sans-serif;
 }
 
 .pie,.target {
   border-radius: 100%;
   position: relative;
 }
+
 .pie {
-  height: calc( var(--pie-size,200) * 1px );
-  width:  calc( var(--pie-size,200) * 1px );
-  background-color:var(--pie-bg,black);
-  top:5px;
-  left:5px;
+  height: $pie-size;
+  width:  $pie-size;
+  background-color:$pie-bg;
+  top:$border-width;
+  left:$border-width;
+  &-segment {
+    border: dotted $segment-border-width $line-color;
+    position: absolute;
+    height: 100%;
+    width:100%;
+  }
 }
+
 .target {
-  height: calc( (var(--pie-size,200) + 10) * 1px );
-  width:  calc( (var(--pie-size,200) + 10) * 1px );
-  background-color:var(--line-color,grey);
+  height: ($pie-size + $border-width * 2);
+  width:  ($pie-size + $border-width * 2);
+  background-color:$line-color;
 }
 
 .references {
   position:fixed;
-  bottom:0;
-  left:0;
-  right:0;
-  background-color:var(--line-color);
+  bottom:5px;
+  right:5px;
+  border-radius:5px;
+  padding:10px;
+  background-color:lightblue;
+  a {
+    &[href],&:link,&:hover,&:focus,&:active {
+      color:darkblue;
+    }
+  }
 }
+

pies/pie-charts.css

@@ -1,32 +1,35 @@
 :root {
-  --pie-size:300;
-  --pie-bg:#3434AF;
-  --red:#ed3457;
-  --green:#248991;
-  --orange:#ed8724;
-  --line-color:#cecece; }
+  font-family: sans-serif; }
 
 .pie, .target {
   border-radius: 100%;
   position: relative; }
 
 .pie {
-  height: calc( var(--pie-size,200) * 1px );
-  width: calc( var(--pie-size,200) * 1px );
-  background-color: var(--pie-bg, black);
+  height: 300px;
+  width: 300px;
+  background-color: #3434AF;
   top: 5px;
   left: 5px; }
+  .pie-segment {
+    border: dotted 1px #cecece;
+    position: absolute;
+    height: 100%;
+    width: 100%; }
 
 .target {
-  height: calc( (var(--pie-size,200) + 10) * 1px );
-  width: calc( (var(--pie-size,200) + 10) * 1px );
-  background-color: var(--line-color, grey); }
+  height: 310px;
+  width: 310px;
+  background-color: #cecece; }
 
 .references {
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--line-color); }
+  bottom: 5px;
+  right: 5px;
+  border-radius: 5px;
+  padding: 10px;
+  background-color: lightblue; }
+  .references a[href], .references a:link, .references a:hover, .references a:focus, .references a:active {
+    color: darkblue; }
 
 /*# sourceMappingURL=pie-charts.css.map */

pies/pie-charts.css.map

@@ -1,7 +1,7 @@
 {
 "version": 3,
-"mappings": "AAAA,KAAK;EACH,UAAU,CAAC,GAAG;EACd,QAAQ,CAAC,OAAO;EAChB,KAAK,CAAC,OAAO;EACb,OAAO,CAAC,OAAO;EACf,QAAQ,CAAC,OAAO;EAChB,YAAY,CAAC,OAAO;;AAGtB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAEpB,IAAK;EACH,MAAM,EAAE,iCAAiC;EACzC,KAAK,EAAG,iCAAiC;EACzC,gBAAgB,EAAC,oBAAmB;EACpC,GAAG,EAAC,GAAG;EACP,IAAI,EAAC,GAAG;;AAEV,OAAQ;EACN,MAAM,EAAE,wCAAwC;EAChD,KAAK,EAAG,wCAAwC;EAChD,gBAAgB,EAAC,uBAAsB;;AAGzC,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,CAAC;EACR,IAAI,EAAC,CAAC;EACN,KAAK,EAAC,CAAC;EACP,gBAAgB,EAAC,iBAAiB",
+"mappings": "AASA,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO;;AAiCnB,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,SAAS;EAExB,uGAAwC;IACtC,KAAK,EAAC,QAAQ",
 "sources": ["_pie-charts.scss"],
 "names": [],
 "file": "pie-charts.css"
-}
+}