Circles - JSFiddle

by jonahe

HTML

<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<div id="root"></div>

CSS

.apa {
  background-color: yellow;
}

circle {
  //fill: #f1f1f1;
  fill-opacity: 0;
  stroke: green;
  stroke-width: 5;
}

path {
  fill: green;
}

svg.pie {
  width: 230px;
  height: 230px;
}

Babel + JSX

// https://stackoverflow.com/questions/21205652/how-to-draw-a-circle-sector-in-css
// jsfiddle demo: http://jsfiddle.net/jonathansampson/tYaVW/
// alternativ formel: http://jsfiddle.net/lensco/ScURE/

const App = ({width}) => {
	const cx = cy = width;
  const r = width / 2;
  
  return (
      <div className="apa">
        <svg className="pie">
          <circle cx={ cx } cy={ cy } r="110" ></circle>
          <path d="M115,115 L115,5 A110,110 1 0,1 190,35 z"></path>
        </svg>
      </div>
  );
};

ReactDOM.render(<App width={ 115 } />, document.getElementById('root'));