[HTML/CSS] pure css pie charts

- updating docs and adding refs to downloaded docs

pies/README.md

@@ -11,3 +11,15 @@ sass style.scss:pie-charts.css
 ```
 sass --watch style.scss:pie-charts.css
 ```
+
+## references 
+Les réferences indiquées dans le html sont disponibles en pdf et le code en mode txt.
+CF : 
+ - [doc monopart](./pure-CSS-pie-charts-monopart.pdf)
+ - [code monopart](./pure-CSS-pie-charts-monopart-code.txt)
+ - [doc multipart](./pure-CSS-pie-charts-multipart.pdf)
+ - [code multipart](./pure-CSS-pie-charts-multipart-code.txt)
+	
+	
+	
+	

pies/pure-CSS-pie-charts-monopart-code.txt

@@ -0,0 +1,58 @@
+<div class="pie" style="--p:20"> 20%</div>
+<div class="pie" style="--p:40;--c:darkblue;--b:10px"> 40%</div>
+<div class="pie no-round" style="--p:60;--c:purple;--b:15px"> 60%</div>
+<div class="pie animate no-round" style="--p:80;--c:orange;"> 80%</div>
+<div class="pie animate" style="--p:90;--c:lightgreen"> 90%</div>
+@property --p{
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 1;
+}
+
+.pie {
+  --p:20;
+  --b:22px;
+  --c:darkred;
+  --w:150px;
+
+  width: var(--w);
+  aspect-ratio: 1;
+  position: relative;
+  display: inline-grid;
+  margin: 5px;
+  place-content: center;
+  font-size: 25px;
+  font-weight: bold;
+  font-family: sans-serif;
+}
+.pie:before,
+.pie:after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+}
+.pie:before {
+  inset: 0;
+  background:
+    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
+    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
+  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
+          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
+}
+.pie:after {
+  inset: calc(50% - var(--b)/2);
+  background: var(--c);
+  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
+}
+.animate {
+  animation: p 1s .5s both;
+}
+.no-round:before {
+  background-size: 0 0, auto;
+}
+.no-round:after {
+  content: none;
+}
+@keyframes p{
+  from{--p:0}
+}

pies/pure-CSS-pie-charts-multipart-code.txt

@@ -0,0 +1,97 @@
+
+https://codepen.io/jh3y/pen/aQomdd
+
+<div class="pie">
+  <div class="pie__segment" style="--offset: 0; --value: 25; --bg: #db0a5b;"></div>
+  <div class="pie__segment" style="--offset: 25; --value: 10; --bg: #22a7f0;"></div>
+  <div class="pie__segment" style="--offset: 35; --value: 60; --bg: #2ecc71; --over50: 1;"></div>
+  <div class="pie__segment" style="--offset: 95; --value: 5; --bg: #4d05e8;"></div>
+</div>
+<div class="actions">
+  <label>Offset</label>
+  <label>Value</label>
+  <input type="number" min="0" max="360" step="1" value="0"/>
+  <input type="number" min="0" max="360" step="1" value="25"/>
+  <input type="number" min="0" max="360" step="1" value="25"/>
+  <input type="number" min="0" max="360" step="1" value="10"/>
+  <input type="number" min="0" max="360" step="1" value="35"/>
+  <input type="number" min="0" max="360" step="1" value="60"/>
+  <input type="number" min="0" max="360" step="1" value="95"/>
+  <input type="number" min="0" max="360" step="1" value="5"/>
+</div>
+
+.pie {
+  border-radius: 100%;
+  height: calc(var(--size, 200) * 1px);
+  overflow: hidden;
+  position: relative;
+  width: calc(var(--size, 200) * 1px);
+}
+.pie__segment {
+  --a: calc(var(--over50, 0) * -100%);
+  --b: calc((1 + var(--over50, 0)) * 100%);
+  --degrees: calc((var(--offset, 0) / 100) * 360);
+  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+  height: 100%;
+  position: absolute;
+  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
+  transform-origin: 50% 100%;
+  width: 100%;
+  z-index: calc(1 + var(--over50));
+}
+.pie__segment:after,
+.pie__segment:before {
+  background: var(--bg, #e74c3c);
+  content: '';
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.pie__segment:before {
+  --degrees: calc((var(--value, 45) / 100) * 360);
+  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
+  transform-origin: 50% 0%;
+}
+.pie__segment:after {
+  opacity: var(--over50, 0);
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  align-items: center;
+  background: #111;
+  color: #fafafa;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  justify-content: center;
+  min-height: 100vh;
+}
+label {
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+}
+input {
+  min-width: 80px;
+}
+.actions {
+  display: grid;
+  grid-gap: 4px;
+  grid-template-columns: auto auto;
+  z-index: 99;
+}
+
+const pie = document.querySelector('.pie');
+const actions = document.querySelector('.actions');
+const segments = pie.children;
+
+const updateSegment = e => {
+  const idx = [...actions.children].indexOf(e.target);
+  const key = idx % 2 === 0 ? 'offset' : 'value';
+  const toUpdate = segments[Math.floor(idx / 2) - 1];
+  toUpdate.style.setProperty(`--${key}`, e.target.value);
+};
+window.addEventListener('input', updateSegment);