Canvas grid pattern constructor v1.1 released

Hello, I just released a grid pattern constructor on Envato Codecanyon. This Grid-pattern is ideal for wireframe templates, blueprint designs or as a simple background.

The grid contains a build-in mechanism for responsive re-draw, and can be easily customized to include other grid-patterns, right now it can produce: blocks, diamonds, hexagons, circles and diagonal lines

The script is pure javascript and has no dependencies of other javascript libraries. However it can be easily extended to become a JQuery or other library plugin.


You can find it here: Canvas Multi-Grid

Examples Preview


Create grid patterns with canvas (blocks, diamonds, hex)

While making some experiments with a game, I felt the need to add a grid to the background, after much thinking I decided that canvas should be the “best” solutions for this.

However after creating a simple “square” grid I wanted also hexagons and diamond grids. And this is what I’m presenting here, how to create “blocks, diamonds and hexagon” grids with one convenient javascript class.

See the Pen Create grids by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Flex 4, Grid Gallery effect

Here’s an after midnight project I undertook.

So I’ve always wanted that grid gallery layout and effect for my images or slides. So I decided to make it happen. A useful tool in this was TweenMax from the greensock library (I love their tween effects, easy and to the point).

So here’s the simple code for this grid effect:

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”″
xmlns:mx=”library://” minWidth=”955″ width=”600″ height=”400″ backgroundColor=”#171717″ minHeight=”600″>
<!– Place non-visual elements (e.g., services, value objects) here –>

import mx.collections.ArrayCollection;
import com.greensock.*;
import com.greensock.easing.*;
//var imgArr = new Array(“assets/img1.jpg”,”assets/img2.jpg”,”assets/img3.jpg”,”assets/img4.jpg”);

private function moveGrid(slideNum)
case 1:, 1, {x:0,y:0, ease:Quint.easeOut});

case 2:, 1, {x:-400,y:0, ease:Quint.easeOut});
case 3:, 1, {x:0,y:-200, ease:Quint.easeOut});
case 4:, 1, {x:-400,y:-200, ease:Quint.easeOut});
//        rollOver_(slideNum);

<s:Group width=”400″ height=”200″ horizontalCenter=”0″ verticalCenter=”0″>
<s:BasicLayout clipAndEnableScrolling=”true”/>
<s:TileGroup id=”grid” x=”0″ y=”0″>
<s:Rect width=”400″ height=”200″>
<s:SolidColor color=”0xd54f4f”/>
<s:Rect width=”400″ height=”200″>
<s:SolidColor color=”0x2f977d”/>
<s:Rect width=”400″ height=”200″>
<s:SolidColor color=”0xfffca2″/>
<s:Rect width=”400″ height=”200″>
<s:SolidColor color=”0x12f0af”/>

<s:HGroup top=”20″ horizontalCenter=”0″>

<s:Button label=”1″ click=”moveGrid(1)”/>
<s:Button label=”2″ click=”moveGrid(2)”/>
<s:Button label=”3″ click=”moveGrid(3)”/>
<s:Button label=”4″ click=”moveGrid(4)”/>