<div id="app">Loading...</div>
@import url('https://fonts.googleapis.com/css?family=Droid+Sans+Mono');

$primary-color: #FF0050;
$secondary-color: #C1003D;
$tertiary-color: #60001E;
$background-color: #440015;

html {
  background-color: $background-color;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

svg {
  stroke: $secondary-color;
  fill: transparent;
  stroke-width: 8px;
}
.grey {
  stroke: $tertiary-color;
  fill: transparent;
  stroke-width: 3px;
}
text {
  font-family: 'Droid Sans Mono', monospace;
  font-size: 20px;
  fill: $primary-color;
  stroke: $primary-color;
  stroke-width: 1px;
}
View Compiled
/*********
* REACT
**********/
class Sinus extends React.Component {
  constructor() {
        super();

        this.state = {
            degree: 0
        };

        setInterval(this._tick.bind(this), 30);
    }
    _tick() {
      if(this.state.degree < 360) {
        this.setState({degree: this.state.degree+1});
      }else{
        this.setState({degree: 0});
      }
    }
    render() {
      return (<SinusDraw degree={this.state.degree}/>);
    }
    
}

const SinusDraw = ({degree}) => (
  <div id='container'>
      <svg width='940' height='240' xmlns='http://www.w3.org/2000/svg' >
        <g transform='translate(20 20)'>
          
          <text x="0" y="100">
              sin(
          </text>
          
          <line className='grey' x1={Math.cos(degree/180*Math.PI)*100 +  100+110} y1={-Math.sin(degree/180*Math.PI)*100 + 100}
            x2={degree+460} y2={-Math.sin(degree/180*Math.PI)*100 + 100} />
          
          <g transform='translate(110 0)'>
            <line className='grey' x1="100" y1="100" x2="200" y2="100" />
            
            
            <circle className='grey' cx="100" cy="100" r="100"/>
            <path d={'M 130 100 A 30 30 0 ' +(degree <=180 ? '0': '1')+ ' 0' + (Math.cos(degree/180*Math.PI)*30 + 100) + ' ' + (-Math.sin(degree/180*Math.PI)*30 + 100)} />
            <line className='grey' x1="100" y1="100" x2={Math.cos(degree/180*Math.PI)*100 + 100} y2={-Math.sin(degree/180*Math.PI)*100 + 100} />
            <text x={Math.cos(degree/180*Math.PI)*100 + 100+10} y={-Math.sin(degree/180*Math.PI)*100 + 100}>
              {degree}°
            </text>
          </g>
          
          <text x="370" y="100">
              ) =
          </text>
          
          <g transform='translate(460 0)'>
            <line className='grey' x1="0" y1="100" x2="360" y2="100" />
            
            <polyline className='grey'
              points={Array.from({length: 360}, (value, key) => {
                return key + " " + (-Math.sin(key/180*Math.PI)*100 + 100)
              })} />
            <polyline 
              points={Array.from({length: degree}, (value, key) => {
                return key + " " + (-Math.sin(key/180*Math.PI)*100 + 100)
              })} />
            <text x={degree+10} y={-Math.sin(degree/180*Math.PI)*100 + 100}>
              {parseFloat(Math.sin(degree/180*Math.PI)).toFixed(4)}
            </text>
          </g>
        </g>
      </svg>
    </div>
)


ReactDOM.render(
  <Sinus />,
  document.getElementById('app')
);
View Compiled
Rerun