JSFiddle - React, Tailwind, and code Playground

by stovberpv

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!--  -->
  <section class="section media">
    <canvas id='canvas'></canvas>
  </section>
  <!-- / -->

  <!--  -->
  <section class='section represent'>
  </section>
  <!-- / -->

  <!--  -->
  <section class='section service'>
  </section>
  <!-- / -->

  <!--  -->
  <section class="section contact">
  </section>
  <!-- / -->

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS

html {
  font-size: 10px;
}
html,
body {
  height: 100%;
}
body {
  margin: unset;
}
.section {
  text-align: center;
}
.section.media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.section.media canvas {
  width: 100%;
  height: 100%;
}

JavaScript

;(function () {
  'use strict';

  function Curve (opts) {
    this.cp1x = opts.cp1x;
    this.cp1y = opts.cp1y;
    this.cp2x = opts.cp2x;
    this.cp2y = opts.cp2y;
    this.x = opts.x;
    this.y = opts.y;
    this.sp1x = opts.sp1x;
    this.sp1y = opts.sp1y;
    this.sp2x = opts.sp2x;
    this.sp2y = opts.sp2y;

    this.toArray = function() {
      return [
        this.cp1x,
        this.cp1y,
        this.cp2x,
        this.cp2y,
        this.x,
        this.y
      ];
    };
  }

  function Canvas () {
    let curves = [...Array(10)];
    let overflow = 1000;
    let start;
    let end;
    let canvas;
    let ctx;

    this.attach = function (target) {
      let c = document.getElementById(target);
      if (!c) {
        throw new Error('Cant find root canvas element');
      } else {
        canvas = c;
      }

      return this;
    }

    this.init = function () {
      ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      start = {
        x: 0 - overflow,
        y: canvas.height / 2
      };

      end = {
        x: canvas.width + overflow,
        y: canvas.height / 2
      };

      _generateBezierCurves();

      return this;
    }

    this.draw = function draw () {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.lineWidth = 1;
      ctx.strokeStyle = 'rgba(255, 204, 0, .3)';

      curves.forEach(curve => {
        ctx.beginPath();
        ctx.moveTo(start.x, start.y);
        ctx.bezierCurveTo(...curve.toArray());
        ctx.stroke();

        // checkThreshold(curve.cp1x, curve.sp1x);
        if (curve.cp1x < 0 || curve.cp1x > canvas.width) {
            curve.cp1x -= curve.sp1x;
            curve.sp1x *= -1;
        }

        // checkThreshold(curve.cp1y, curve.sp1y);
        if (curve.cp1y < 0 || curve.cp1y > canvas.height) {
            curve.cp1y -= curve.sp1y;
            curve.sp1y *= -1;
        }

        // checkThreshold(curve.cp2x,...