JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://aninoob.com/noobshapes/js/noob.shapes.js"></script>
<link rel="stylesheet" href="https://aninoob.com/noobshapes/css/noob.shapes.css">
<div class="stage">

</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  background-color:#000;
  perspective:500px;
}
.stage{
  position:absolute;
  width:0px;
  height:0px;
  top:50%;
  left:50%;
  transform-style: preserve-3d;
  pointer-events:none;
  transform:rotateX(-45deg) translateY(1000px) translateZ(-1000px);
}

.snake-head:before{
  content:'';
  display:block;
  position:absolute;
  top:20px;
  left:-15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 5px 0 5px;
  transform:translateZ(0px);
  border-color: #ffffff transparent transparent transparent;
}
.snake-head:after{
  content:'';
  display:block;
  position:absolute;
  top:20px;
  left:5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 5px 0 5px;
  transform:translateZ(0px);
  border-color: #ffffff transparent transparent transparent;
}
.snake-head .noob-shape-inner-top{
  background-color:#ff0000 !important;
}
.snake-head .noob-shape-inner-left,.snake-head .noob-shape-inner-right,.snake-head .noob-shape-inner-front,.snake-head .noob-shape-inner-back{
  background-image:url(https://aninoob.com/ANINOOB.api/image.library/faces/monster.1.png?1253) !important;
  background-size:cover;
}

JavaScript

noobshapes.init($('.stage'),$('body'));

var snake = {
 
	stage: $('.stage'),
	
  index: 1, // for iding the snake
	elements: Array(),
  
  segments: 12,
  color: 'green',
  speed: 40,
  
  down_left: false,
  down_up: false,
  down_right: false,
  down_down: false,
  
  floor: 0,
  radius: 40,
  direction: { x:0,y:0,z:0 },
  
  random_number: function(max){
	
		return (Math.round(Math.random()*max));
	
	},
  
  getRandomColor: function() {
  
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
    
  },
  
  start: function(){
  	
    var cached_this = this;
    
    setInterval(function(){
    
    	cached_this.direction = { x: cached_this.random_number(20)-10,y: cached_this.random_number(16)-8, z: cached_this.random_number(10)-5 };
    
    },cached_this.segments*cached_this.speed);
    
    for(var i=0;i<cached_this.segments;i++){
    	
      var color = cached_this.color;
      
      if(cached_this.color == 'random'){
      
      	color = cached_this.getRandomColor();
      
      }
      
      var zindex = 1000-i;
      
    	//var segment = $('<div style="background-color:' + color + ';z-index:' + zindex + ';"  class="snake" data-index="' + i + '" id="snake' + cached_this.index + '-' + i + '"></div>');
      
      var segment =...