Recommendation
More Effects...
JS
1
var Element = function( type, mat, color, filters )
2
{
3
 
4
    //create node
5
    var el = document.createElement( "div" );
6
    el.className = type;
7
 
8
    //transform
9
    var matString = "matrix("+ mat.a + "," + mat.b + "," + mat.c + "," + mat.d + "," + mat.tx + "," + mat.ty + ")";
10
 
11
    el.style.position = "absolute";
12
    el.style.transform =
13
    el.style[ "-webkit-transform" ] =
14
    el.style[ "-moz-transform" ] =
15
    el.style[ "-ms-transform" ] =
16
    el.style[ "-o-transform" ] = matString;
17
 
18
    //color
19
 
20
    if( color != null )
21
    {
22
        if( type.lastIndexOf( "tri" ) == -1 )
23
        {
24
            el.style.background = color;
25
        }
26
        else
27
        {
28
            el.style.borderColor = color;
29
        }
30
    }
31
 
32
    //apply filters
33
 
34
    if( filters != null )
35
    {
36
        filters.forEach( function( filter )
37
        {
38
 
39
            if( filter.lastIndexOf( "blur" ) != -1 )
40
            {
41
                filter = "blur( "+ filter.replace( "blur", "" ) +"px )";
42
 
43
                el.style.filter = filter;
44
                el.style[ "-webkit-filter" ] = filter;
45
                el.style[ "-moz-filter" ] = filter;
46
                el.style[ "-o-filter" ] = filter;
47
                el.style[ "-ms-filter" ] = filter;
48
            }
49
 
50
            if( filter.lastIndexOf( "glow" ) != -1 )
51
            {
52
                filter = filter.replace( "glow", "" );
53
 
54
                el.style[ "box-shadow" ] = filter;
55
                el.style[ "-webkit-box-shadow" ] = filter;
56
                el.style[ "-moz-box-shadow" ] = filter;
57
                el.style[ "-ms-box-shadow" ] = filter;
58
                el.style[ "-o-box-shadow" ] = filter;
59
            }
60
 
61
        });
62
    }
63
 
64
    return el;
65
 
66
};
67
 
68
function batchAppend( list, apply )
69
{
70
 
71
    var domElement = document.getElementById( "limbo" );
72
    if( apply )
73
    {
74
      list.forEach( function(el ){ domElement.appendChild( el ); } );
75
      return;
76
    }
77
 
78
    domElement.appendChild( list.shift() );
79
 
80
    if( list.length > 0 )
81
    {
82
        setTimeout( batchAppend, 1000 / 60, list, false );
83
    }
84
 
85
}
86
 
