[[[https://codepen.io/inlet/pen/2b7da2053276c634928a7eca450648c8]]]

html,
body {
  height: 100vh;
  background: #eef1f5;
  overflow: hidden;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

const { Stage, AppConsumer, TilingSprite } = ReactPixi

const pattern = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/p2.jpeg'


class Tiling extends React.Component {
  count = 0;

  state = {
    tileScale: { x: 1, y: 1 },
    tilePosition: { x: 0, y: 0 }
  };

  componentDidMount() {
    this.props.app.ticker.add(this.tick);
  }

  componentWillUnmount() {
    this.props.app.ticker.remove(this.tick);
  }

  tick = delta => {
    this.count += 0.005 * delta;

    this.setState(state => ({
      tileScale: {
        x: 2 + Math.sin(this.count),
        y: 2 + Math.cos(this.count)
      },
      tilePosition: {
        x: state.tilePosition.x + 1,
        y: state.tilePosition.y + 1
      }
    }));
  };

  render() {
    return (
      <TilingSprite
        image={pattern}
        width={500}
        height={500}
        tilePosition={this.state.tilePosition}
        tileScale={this.state.tileScale}
      />
    );
  }
}

const App = () => (
  <Stage width={500} height={500} options={{ autoDensity: true, backgroundColor: 0x012b30 }}>
    <AppConsumer>
      { app => <Tiling app={app} />}
    </AppConsumer>
  </Stage>
)

ReactDOM.render(<App />, document.body);