EffectHub.com: your best source for gaming

Recommendation

More Effects...

var Element = function( type, mat, color, filters )
{

//create node
    var el = document.createElement( "div" );
    el.className = type;

//transform
	var matString = "matrix("+ mat.a + "," + mat.b + "," + mat.c + "," + mat.d + "," + mat.tx + "," + mat.ty + ")";

el.style.position = "absolute";
	el.style.transform =
	el.style[ "-webkit-transform" ] =
	el.style[ "-moz-transform" ] =
	el.style[ "-ms-transform" ] =
	el.style[ "-o-transform" ] = matString;

//color

if( color != null )
	{
		if( type.lastIndexOf( "tri" ) == -1 )
		{
			el.style.background = color;
		}
		else
		{
			el.style.borderColor = color;
		}
	}

//apply filters

if( filters != null )
	{
		filters.forEach( function( filter )
		{

if( filter.lastIndexOf( "blur" ) != -1 )
			{
				filter = "blur( "+ filter.replace( "blur", "" ) +"px )";

el.style.filter = filter;
		        el.style[ "-webkit-filter" ] = filter;
		        el.style[ "-moz-filter" ] = filter;
		        el.style[ "-o-filter" ] = filter;
		        el.style[ "-ms-filter" ] = filter;
			}

if( filter.lastIndexOf( "glow" ) != -1 )
			{
				filter = filter.replace( "glow", "" );

el.style[ "box-shadow" ] = filter;
		        el.style[ "-webkit-box-shadow" ] = filter;
		        el.style[ "-moz-box-shadow" ] = filter;
		        el.style[ "-ms-box-shadow" ] = filter;
		        el.style[ "-o-box-shadow" ] = filter;
			}

});
	}

return el;

};

function batchAppend( list, apply )
{

var domElement = document.getElementById( "limbo" );
    if( apply )
    {
      list.forEach( function(el ){ domElement.appendChild( el ); } );
      return;
    }

domElement.appendChild( list.shift() );

if( list.length > 0 )
    {
        setTimeout( batchAppend, 1000 / 60, list, false );
    }

}

