JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<script src="https://raw.github.com/jakiestfu/CXX/master/cxx.js"></script>
<div id="sample">
  <p>
    My background has a lovely noise texture/
    <br /><br />
    <code>background: noise(100px 100px 0.3) repeat;</code></p>
</div>

CSS

body{
  text-align:center;
  padding-top:50px;
}

#sample {
  display:inline-block;
  background:#555;
  color: #fefefe;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
#sample p{
  
  background: noise(100px 100px 0.3) repeat;
  
  padding:50px;
  -webkit-box-shadow:0 0 50px #111 inset;
  box-shadow:0 0 50px #111 inset;
}

JavaScript

CXX({
  type: 'replace',
  fn: 'noise',
  filter: function (width, height, opacity) {

    if ( !! !document.createElement('canvas').getContext) {
      return false;
    }
    var canvas = document.createElement("canvas"),
      ctx = canvas.getContext('2d'),
      x, y,
      number,
      opacity = opacity || 0.2;
    canvas.width = parseInt(width, 10);
    canvas.height = parseInt(height, 10);
    for (x = 0; x < canvas.width; x++) {
      for (y = 0; y < canvas.height; y++) {
        number = Math.floor(Math.random() * 60);
        ctx.fillStyle = "rgba(" + number + "," + number + "," + number + "," + opacity + ")";
        ctx.fillRect(x, y, 1, 1);
      }
    }
    return 'url(' + canvas.toDataURL("image/png") + ')';

  }
});