87
var elements =
88
[
89
    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'] ),
90
new Element( 'rr_12', {a:1.66534423828125, b:-1.3507080078125, c:1.643310546875, d:2.0009765625, tx:-11.6, ty:-79.3},null,null ),
91
new Element( 'rr_12', {a:1.990020751953125, b:-0.807769775390625, c:0.98272705078125, d:2.3909912109375, tx:-2.8, ty:-97.6},null,null ),
92
new Element( 'block', {a:0.125518798828125, b:-0.04736328125, c:0.25091552734375, d:0.65673828125, tx:34.4, ty:88.7},null,null ),
93
new Element( 'tri_tl', {a:0.879119873046875, b:-0.033416748046875, c:0.019195556640625, d:0.498992919921875, tx:41.7, ty:104.2},null,null ),
94
new Element( 'rr_8', {a:1.34930419921875, b:0.152374267578125, c:-0.1129150390625, d:0.987518310546875, tx:-8.8, ty:49.6},null,null ),
95
new Element( 'rr_6', {a:0.867340087890625, b:-0.522552490234375, c:0.068328857421875, d:0.111968994140625, tx:42.1, ty:119.4},null,null ),
96
new Element( 'rr_8', {a:0.340545654296875, b:-0.482269287109375, c:0.818634033203125, d:0.570892333984375, tx:8.1, ty:75.6},null,null ),
97
new Element( 'rr_8', {a:0.454559326171875, b:-0.378265380859375, c:0.64208984375, d:0.761962890625, tx:10, ty:68.9},null,null ),
98
new Element( 'block', {a:-0.07012939453125, b:0.113800048828125, c:-0.649871826171875, d:-0.3955078125, tx:-11.6, ty:86.1},null,null ),
99
new Element( 'rr_6', {a:-0.83135986328125, b:0.6622314453125, c:-0.096893310546875, d:-0.12017822265625, tx:-36.2, ty:67.8},null,null ),
100
new Element( 'rr_6', {a:0.59100341796875, b:-0.447509765625, c:0.245819091796875, d:0.320648193359375, tx:-57.4, ty:79},null,null ),
101
new Element( 'tri_br', {a:0.453338623046875, b:0, c:0, d:0.465057373046875, tx:-63.5, ty:73.5},null,null ),
102
new Element( 'rr_8', {a:0.738067626953125, b:-0.670684814453125, c:0.4344482421875, d:0.472137451171875, tx:-17.4, ty:87.2},null,null ),
103
new Element( 'rr_8', {a:0.669158935546875, b:0.0755615234375, c:-0.1129150390625, d:0.987518310546875, tx:-9.6, ty:56.6},null,null ),
104
new Element( 'rr_8', {a:1.386566162109375, b:-0.107391357421875, c:0.07769775390625, d:0.99090576171875, tx:-12.1, ty:42.1},null,null ),
105
new Element( 'rr_8', {a:1.329345703125, b:0.63134765625, c:-0.431182861328125, d:0.896728515625, tx:-0.5, ty:23.1},null,null ),
106
new Element( 'rr_8', {a:1.225677490234375, b:0.582122802734375, c:-0.78656005859375, d:1.6357421875, tx:18.2, ty:-15.8},null,null ),
107
new Element( 'tri_br', {a:0.615692138671875, b:0, c:0, d:0.604095458984375, tx:3.1, ty:-114.1},null,null ),
108
new Element( 'tri_br', {a:0.5947265625, b:0.158355712890625, c:-0.1573486328125, d:0.583526611328125, tx:29.8, ty:-127.1},null,null ),
109
new Element( 'tri_br', {a:-0.13177490234375, b:-0.634796142578125, c:0.80743408203125, d:-0.165496826171875, tx:49.3, ty:-95.5},null,null ),
110
new Element( 'rr_6', {a:1.329376220703125, b:0.155914306640625, c:-0.16009521484375, d:1.34765625, tx:13.6, ty:-25.8},null,null ),
111
new Element( 'tri_iso', {a:-1.1351318359375, b:-0.533203125, c:0.509246826171875, d:-1.0706787109375, tx:55.4, ty:-2.5},null,null ),
112
new Element( 'rr_6', {a:1.3118896484375, b:-0.5264892578125, c:0.200714111328125, d:0.493865966796875, tx:-6.9, ty:-15.2},null,null ),
113
new Element( 'rr_6', {a:0.390289306640625, b:-0.704833984375, c:0.457305908203125, d:0.272735595703125, tx:-17.1, ty:6.6},null,null ),
114
new Element( 'disc', {a:0.408843994140625, b:-0.40631103515625, c:0.236846923828125, d:0.23541259765625, tx:-32.3, ty:39},null,null ),
115
new Element( 'tri_iso', {a:0.489959716796875, b:0.17431640625, c:-0.37103271484375, d:1.02984619140625, tx:-14.8, ty:4.1},null,null ),
116
new Element( 'tri_iso', {a:0.47283935546875, b:0.216033935546875, c:-0.459808349609375, d:0.993804931640625, tx:-15.5, ty:3.7},null,null ),
117
new Element( 'rr_6', {a:-0.67657470703125, b:-0.441741943359375, c:0.30926513671875, d:-0.431793212890625, tx:58.1, ty:37.4},null,null ),
118
new Element( 'tri_iso', {a:0.213104248046875, b:-0.47186279296875, c:1.004180908203125, d:0.44793701171875, tx:56, ty:35},null,null ),
119
new Element( 'rr_4', {a:0.1627197265625, b:-0.3184814453125, c:0.569549560546875, d:0.287384033203125, tx:54.4, ty:34.8},null,null ),
120
new Element( 'rr_8', {a:0.89617919921875, b:0.165802001953125, c:-0.224456787109375, d:1.198486328125, tx:17.3, ty:9.7},null,null ),
121
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'] ),
122
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'] ),
123
new Element( 'disc', {a:0.187530517578125, b:0, c:0, d:0.186370849609375, tx:-74, ty:93.4},null,['blur 20'] ),
124
new Element( 'disc', {a:0.12542724609375, b:0, c:0, d:0.1246337890625, tx:-82.6, ty:106},null,['blur 5'] ),
125
new Element( 'disc', {a:0.16876220703125, b:0, c:0, d:0.167724609375, tx:-92.8, ty:108.8},null,['blur 8'] ),
126
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 ),
127
new Element( 'disc', {a:0.077911376953125, b:0, c:0, d:0.077423095703125, tx:-81.7, ty:106.8},null,null ),
128
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 ),
129
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 ),
130
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 ),
131
new Element( 'disc_half', {a:1.0001220703125, b:0, c:0, d:0.897674560546875, tx:59.1, ty:-114.1},null,null ),
132
new Element( 'rr_4', {a:0.593841552734375, b:0, c:0, d:0.512451171875, tx:67.7, ty:-108.1},null,null ),
133
new Element( 'disc_half', {a:1.2906494140625, b:-0.740478515625, c:0.710235595703125, d:1.22259521484375, tx:-8.5, ty:-91.7},null,null ),
134
new Element( 'rr_4', {a:0.514251708984375, b:-0.2950439453125, c:0.093475341796875, d:0.160888671875, tx:66.2, ty:-89.9},null,null ),
135
new Element( 'tri_br', {a:0.5947265625, b:0.158355712890625, c:-0.1573486328125, d:0.583526611328125, tx:55.5, ty:-128},null,null ),
136
new Element( 'tri_bl', {a:0.632843017578125, b:0, c:0, d:0.3031005859375, tx:71.5, ty:33.5},null,null ),
137
new Element( 'rr_4', {a:0.1170654296875, b:-0.1322021484375, c:0.303863525390625, d:0.265777587890625, tx:84.3, ty:42.7},null,null ),
138
new Element( 'disc', {a:-0.340545654296875, b:-0.25091552734375, c:0.139862060546875, d:-0.1875, tx:95.1, ty:50.1},null,null )
139
];
140
 
