JSFiddle - React, Tailwind, and code Playground
by Symphony
HTML
move on me
<div id="triangles"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
;(function($){
var integerDivision = function (a, b) {
return (a - a % b) / b;
}
var Triangles = {
CELL_WIDTH: 51,
CELL_HEIGHT: 51,
triangles: {},
lastTriangle: '',
previousCoords: null,
busy: false,
colors: [
'#BE1E2D',
'#ED1C24',
'#F15A29',
'#F7941E',
'#FBB040',
'#FFF200',
'#D7DF23',
'#8DC63F',
'#00A651',
'#006838',
'#00A79D',
'#27AAE1',
'#1C75BC',
'#2B3990',
'#262262',
'#662D91',
'#92278F',
'#9E1F63',
'#DA1C5C',
'#EE2A7B',
'#c63a3a',
'#c6623a',
'#c6903a',
'#c6be3a',
'#a0c63a',
'#6fc63a',
'#41c63a',
'#3ac665',
'#3ac690',
'#3ac693',
'#3ac6c1',
'#3a9dc6',
'#3a6fc6',
'#3a41c6',
'#653ac6',
'#903ac6',
'#c43ac6',
'#c63a9d',
'#c63a6f'
],
currentColor: 0,
init: function () {
var self = this;
this.container = $('#triangles');
if (this.container.size ()) {
this.halfCellWidth = integerDivision (this.CELL_WIDTH, 2);
this.halfCellHeight = integerDivision (this.CELL_HEIGHT, 2);
this.paper = Raphael (this.container.get (0));
$(window).resize (function () {
self.paper.setSize (self.container.width (), self.container.height ());
}).trigger ('resize');
var mousemove = function (e) {
var pos = self.container.offset ();
self.mousemove ({
x: e.pageX - pos.left,
y: e.pageY - pos.top
});
}
//this.container.mousemove (mousemove);
this.container.parent ().find ('*').mousemove (mousemove);
//this.container.mouseout (function () {
// console.log ('a');
//})
}
},
mousemove: function...
JavaScript
/* Colors and Triangles (SVG) */