JSFiddle - React, Tailwind, and code Playground

by lamarant

HTML

<section>
<h1>401 Web Solutions</h1>
<h5>contact us</h2>
</section>
<canvas id='s'>This application requires a (fast) HTML5 compliant browser.</canvas>

CSS

body { background-color: #000000; margin: 0px; overflow: hidden; }
h1,h2, h3, h4, h5, h6 { color: #fff; text-align:center;}
section{position:absolute; top:50%; height:240px; margin-top:-120px; width: 100%; /* negative half of the height */}

JavaScript

/**
 * Original version http://labs.hyperandroid.com/js1k
 */
(function() {
  Grass = function() {
    return this;
  };
  
  Grass.prototype= {
      
    
    alto_hierba: 250,    // grass height
    maxAngle:    5,    // maximum grass rotation angle (wind movement)
    angle:       0,    // construction angle. thus, every grass is different to others  
    coords:      null,  // quadric bezier curves coordinates
    color:       null,  // grass color. modified by ambient component.
    offset_control_point:   3,    // grass base width. greater values, wider at the basement.

    initialize : function(canvasWidth, canvasHeight, minHeight, maxHeight, angleMax, initialMaxAngle)  {

      // grass start position
      var sx= Math.floor( Math.random()*canvasWidth );
      var sy= canvasHeight;
      
      // quadric curve middle control point. higher values means wider grass from base to peak.
      // try offset_control_x=10 for thicker grass.
      var offset_control_x=1.5;  
      
      //this.alto_hierba= minHeight+Math.random()*maxHeight;
      //this.maxAngle= 10+Math.random()*angleMax;
      this.angle= Math.random()*initialMaxAngle*(Math.random()<0.5?1:-1)*Math.PI/180;

      // hand crafted value. modify offset_control_x to play with grass curvature slope.
      var csx= sx-offset_control_x ;

      // grass curvature. greater values make grass bender. 
      // try with:  
      //        var csy= sy-this.alto_hierba;  -> much more bended grass.
      //        var csy= sy-1;                 -> totally unbended grass.
      //        var csy= sy-this.alto_hierba/2;-> original. good looking grass.
      var csy= 0;
      if ( Math.random()<0.1 ) {
        csy= sy-this.alto_hierba;
      } else {
        csy= sy-this.alto_hierba/2;
      }
          
      /**
       I determined that both bezier curves that conform each grass should have
       the same middle control point to be parallel.
       You can play with psx/psy adding or removing values to...