141
batchAppend( elements, true );
 
CSS
1
body {
2
    width : 100%;
3
    height : 100%;
4
    overflow: hidden;
5
    margin:   0;
6
    background-color: #333333;
7
}
8
.list
9
{
10
    padding:            20px;
11
}
12
 
13
#limbo
14
{
15
    margin: auto;
16
    position: absolute;
17
    top: 0; left: 0; bottom: 0; right: 0;
18
    width:1px;
19
    height:1px;
20
}
21
 
22
.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
23
{
24
    -webkit-transform-origin:   0 0;
25
    position:           relative;
26
    width:              32px;
27
    height:             32px;
28
    background-color:   #000000;
29
 
30
}
31
 
32
.tri_iso, .tri_tl, .tri_tr, .tri_br, .tri_bl
33
{
34
    width :             0;
35
    height:             0;
36
    background-color:   transparent;
37
}
38
 
39
.disc
40
{
41
    border-radius:          16px;
42
    -moz-border-radius:     16px;
43
    -webkit-border-radius:  16px;
44
}
45
 
46
.disc_half
47
{
48
    height:                 16px;
49
    border-radius:          16px 16px 0 0;
50
    -moz-border-radius:     16px 16px 0 0;
51
    -webkit-border-radius:  16px 16px 0 0;
52
}
53
 
