JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>

CSS

html, body {
  height: 100%;
}

JavaScript

const { svg, circle, div } = React.DOM

const initialState = {
	actors: [
		{ x: .25, y: .5, color: 'blue' },
		{ x: .75, y: .5, color: 'red' },
  ]
}

function update (t, s) {
	return {
 		actors: [
			{ x: s.actors[0].x, y: 0.75 * Math.sin(t / 10), color: s.actors[0].color },
			{ x: s.actors[1].x, y: 0.75 * Math.cos(t / 10), color: s.actors[1].color }    
    ] 
  }
}

function render (s) {
	ReactDOM.render(Stage(s), document.body)
}

const toPercent = n => (n * 100).toFixed(2) + '%'

const Stage = props => svg({ 
	style: {
    width: '100%', 
    height: '100%',
  },
  children: props.actors.map(Actor)
})

const Actor = ({ x, y, color }) => circle({ 
	style: {
    transform: `translate( ${ toPercent(x) }, ${ toPercent(y) } )`,
  },
  r: '10%',
  stroke: color,
  strokeWidth: '3px',
  fill: 'none'
})

function makeTick () {
	let t = 0
  let s = initialState
  return function tick () {
  	s = update(t++, s)
    render(s)
    requestAnimationFrame(tick)
  }
}

requestAnimationFrame(makeTick())