JSFiddle - React, Tailwind, and code Playground

by Soheil Sadeghbayan

HTML

<body onload="travers()">
	<div id="smile" style="width:100%;">
<canvas height="359" style="position: absolute; width: 100%; z-index: 3; display: block;" width="1583"> </canvas>
</div>


<div id="layerslider" class="ls-container ls-noskin" style="width: 100%; height: 359px; visibility: visible;">
<div class="ls-inner" style="background-color: transparent; width: 1583px; height: 359px;">
<div id="asb" class="ls-slide ls-animating" data-ls="" style="width: 1583px; height: 359px; visibility: visible; display: none; left: auto; right: 0px; top: 0px; bottom: auto;"></div>

</div>
</div>

CSS

body{
	background: #333;
}

JavaScript

function travers(){

	jQuery(document).ready(function() {
	   jQuery("body *").each(function(k, v) {
	        if(v.className != "counter" && v.className != "bank"  && v.className !="noper"){
			     jQuery(v).andSelf().contents().each(function() {
			          if (this.nodeType === 3)
			         {
			            this.nodeValue = this.nodeValue.replace(/\d/g, function(v) {
			                return String.fromCharCode(v.charCodeAt(0) + 0x0630);
			           });
			        }
			     });
	        }
	   });
	 });
}

//TIMESTAMP
(function() {
    setInterval(function() {
        var now, timestamp;
        timestamp = new Date(2014, 12, 06);
        now = new Date();
        return $('#time').text(((now - timestamp) / 1000).toFixed(0));
    }, 1000);
}).call(this);



//CANVAS

window.onload = function(){
	  travers(); 
          

		   var lastHeight=$("#asb").height();

	       
	
            var canvas = document.querySelector('canvas');
            ctx = canvas.getContext('2d');
        
			color = '#fff';
			var check =respondCanvas();
			canvas.width = check[1];
			canvas.height =lastHeight;
			canvas.style.display = 'block';
			ctx.fillStyle = color;
			ctx.lineWidth = .1;
			ctx.strokeStyle = color;

        function respondCanvas(){
		var width = [];
	    width[0]= $('#smile').width(); //max width
        width[1]= $('canvas').width(); //max width
       
        return width;

        //Call a function to redraw other content (texts, images etc)
       }
	
	function checkheight(){
		 var height= $('#asb').height(); //max width
		 //console.log(height);
		// return height;
		}

    var mousePosition = {
        x: 30 * canvas.width / 100,
        y: 30 * canvas.height / 100
    };
	
	if(canvas.width<=1000)
	{
		var numdot=100;
	}
	else if(canvas.width<=800){
		var numdot=80;
	}
	else if(canvas.width<=500)
 	{
		var numdot=35;
	}
	else
	{
		var numdot=300;
    }
   
    var dots = {
        nb: numdot,
        distance: 70,
        d_radius: 50,
       ...