54
.disc_quarter
55
{
56
    width:                  16px;
57
    height:                 16px;
58
    border-radius:          16px 0px 0 0;
59
    -moz-border-radius:     16px 0px 0 0;
60
    -webkit-border-radius:  16px 0px 0 0;
61
}
62
 
63
.tri_iso
64
{
65
    border-left:        16px solid transparent;
66
    border-right:       16px solid transparent;
67
    border-top:         32px solid;
68
}
69
 
70
.tri_tl
71
{
72
    border-right:   16px solid transparent;
73
    border-top:     16px solid;
74
    border-left:    16px solid;
75
    border-bottom:  16px solid transparent;
76
}
77
.tri_tr
78
{
79
    border-right:   16px solid;
80
    border-top:     16px solid;
81
    border-left:    16px solid transparent;
82
    border-bottom:  16px solid transparent;
83
}
84
.tri_br
85
{
86
    border-right:   16px solid;
87
    border-top:     16px solid transparent;
88
    border-left:    16px solid transparent;
89
    border-bottom:  16px solid;
90
}
91
.tri_bl
92
{
93
    border-right:   16px solid transparent;
94
    border-top:     16px solid transparent;
95
    border-left:    16px solid;
96
    border-bottom:  16px solid;
97
}
98
.rr_2
99
{
100
    border-radius:          2px;
101
    -moz-border-radius:     2px;
102
    -webkit-border-radius:  2px;
103
}
104
.rr_4
105
{
106
    border-radius:          4px;
107
    -moz-border-radius:     4px;
108
    -webkit-border-radius:  4px;
109
}
110
.rr_6
111
{
112
    border-radius:          6px;
113
    -moz-border-radius:     6px;
114
    -webkit-border-radius:  6px;
115
}
116
.rr_8
117
{
118
    border-radius:          8px;
119
    -moz-border-radius:     8px;
120
    -webkit-border-radius:  8px;
121
}
122
.rr_10
123
{
124
    border-radius:          10px;
125
    -moz-border-radius:     10px;
126
    -webkit-border-radius:  10px;
127
}
128
.rr_12
129
{
130
    border-radius:          12px;
131
    -moz-border-radius:     12px;
132
    -webkit-border-radius:  12px;
133
}
134
.rr_14
135
{
136
    border-radius:          14px;
137
    -moz-border-radius:     14px;
138
    -webkit-border-radius:  14px;
139
}
 
HTML
1
<div id="limbo"></div>
2
 
3
<!-- debug shapes /-->
4
<!--
5
<div class="list">
6
 
7
    <div class="block"></div>
8
    <br>
9
    <div class="rr_2"></div>
10
    <br>
11
    <div class="rr_4"></div>
12
    <br>
13
    <div class="rr_6"></div>
14
    <br>
15
    <div class="rr_8"></div>
16
    <br>
17
    <div class="rr_10"></div>
18
    <br>
19
    <div class="rr_12"></div>
20
    <br>
21
    <div class="rr_14"></div>
22
    <br>
23
    <div class="disc"></div>
24
    <br>
25
    <div class="disc_half"></div>
26
    <br>
27
    <div class="disc_quarter"></div>
28
    <br>
29
    <div class="tri_iso"></div>
30
    <br>
31
    <div class="tri_tl"></div>
32
    <br>
33
    <div class="tri_tr"></div>
34
    <br>
35
    <div class="tri_br"></div>
36
    <br>
37
    <div class="tri_bl"></div>
38
 
39
 </div>
40
/-->
 

Join Effecthub.com

Working with Global Gaming Artists and Developers!


Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character