<div class="main-wrapper">
  <div class="yellow-container">
    <div class="wrapper">
      <p class="text-white">PARAMOR&nbsp;E</p>
      <p>&nbsp;</p>
      <div class="inline-block">
        <p class="text-black">LAUGH</p>
        <p>HTER</p>
        </div>
    </div>
  </div>
  <canvas id="smiley" width="1000px" height="1000px"></canvas>

</div>

$yellow: #dbbc41;

* {
  font-family: 'Oswald', sans-serif;
  // font-weight: 200;
}

.main-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* used https://www.cssmatic.com/gradient-generator for the gradients */
  .wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    background: rgba(217,170,206,1);
  background: -moz-linear-gradient(top, rgba(217,170,206,1) 0%, rgba(217,170,206,1) 40%, rgba(152,147,201,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(217,170,206,1)), color-stop(40%, rgba(217,170,206,1)), color-stop(100%, rgba(152,147,201,1)));
  background: -webkit-linear-gradient(top, rgba(217,170,206,1) 0%, rgba(217,170,206,1) 40%, rgba(152,147,201,1) 100%);
  background: -o-linear-gradient(top, rgba(217,170,206,1) 0%, rgba(217,170,206,1) 40%, rgba(152,147,201,1) 100%);
  background: -ms-linear-gradient(top, rgba(217,170,206,1) 0%, rgba(217,170,206,1) 40%, rgba(152,147,201,1) 100%);
  background: linear-gradient(to bottom, rgba(217,170,206,1) 0%, rgba(217,170,206,1) 40%, rgba(152,147,201,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9aace', endColorstr='#9893c9', GradientType=0 );
    .inline-block {
      display: inline-block;
      margin-top: 12px;
      p {
        display: inline-block;
        &:nth-child(1) {
          transform: skewX(4deg);
        }
        &:nth-child(2) {
          transform: skewX(-4deg);
        }
      }
    }
    p {
      margin: 0;
      letter-spacing: 35px;
      font-size: 70px;
      &.text-white {
        color: #fff;
      }
    }
  }
  
  .yellow-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column-reverse;

  }
  #smiley {
    position: absolute;
  }
}

var c = document.getElementById("smiley");
var canvas = c.getContext("2d");
var phase = Math.random()*Math.PI*2;
console.log(phase)
var color = '#dbbc41';
var color2 = '#000';
var displayWidth = c.width;
var displayHeight = c.height;

var centerX = displayWidth / 2;
var centerY = displayHeight / 2;
var minRad = (centerX / 2) - 13;
var maxRad = centerX / 2;

drawCircle(centerX, centerY, minRad, maxRad, phase, color, color);
drawCircle(centerX, centerY, minRad + 10, maxRad + 10, phase, 'transparent', color2);

drawFace(centerX, centerY);

function drawFace(x, y) {
  
  
//   drawCircle(x - 100, y + 100, 47, 50, phase, '#000', 'transparent');
//   drawCircle(x + 100, y + 100, 47, 50, phase, '#000', 'transparent');
  
  
  // smiley lips
  canvas.beginPath();
  canvas.bezierCurveTo(x - 150, y - 100, 
                       x - 150  + 150, y - 100 - 120, 
                       x - 150  + 300, y - 100);
  canvas.strokeStyle = '#000';
  canvas.lineWidth = 5;
  canvas.stroke();
  
  canvas.beginPath();
  canvas.bezierCurveTo(x - 150, y - 100, 
                       x - 150  + 150, y - 100 - 110, 
                       x - 150  + 300, y - 100);
  canvas.strokeStyle = '#000';
  canvas.lineWidth = 5;
  canvas.stroke();
  
  canvas.beginPath();
  canvas.ellipse(x - 149, y - 70 - 30, 5, 20, 130 * Math.PI/180, 0, 2 * Math.PI);
  canvas.moveTo(x + 250 - 90, y - 100 - 10);
  canvas.ellipse(x + 250 - 100, y - 70 - 30, 5, 20, 40 * Math.PI/180, 0, 2 * Math.PI);
  // canvas.moveTo(x - 150 - 18, y - 100 - 20);
  // canvas.lineTo(x - 150 + 15, y - 100 + 20);
  // canvas.moveTo(x + 250 - 90, y - 100 - 20);
  // canvas.lineTo(x + 250 - 115, y - 100 + 20);
  canvas.strokeStyle = '#000';
  canvas.fillStyle = '#000';
  canvas.fill();
  canvas.lineWidth = 5;
  canvas.stroke();
  
  // smiley eyes
  canvas.beginPath();
  canvas.ellipse(x - 70, y + 70, 30, 63, 175 * Math.PI/180, 0, 2 * Math.PI);
  canvas.ellipse(x + 70, y + 65, 30, 65, 12 * Math.PI/180, 0, 2 * Math.PI);
  canvas.fillStyle = '#000';
  canvas.fill();
  
}


/*
credits for the imperfect circle:
https://codepen.io/RectangleWorld/full/murei?editors=0010
*/
function drawCircle(centerX, centerY, minRad, maxRad, phase, fillcolor, strokcolor) {
  var point;
  var rad, theta;
  var twoPi = 2*Math.PI;
  var x0,y0;

  //generate the random function that will be used to vary the radius, 9 iterations of subdivision
  var pointList = setLinePoints(9);

  canvas.strokeStyle = strokcolor;
  canvas.lineWidth = 10.01;
  canvas.fillStyle = fillcolor;
  canvas.beginPath();
  point = pointList.first;
  theta = phase;
  rad = minRad + point.y*(maxRad - minRad);
  x0 = centerX + rad*Math.cos(theta);
  y0 = centerY + rad*Math.sin(theta);
  canvas.lineTo(x0, y0);
  while (point.next != null) {
    point = point.next;
    theta = twoPi*point.x + phase;
    rad = minRad + point.y*(maxRad - minRad);
    x0 = centerX + rad*Math.cos(theta);
    y0 = centerY + rad*Math.sin(theta);
    canvas.lineTo(x0, y0);
  }
  canvas.stroke();
  canvas.fill();		
}

function setLinePoints(iterations) {
  var pointList = {};
  pointList.first = {x:0, y:1};
  var lastPoint = {x:1, y:1}
  var minY = 1;
  var maxY = 1;
  var point;
  var nextPoint;
  var dx, newX, newY;

  pointList.first.next = lastPoint;
  for (var i = 0; i < iterations; i++) {
    point = pointList.first;
    while (point.next != null) {
      nextPoint = point.next;

      dx = nextPoint.x - point.x;
      newX = 0.5*(point.x + nextPoint.x);
      newY = 0.5*(point.y + nextPoint.y);
      newY += dx*(Math.random()*2 - 1);

      var newPoint = {x:newX, y:newY};

      //min, max
      if (newY < minY) {
        minY = newY;
      }
      else if (newY > maxY) {
        maxY = newY;
      }

      //put between points
      newPoint.next = nextPoint;
      point.next = newPoint;

      point = nextPoint;
    }
  }

  //normalize to values between 0 and 1
  if (maxY != minY) {
    var normalizeRate = 1/(maxY - minY);
    point = pointList.first;
    while (point != null) {
      point.y = normalizeRate*(point.y - minY);
      point = point.next;
    }
  }
  //unlikely that max = min, but could happen if using zero iterations. In this case, set all points equal to 1.
  else {
    point = pointList.first;
    while (point != null) {
      point.y = 1;
      point = point.next;
    }
  }

  return pointList;		
}