hack piechart

by Chris Buttery

HTML

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



<!-- 
<svg width="600" height="600" viewBox="0 0 600 600" 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="M300 500C410.458 500 500 410.458 500 300C500 189.543 410.458 100 300 100C189.543 100 100 189.543 100 300C100 410.458 189.543 500 300 500Z" fill="black" stroke="#FF7A7A" stroke-width="2"/>
</svg>-->


<!-- <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <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"/>
    <path d="M3 10C3 11.8565 3.7375 13.637 5.05025 14.9497C6.36301 16.2625 8.14348 17 10 17C11.8565 17 13.637 16.2625 14.9497 14.9497C16.2625 13.637 17 11.8565 17 10C17 8.14348 16.2625 6.36301 14.9497 5.05025C13.637 3.7375 11.8565 3 10 3C8.14348 3 6.36301 3.7375 5.05025 5.05025C3.7375 6.36301 3 8.14348 3 10Z" fill="none" style={{
        stroke: 'black',
        strokeWidth: 150,
        strokeDasharray: "0 50 50 0",
        strokeDashoffset: 20,
        transform: "translate(75,75) rotate(90,100,100) "
      }}>
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="14" dur="2s" repeatCount="1" fill="freeze"/> 

</path>
  </svg> -->

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> */