var elements =
[
	new Element( 'disc', {a:3.4811859130859375, b:0, c:0, d:0.46875, tx:-55.1, ty:117.85},"rgba(0,0,0,0.6484375)",['blur 10'] ),
new Element( 'rr_12', {a:1.66534423828125, b:-1.3507080078125, c:1.643310546875, d:2.0009765625, tx:-11.6, ty:-79.3},null,null ),
new Element( 'rr_12', {a:1.990020751953125, b:-0.807769775390625, c:0.98272705078125, d:2.3909912109375, tx:-2.8, ty:-97.6},null,null ),
new Element( 'block', {a:0.125518798828125, b:-0.04736328125, c:0.25091552734375, d:0.65673828125, tx:34.4, ty:88.7},null,null ),
new Element( 'tri_tl', {a:0.879119873046875, b:-0.033416748046875, c:0.019195556640625, d:0.498992919921875, tx:41.7, ty:104.2},null,null ),
new Element( 'rr_8', {a:1.34930419921875, b:0.152374267578125, c:-0.1129150390625, d:0.987518310546875, tx:-8.8, ty:49.6},null,null ),
new Element( 'rr_6', {a:0.867340087890625, b:-0.522552490234375, c:0.068328857421875, d:0.111968994140625, tx:42.1, ty:119.4},null,null ),
new Element( 'rr_8', {a:0.340545654296875, b:-0.482269287109375, c:0.818634033203125, d:0.570892333984375, tx:8.1, ty:75.6},null,null ),
new Element( 'rr_8', {a:0.454559326171875, b:-0.378265380859375, c:0.64208984375, d:0.761962890625, tx:10, ty:68.9},null,null ),
new Element( 'block', {a:-0.07012939453125, b:0.113800048828125, c:-0.649871826171875, d:-0.3955078125, tx:-11.6, ty:86.1},null,null ),
new Element( 'rr_6', {a:-0.83135986328125, b:0.6622314453125, c:-0.096893310546875, d:-0.12017822265625, tx:-36.2, ty:67.8},null,null ),
new Element( 'rr_6', {a:0.59100341796875, b:-0.447509765625, c:0.245819091796875, d:0.320648193359375, tx:-57.4, ty:79},null,null ),
new Element( 'tri_br', {a:0.453338623046875, b:0, c:0, d:0.465057373046875, tx:-63.5, ty:73.5},null,null ),
new Element( 'rr_8', {a:0.738067626953125, b:-0.670684814453125, c:0.4344482421875, d:0.472137451171875, tx:-17.4, ty:87.2},null,null ),
new Element( 'rr_8', {a:0.669158935546875, b:0.0755615234375, c:-0.1129150390625, d:0.987518310546875, tx:-9.6, ty:56.6},null,null ),
new Element( 'rr_8', {a:1.386566162109375, b:-0.107391357421875, c:0.07769775390625, d:0.99090576171875, tx:-12.1, ty:42.1},null,null ),
new Element( 'rr_8', {a:1.329345703125, b:0.63134765625, c:-0.431182861328125, d:0.896728515625, tx:-0.5, ty:23.1},null,null ),
new Element( 'rr_8', {a:1.225677490234375, b:0.582122802734375, c:-0.78656005859375, d:1.6357421875, tx:18.2, ty:-15.8},null,null ),
new Element( 'tri_br', {a:0.615692138671875, b:0, c:0, d:0.604095458984375, tx:3.1, ty:-114.1},null,null ),
new Element( 'tri_br', {a:0.5947265625, b:0.158355712890625, c:-0.1573486328125, d:0.583526611328125, tx:29.8, ty:-127.1},null,null ),
new Element( 'tri_br', {a:-0.13177490234375, b:-0.634796142578125, c:0.80743408203125, d:-0.165496826171875, tx:49.3, ty:-95.5},null,null ),
new Element( 'rr_6', {a:1.329376220703125, b:0.155914306640625, c:-0.16009521484375, d:1.34765625, tx:13.6, ty:-25.8},null,null ),
new Element( 'tri_iso', {a:-1.1351318359375, b:-0.533203125, c:0.509246826171875, d:-1.0706787109375, tx:55.4, ty:-2.5},null,null ),
new Element( 'rr_6', {a:1.3118896484375, b:-0.5264892578125, c:0.200714111328125, d:0.493865966796875, tx:-6.9, ty:-15.2},null,null ),
new Element( 'rr_6', {a:0.390289306640625, b:-0.704833984375, c:0.457305908203125, d:0.272735595703125, tx:-17.1, ty:6.6},null,null ),
new Element( 'disc', {a:0.408843994140625, b:-0.40631103515625, c:0.236846923828125, d:0.23541259765625, tx:-32.3, ty:39},null,null ),
new Element( 'tri_iso', {a:0.489959716796875, b:0.17431640625, c:-0.37103271484375, d:1.02984619140625, tx:-14.8, ty:4.1},null,null ),
new Element( 'tri_iso', {a:0.47283935546875, b:0.216033935546875, c:-0.459808349609375, d:0.993804931640625, tx:-15.5, ty:3.7},null,null ),
new Element( 'rr_6', {a:-0.67657470703125, b:-0.441741943359375, c:0.30926513671875, d:-0.431793212890625, tx:58.1, ty:37.4},null,null ),
new Element( 'tri_iso', {a:0.213104248046875, b:-0.47186279296875, c:1.004180908203125, d:0.44793701171875, tx:56, ty:35},null,null ),
new Element( 'rr_4', {a:0.1627197265625, b:-0.3184814453125, c:0.569549560546875, d:0.287384033203125, tx:54.4, ty:34.8},null,null ),
new Element( 'rr_8', {a:0.89617919921875, b:0.165802001953125, c:-0.224456787109375, d:1.198486328125, tx:17.3, ty:9.7},null,null ),
new Element( 'disc', {a:0.24639892578125, b:-0.06561279296875, c:0.095367431640625, d:0.353759765625, tx:47.4, ty:-69},"rgba(255,255,255,1)",['blur 20'] ),
new Element( 'disc', {a:0.3079833984375, b:0, c:0, d:0.442108154296875, tx:70.3, ty:-76.6},"rgba(255,255,255,0.6484375)",['blur 14'] ),
new Element( 'disc', {a:0.187530517578125, b:0, c:0, d:0.186370849609375, tx:-74, ty:93.4},null,['blur 20'] ),
new Element( 'disc', {a:0.12542724609375, b:0, c:0, d:0.1246337890625, tx:-82.6, ty:106},null,['blur 5'] ),
new Element( 'disc', {a:0.16876220703125, b:0, c:0, d:0.167724609375, tx:-92.8, ty:108.8},null,['blur 8'] ),
new Element( 'disc', {a:0.187530517578125, b:0, c:0, d:0.186370849609375, tx:-74, ty:93.4},"rgba(0,0,0,0.5)",null ),
new Element( 'disc', {a:0.077911376953125, b:0, c:0, d:0.077423095703125, tx:-81.7, ty:106.8},null,null ),
new Element( 'disc', {a:0.115509033203125, b:0, c:0, d:0.114776611328125, tx:-92, ty:109.7},"rgba(0,0,0,0.75)",null ),
new Element( 'disc', {a:0.1805419921875, b:-0.04803466796875, c:0.069854736328125, d:0.259185791015625, tx:48.8, ty:-67.6},"rgba(255,255,255,1)",null ),
new Element( 'disc', {a:0.186981201171875, b:0, c:0, d:0.268310546875, tx:72.1, ty:-73.8},"rgba(255,255,255,1)",null ),
new Element( 'disc_half', {a:1.0001220703125, b:0, c:0, d:0.897674560546875, tx:59.1, ty:-114.1},null,null ),
new Element( 'rr_4', {a:0.593841552734375, b:0, c:0, d:0.512451171875, tx:67.7, ty:-108.1},null,null ),
new Element( 'disc_half', {a:1.2906494140625, b:-0.740478515625, c:0.710235595703125, d:1.22259521484375, tx:-8.5, ty:-91.7},null,null ),
new Element( 'rr_4', {a:0.514251708984375, b:-0.2950439453125, c:0.093475341796875, d:0.160888671875, tx:66.2, ty:-89.9},null,null ),
new Element( 'tri_br', {a:0.5947265625, b:0.158355712890625, c:-0.1573486328125, d:0.583526611328125, tx:55.5, ty:-128},null,null ),
new Element( 'tri_bl', {a:0.632843017578125, b:0, c:0, d:0.3031005859375, tx:71.5, ty:33.5},null,null ),
new Element( 'rr_4', {a:0.1170654296875, b:-0.1322021484375, c:0.303863525390625, d:0.265777587890625, tx:84.3, ty:42.7},null,null ),
new Element( 'disc', {a:-0.340545654296875, b:-0.25091552734375, c:0.139862060546875, d:-0.1875, tx:95.1, ty:50.1},null,null )
];

