React

HTML

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

React

function createMarker() {
	return {
  	width: 5,
    height: 5,
    x: ~~(Math.random() * 500),
    y: ~~(Math.random() * 500),
  }
}
let markers = []; 
 
class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	 iteration: 0
    };
    
    let func = () => {
    	markers.push(createMarker());
      this.setState({
        iteration: this.state.iteration+1,
      })
    	requestAnimationFrame(func);
    }
    func();
  }
  
  createD() {
  	return markers.reduce((d, item) => {
    	return d + `M${item.x} ${item.y} H ${item.x+item.width} V ${item.y+item.height} H ${item.x} L ${item.x} ${item.y} `
    }, '');
  }
  
  render() {
    return (
      <div>
        <div>{markers.length}</div>
        <svg width="500px" height="500px" version="1.1">
          <path d={this.createD()} fill="red" stroke="blue"/>
        </svg>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))