Hack piechart

by Chris Buttery

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

function PieChart({ percentage }) {


 return (
 

<svg height="425" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M300 575C451.878 575 575 451.878 575 300C575 148.122 451.878 25 300 25C148.122 25 25 148.122 25 300C25 451.878 148.122 575 300 575Z" stroke="#FF7A7A" stroke-width="50"/>
<path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"  fill="none" style={{
        stroke: 'black',
        strokeWidth: 150,
        strokeDasharray: "0 600 600 0",
        strokeDashoffset: 1000,
        transform: "translate(75,75) rotate(90,100,100) "
      }}>
<animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
</path>
</svg>
 

  



/*     <svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
    
      <path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" fill="none" style={{
        stroke: 'black',
        strokeWidth: 150,
        strokeDasharray: "0 300 300 0",
        strokeDashoffset: 2,
    
      }}>
      </path>
    </svg>
     */
 )
}

ReactDOM.render(<PieChart percentage={33} />, document.querySelector("#app"))


/*       <path d="M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z" stroke="#FF7A7A" stroke-width="2"/> */
      
/*     <svg width="20" height="425">
        <path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" fill="none" stroke="black" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000" transform="translate(75,75) rotate(90,100,100) ">
            <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
        </path>
    </svg> */