batchAppend( elements, true );

CSS

body {
    width : 100%;
    height : 100%;
    overflow: hidden;
    margin:   0;
    background-color: #333333;
}
.list
{
    padding:            20px;
}

#limbo
{
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width:1px;
    height:1px;
}

.base, .block, .disc, .disc_half, .disc_quarter, .tri_iso, .tri_tl, .tri_tr, .tri_br, .tri_bl, .rr_2, .rr_4, .rr_6, .rr_8, .rr_10, .rr_12, .rr_14
{
    -webkit-transform-origin:   0 0;
    position:           relative;
    width:              32px;
    height:             32px;
    background-color:   #000000;

}

.tri_iso, .tri_tl, .tri_tr, .tri_br, .tri_bl
{
    width :             0;
    height:             0;
    background-color:   transparent;
}

.disc
{
    border-radius:          16px;
    -moz-border-radius:     16px;
    -webkit-border-radius:  16px;
}

.disc_half
{
    height:                 16px;
    border-radius:          16px 16px 0 0;
    -moz-border-radius:     16px 16px 0 0;
    -webkit-border-radius:  16px 16px 0 0;
}

.disc_quarter
{
    width:                  16px;
    height:                 16px;
    border-radius:          16px 0px 0 0;
    -moz-border-radius:     16px 0px 0 0;
    -webkit-border-radius:  16px 0px 0 0;
}

.tri_iso
{
    border-left:        16px solid transparent;
    border-right:       16px solid transparent;
    border-top:         32px solid;
}

.tri_tl
{
    border-right:   16px solid transparent;
    border-top:     16px solid;
    border-left:    16px solid;
    border-bottom:  16px solid transparent;
}
.tri_tr
{
    border-right:   16px solid;
    border-top:     16px solid;
    border-left:    16px solid transparent;
    border-bottom:  16px solid transparent;
}
.tri_br
{
    border-right:   16px solid;
    border-top:     16px solid transparent;
    border-left:    16px solid transparent;
    border-bottom:  16px solid;
}
.tri_bl
{
    border-right:   16px solid transparent;
    border-top:     16px solid transparent;
    border-left:    16px solid;
    border-bottom:  16px solid;
}
.rr_2
{
    border-radius:          2px;
    -moz-border-radius:     2px;
    -webkit-border-radius:  2px;
}
.rr_4
{
    border-radius:          4px;
    -moz-border-radius:     4px;
    -webkit-border-radius:  4px;
}
.rr_6
{
    border-radius:          6px;
    -moz-border-radius:     6px;
    -webkit-border-radius:  6px;
}
.rr_8
{
    border-radius:          8px;
    -moz-border-radius:     8px;
    -webkit-border-radius:  8px;
}
.rr_10
{
    border-radius:          10px;
    -moz-border-radius:     10px;
    -webkit-border-radius:  10px;
}
.rr_12
{
    border-radius:          12px;
    -moz-border-radius:     12px;
    -webkit-border-radius:  12px;
}
.rr_14
{
    border-radius:          14px;
    -moz-border-radius:     14px;
    -webkit-border-radius:  14px;
}

HTML

Recommendation

Join Effecthub.com