Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="canvas">anything</div>

<!-- You can only type letters A through Z and space or it will break, sorry! -->

<!-- Character builder if you want to swap letter vars
https://codepen.io/nickcil/pen/GWQQdP -->

<!-- Play with these values...
JAVASCRIPT: max and min vars change the random size of the points
CSS: .grid margin & scale, .point stuff, .obj stuff, .obj.empty stuff -->
            
          
!
            
              * {
	box-sizing: border-box;
}

body {
	background: black;
	max-width: 800px;
	margin: 80px auto;
}

.canvas {
	display: flex;
	flex-wrap: wrap;
}

.grid {
//	width: 188px;
	width: 100px;
	padding: 2px;
//	background: #eee;
	display: flex;
	align-content: space-around;
	flex-wrap: wrap;
	margin: 18px;
	transform: scale(1);
}

.point {
	width: 1px;
	height: 1px;
//	background: #000;
	position: relative;
//	margin: 11px;
	margin: 5.5px;
}

.obj {
	position: absolute;
	background: #333;
//	border-radius: 100%;
	transform: translate(-50%, -50%);
	opacity: .3;
	
	&.empty {
		background-color: #333;
		width: 2px;
		height: 2px;
		display: none;
	}
}

@for $i from 1 through 40 {
 .grid:nth-child( #{$i} ) {
	 .obj { background-color: hsl($i*20 + 300, $i*20, 60);
		 transform: scale(1 + $i/12);
	 }
  }
}

// literally dont animate this unless you want to blow up your browser
@keyframes a {
	0% { transform: scale(1) }
	50% { transform: scale(1.2) }
	100% { transform: scale(1) }
}
            
          
!
            
              var grid = $('.grid'),
		grid2 = $('.grid2'),
		obj = $('.obj'),
		canvas = $('.canvas'),
		numberOfObjs = obj.length,
		max = 20,
		min = 20,
		objsPerRow = 8; // number of columns
//		objsPerCol = 12; // number of rows

// The top left point is (1, 1) and the bottom right is (8, 12);

// obj.click(function(){
// //	console.log($(this).parent().index());
// 	var objNumber = $(this).parent().index() + 1;
// 	var rowNumber = Math.ceil( objNumber / objsPerRow );
// 	var colNumber = Math.ceil((objNumber - .1) % objsPerRow);
// 	console.log('(' + colNumber + ', ' + rowNumber + ')');
// });

// Assign coords to points
$('.grid .point').each(function(){
	var objNumber = $(this).index() + 1;
	var rowNumber = Math.ceil( objNumber / objsPerRow );
	var colNumber = Math.ceil((objNumber - .1) % objsPerRow);
	$(this).attr('data-coords', colNumber + ',' + rowNumber);
});

// Assign coords to points
$('.grid2 .point').each(function(){
	var objNumber = $(this).index() + 1;
	var rowNumber = Math.ceil( objNumber / objsPerRow );
	var colNumber = Math.ceil((objNumber - .1) % objsPerRow);
	$(this).attr('data-coords', colNumber + ',' + rowNumber);
	
});

var a = [
{ x: "1", y: "12" }, { x: "2", y: "11" }, { x: "2", y: "12" }, { x: "1", y: "11" }, { x: "2", y: "10" }, { x: "1", y: "10" }, { x: "2", y: "9" }, { x: "2", y: "8" }, { x: "7", y: "12" }, { x: "8", y: "12" }, { x: "8", y: "11" }, { x: "7", y: "11" }, { x: "7", y: "10" }, { x: "8", y: "10" }, { x: "8", y: "9" }, { x: "7", y: "8" }, { x: "7", y: "9" }, { x: "8", y: "8" }, { x: "8", y: "7" }, { x: "7", y: "7" }, { x: "2", y: "7" }, { x: "1", y: "7" }, { x: "1", y: "8" }, { x: "1", y: "9" }, { x: "2", y: "6" }, { x: "3", y: "6" }, { x: "4", y: "6" }, { x: "6", y: "6" }, { x: "5", y: "6" }, { x: "7", y: "6" }, { x: "6", y: "7" }, { x: "3", y: "7" }, { x: "1", y: "5" }, { x: "2", y: "5" }, { x: "5", y: "1" }, { x: "4", y: "1" }, { x: "6", y: "1" }, { x: "6", y: "2" }, { x: "7", y: "2" }, { x: "7", y: "3" }, { x: "8", y: "3" }, { x: "8", y: "4" }, { x: "7", y: "4" }, { x: "3", y: "1" }, { x: "2", y: "2" }, { x: "1", y: "3" }, { x: "1", y: "3" }, { x: "1", y: "4" }, { x: "1", y: "6" }, { x: "7", y: "5" }, { x: "8", y: "5" }, { x: "8", y: "6" }, { x: "2", y: "4" }, { x: "3", y: "2" }, { x: "4", y: "2" }, { x: "5", y: "2" }, { x: "2", y: "3" }, { x: "5", y: "7" }, { x: "4", y: "7" }
];

var b = [{ x: "3", y: "6" }, { x: "4", y: "6" }, { x: "3", y: "7" }, { x: "4", y: "7" }, { x: "5", y: "6" }, { x: "5", y: "7" }, { x: "6", y: "6" }, { x: "6", y: "7" }, { x: "7", y: "7" }, { x: "7", y: "8" }, { x: "8", y: "8" }, { x: "8", y: "9" }, { x: "7", y: "9" }, { x: "7", y: "6" }, { x: "7", y: "5" }, { x: "8", y: "5" }, { x: "8", y: "4" }, { x: "7", y: "4" }, { x: "7", y: "3" }, { x: "8", y: "3" }, { x: "7", y: "2" }, { x: "6", y: "2" }, { x: "6", y: "1" }, { x: "5", y: "2" }, { x: "5", y: "1" }, { x: "4", y: "1" }, { x: "4", y: "2" }, { x: "3", y: "1" }, { x: "3", y: "2" }, { x: "2", y: "2" }, { x: "2", y: "1" }, { x: "1", y: "1" }, { x: "1", y: "2" }, { x: "1", y: "3" }, { x: "2", y: "3" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "1", y: "4" }, { x: "1", y: "5" }, { x: "2", y: "6" }, { x: "1", y: "6" }, { x: "1", y: "7" }, { x: "2", y: "7" }, { x: "7", y: "11" }, { x: "8", y: "10" }, { x: "7", y: "10" }, { x: "6", y: "12" }, { x: "6", y: "11" }, { x: "5", y: "11" }, { x: "5", y: "12" }, { x: "4", y: "12" }, { x: "4", y: "11" }, { x: "3", y: "11" }, { x: "3", y: "12" }, { x: "2", y: "12" }, { x: "2", y: "11" }, { x: "2", y: "10" }, { x: "2", y: "9" }, { x: "2", y: "8" }, { x: "1", y: "8" }, { x: "1", y: "9" }, { x: "1", y: "10" }, { x: "1", y: "11" }, { x: "1", y: "12" }, { x: "6", y: "3" }, { x: "6", y: "10" }];

var c = [{ x: "4", y: "1" }, { x: "5", y: "1" }, { x: "6", y: "1" }, { x: "3", y: "1" }, { x: "3", y: "2" }, { x: "4", y: "2" }, { x: "5", y: "2" }, { x: "6", y: "2" }, { x: "7", y: "2" }, { x: "7", y: "3" }, { x: "7", y: "4" }, { x: "8", y: "4" }, { x: "8", y: "3" }, { x: "2", y: "2" }, { x: "2", y: "3" }, { x: "1", y: "3" }, { x: "1", y: "4" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "1", y: "5" }, { x: "1", y: "6" }, { x: "2", y: "6" }, { x: "2", y: "7" }, { x: "1", y: "7" }, { x: "1", y: "8" }, { x: "4", y: "12" }, { x: "5", y: "12" }, { x: "5", y: "11" }, { x: "4", y: "11" }, { x: "6", y: "11" }, { x: "7", y: "11" }, { x: "7", y: "10" }, { x: "8", y: "10" }, { x: "8", y: "11" }, { x: "6", y: "12" }, { x: "1", y: "9" }, { x: "2", y: "11" }, { x: "1", y: "10" }, { x: "2", y: "9" }, { x: "2", y: "8" }, { x: "2", y: "10" }, { x: "3", y: "11" }, { x: "3", y: "12" }, { x: "7", y: "12" }, { x: "3", y: "10" }, { x: "3", y: "3" }, { x: "6", y: "3" }, { x: "7", y: "9" }, { x: "8", y: "9" }];

var d = [{ x: "1", y: "2" }, { x: "1", y: "1" }, { x: "2", y: "1" }, { x: "2", y: "2" }, { x: "1", y: "3" }, { x: "2", y: "3" }, { x: "1", y: "4" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "1", y: "5" }, { x: "1", y: "6" }, { x: "2", y: "6" }, { x: "2", y: "7" }, { x: "1", y: "7" }, { x: "1", y: "8" }, { x: "2", y: "8" }, { x: "2", y: "9" }, { x: "1", y: "9" }, { x: "1", y: "10" }, { x: "2", y: "10" }, { x: "2", y: "11" }, { x: "2", y: "12" }, { x: "1", y: "12" }, { x: "1", y: "11" }, { x: "3", y: "11" }, { x: "3", y: "12" }, { x: "4", y: "12" }, { x: "4", y: "11" }, { x: "5", y: "11" }, { x: "5", y: "12" }, { x: "8", y: "5" }, { x: "8", y: "6" }, { x: "8", y: "7" }, { x: "8", y: "8" }, { x: "7", y: "6" }, { x: "7", y: "5" }, { x: "6", y: "2" }, { x: "6", y: "3" }, { x: "7", y: "3" }, { x: "7", y: "4" }, { x: "5", y: "1" }, { x: "5", y: "2" }, { x: "4", y: "2" }, { x: "4", y: "1" }, { x: "3", y: "1" }, { x: "3", y: "2" }, { x: "5", y: "3" }, { x: "8", y: "4" }, { x: "6", y: "4" }, { x: "7", y: "7" }, { x: "7", y: "8" }, { x: "7", y: "9" }, { x: "8", y: "9" }, { x: "6", y: "10" }, { x: "7", y: "10" }, { x: "6", y: "11" }, { x: "7", y: "11" }];

var e = [{ x: "1", y: "1" }, { x: "2", y: "1" }, { x: "3", y: "1" }, { x: "4", y: "1" }, { x: "5", y: "1" }, { x: "6", y: "1" }, { x: "7", y: "1" }, { x: "8", y: "1" }, { x: "8", y: "2" }, { x: "7", y: "2" }, { x: "6", y: "2" }, { x: "5", y: "2" }, { x: "4", y: "2" }, { x: "3", y: "2" }, { x: "2", y: "2" }, { x: "1", y: "2" }, { x: "2", y: "3" }, { x: "1", y: "3" }, { x: "2", y: "4" }, { x: "1", y: "4" }, { x: "1", y: "5" }, { x: "2", y: "5" }, { x: "2", y: "6" }, { x: "1", y: "6" }, { x: "2", y: "7" }, { x: "1", y: "7" }, { x: "2", y: "8" }, { x: "1", y: "8" }, { x: "1", y: "9" }, { x: "2", y: "9" }, { x: "2", y: "10" }, { x: "1", y: "10" }, { x: "2", y: "11" }, { x: "1", y: "11" }, { x: "1", y: "12" }, { x: "2", y: "12" }, { x: "3", y: "11" }, { x: "3", y: "12" }, { x: "4", y: "12" }, { x: "4", y: "11" }, { x: "5", y: "11" }, { x: "6", y: "11" }, { x: "7", y: "11" }, { x: "8", y: "11" }, { x: "8", y: "12" }, { x: "7", y: "12" }, { x: "6", y: "12" }, { x: "5", y: "12" }, { x: "3", y: "6" }, { x: "4", y: "6" }, { x: "5", y: "6" }, { x: "6", y: "6" }, { x: "3", y: "7" }, { x: "4", y: "7" }, { x: "5", y: "7" }, { x: "6", y: "7" }];

var f = [{ x: "3", y: "6" }, { x: "4", y: "6" }, { x: "5", y: "6" }, { x: "6", y: "6" }, { x: "6", y: "7" }, { x: "5", y: "7" }, { x: "4", y: "7" }, { x: "3", y: "7" }, { x: "2", y: "6" }, { x: "2", y: "7" }, { x: "1", y: "7" }, { x: "1", y: "6" }, { x: "1", y: "5" }, { x: "1", y: "4" }, { x: "1", y: "3" }, { x: "1", y: "2" }, { x: "1", y: "1" }, { x: "2", y: "2" }, { x: "3", y: "2" }, { x: "4", y: "2" }, { x: "5", y: "2" }, { x: "6", y: "2" }, { x: "7", y: "2" }, { x: "8", y: "2" }, { x: "8", y: "1" }, { x: "7", y: "1" }, { x: "6", y: "1" }, { x: "5", y: "1" }, { x: "4", y: "1" }, { x: "3", y: "1" }, { x: "2", y: "1" }, { x: "2", y: "3" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "1", y: "8" }, { x: "2", y: "8" }, { x: "2", y: "9" }, { x: "1", y: "9" }, { x: "1", y: "10" }, { x: "2", y: "10" }, { x: "2", y: "11" }, { x: "2", y: "12" }, { x: "1", y: "12" }, { x: "1", y: "11" }];

var g = [{ x: "8", y: "3" }, { x: "7", y: "3" }, { x: "7", y: "4" }, { x: "8", y: "4" }, { x: "6", y: "3" }, { x: "6", y: "2" }, { x: "7", y: "2" }, { x: "6", y: "1" }, { x: "5", y: "2" }, { x: "5", y: "1" }, { x: "4", y: "1" }, { x: "4", y: "2" }, { x: "3", y: "2" }, { x: "3", y: "1" }, { x: "2", y: "2" }, { x: "2", y: "3" }, { x: "1", y: "3" }, { x: "3", y: "3" }, { x: "2", y: "4" }, { x: "1", y: "4" }, { x: "1", y: "5" }, { x: "2", y: "5" }, { x: "2", y: "6" }, { x: "1", y: "6" }, { x: "1", y: "7" }, { x: "2", y: "7" }, { x: "2", y: "8" }, { x: "1", y: "8" }, { x: "1", y: "9" }, { x: "2", y: "9" }, { x: "2", y: "10" }, { x: "2", y: "11" }, { x: "3", y: "11" }, { x: "3", y: "10" }, { x: "3", y: "12" }, { x: "4", y: "12" }, { x: "4", y: "11" }, { x: "5", y: "11" }, { x: "5", y: "12" }, { x: "6", y: "12" }, { x: "6", y: "11" }, { x: "7", y: "11" }, { x: "7", y: "10" }, { x: "6", y: "10" }, { x: "7", y: "9" }, { x: "8", y: "10" }, { x: "8", y: "9" }, { x: "8", y: "8" }, { x: "7", y: "8" }, { x: "7", y: "7" }, { x: "6", y: "7" }, { x: "6", y: "8" }, { x: "5", y: "8" }, { x: "5", y: "7" }, { x: "1", y: "10" }];

var h = [{ x: "1", y: "1" }, { x: "2", y: "1" }, { x: "2", y: "2" }, { x: "1", y: "2" }, { x: "1", y: "3" }, { x: "2", y: "3" }, { x: "2", y: "4" }, { x: "1", y: "4" }, { x: "1", y: "5" }, { x: "2", y: "5" }, { x: "2", y: "6" }, { x: "1", y: "6" }, { x: "1", y: "7" }, { x: "2", y: "7" }, { x: "2", y: "8" }, { x: "1", y: "8" }, { x: "1", y: "9" }, { x: "2", y: "9" }, { x: "2", y: "10" }, { x: "1", y: "10" }, { x: "1", y: "11" }, { x: "2", y: "11" }, { x: "2", y: "12" }, { x: "1", y: "12" }, { x: "7", y: "12" }, { x: "7", y: "11" }, { x: "7", y: "10" }, { x: "7", y: "9" }, { x: "7", y: "8" }, { x: "7", y: "7" }, { x: "7", y: "6" }, { x: "7", y: "5" }, { x: "7", y: "4" }, { x: "7", y: "3" }, { x: "7", y: "2" }, { x: "7", y: "1" }, { x: "8", y: "1" }, { x: "8", y: "2" }, { x: "8", y: "3" }, { x: "8", y: "4" }, { x: "8", y: "5" }, { x: "8", y: "6" }, { x: "8", y: "7" }, { x: "8", y: "8" }, { x: "8", y: "9" }, { x: "8", y: "10" }, { x: "8", y: "11" }, { x: "8", y: "12" }, { x: "3", y: "6" }, { x: "4", y: "6" }, { x: "5", y: "6" }, { x: "6", y: "6" }, { x: "6", y: "7" }, { x: "5", y: "7" }, { x: "4", y: "7" }, { x: "3", y: "7" }];

var i = [{ x: "4", y: "1" }, { x: "4", y: "2" }, { x: "5", y: "2" }, { x: "5", y: "3" }, { x: "4", y: "3" }, { x: "4", y: "4" }, { x: "5", y: "4" }, { x: "5", y: "5" }, { x: "4", y: "5" }, { x: "4", y: "6" }, { x: "5", y: "6" }, { x: "5", y: "7" }, { x: "4", y: "7" }, { x: "4", y: "8" }, { x: "5", y: "8" }, { x: "5", y: "9" }, { x: "4", y: "9" }, { x: "4", y: "10" }, { x: "5", y: "10" }, { x: "5", y: "11" }, { x: "4", y: "11" }, { x: "3", y: "11" }, { x: "2", y: "11" }, { x: "1", y: "11" }, { x: "1", y: "12" }, { x: "2", y: "12" }, { x: "3", y: "12" }, { x: "4", y: "12" }, { x: "5", y: "12" }, { x: "6", y: "12" }, { x: "7", y: "12" }, { x: "8", y: "12" }, { x: "8", y: "11" }, { x: "7", y: "11" }, { x: "6", y: "11" }, { x: "6", y: "2" }, { x: "7", y: "2" }, { x: "8", y: "2" }, { x: "8", y: "1" }, { x: "7", y: "1" }, { x: "6", y: "1" }, { x: "5", y: "1" }, { x: "3", y: "1" }, { x: "2", y: "1" }, { x: "1", y: "1" }, { x: "1", y: "2" }, { x: "2", y: "2" }, { x: "3", y: "2" }];

var j = [{ x: "8", y: "1" }, { x: "7", y: "1" }, { x: "6", y: "1" }, { x: "5", y: "1" }, { x: "4", y: "1" }, { x: "3", y: "1" }, { x: "2", y: "1" }, { x: "1", y: "1" }, { x: "1", y: "2" }, { x: "2", y: "2" }, { x: "3", y: "2" }, { x: "4", y: "2" }, { x: "5", y: "2" }, { x: "6", y: "2" }, { x: "7", y: "2" }, { x: "8", y: "2" }, { x: "1", y: "9" }, { x: "1", y: "10" }, { x: "2", y: "10" }, { x: "2", y: "9" }, { x: "3", y: "10" }, { x: "2", y: "11" }, { x: "3", y: "11" }, { x: "3", y: "12" }, { x: "4", y: "12" }, { x: "4", y: "11" }, { x: "5", y: "11" }, { x: "5", y: "12" }, { x: "6", y: "12" }, { x: "6", y: "11" }, { x: "7", y: "11" }, { x: "7", y: "10" }, { x: "6", y: "10" }, { x: "7", y: "9" }, { x: "8", y: "9" }, { x: "8", y: "10" }, { x: "8", y: "8" }, { x: "7", y: "8" }, { x: "7", y: "7" }, { x: "8", y: "7" }, { x: "7", y: "6" }, { x: "8", y: "6" }, { x: "8", y: "5" }, { x: "7", y: "5" }, { x: "7", y: "4" }, { x: "8", y: "4" }, { x: "8", y: "3" }, { x: "7", y: "3" }];

var k = [{ x: "1", y: "1" }, { x: "2", y: "1" }, { x: "2", y: "2" }, { x: "1", y: "2" }, { x: "1", y: "3" }, { x: "2", y: "3" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "2", y: "6" }, { x: "2", y: "7" }, { x: "2", y: "8" }, { x: "2", y: "9" }, { x: "2", y: "10" }, { x: "2", y: "11" }, { x: "2", y: "12" }, { x: "4", y: "6" }, { x: "3", y: "6" }, { x: "3", y: "7" }, { x: "4", y: "7" }, { x: "5", y: "8" }, { x: "5", y: "7" }, { x: "6", y: "8" }, { x: "5", y: "9" }, { x: "6", y: "9" }, { x: "7", y: "10" }, { x: "6", y: "10" }, { x: "7", y: "11" }, { x: "8", y: "11" }, { x: "8", y: "12" }, { x: "7", y: "12" }, { x: "7", y: "9" }, { x: "6", y: "11" }, { x: "5", y: "6" }, { x: "5", y: "5" }, { x: "6", y: "5" }, { x: "7", y: "5" }, { x: "7", y: "4" }, { x: "6", y: "4" }, { x: "7", y: "3" }, { x: "7", y: "2" }, { x: "8", y: "2" }, { x: "8", y: "3" }, { x: "6", y: "3" }, { x: "6", y: "6" }, { x: "6", y: "7" }, { x: "4", y: "8" }, { x: "1", y: "4" }, { x: "1", y: "5" }, { x: "1", y: "6" }, { x: "1", y: "7" }, { x: "1", y: "8" }, { x: "1", y: "9" }, { x: "1", y: "10" }, { x: "1", y: "11" }, { x: "1", y: "12" }, { x: "8", y: "2" }, { x: "8", y: "1" }, { x: "7", y: "1" }];

var l = [{ x: "2", y: "1" }, { x: "2", y: "2" }, { x: "2", y: "3" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "2", y: "6" }, { x: "2", y: "7" }, { x: "2", y: "8" }, { x: "2", y: "9" }, { x: "2", y: "10" }, { x: "2", y: "11" }, { x: "3", y: "11" }, { x: "4", y: "11" }, { x: "5", y: "11" }, { x: "6", y: "11" }, { x: "7", y: "11" }, { x: "8", y: "11" }, { x: "8", y: "12" }, { x: "7", y: "12" }, { x: "6", y: "12" }, { x: "5", y: "12" }, { x: "4", y: "12" }, { x: "3", y: "12" }, { x: "2", y: "12" }, { x: "1", y: "12" }, { x: "1", y: "11" }, { x: "1", y: "10" }, { x: "1", y: "9" }, { x: "1", y: "8" }, { x: "1", y: "7" }, { x: "1", y: "6" }, { x: "1", y: "5" }, { x: "1", y: "4" }, { x: "1", y: "3" }, { x: "1", y: "2" }, { x: "1", y: "1" }];

var m = [{ x: "2", y: "1" }, { x: "1", y: "1" }, { x: "2", y: "2" }, { x: "3", y: "2" }, { x: "3", y: "3" }, { x: "2", y: "3" }, { x: "8", y: "1" }, { x: "7", y: "1" }, { x: "7", y: "2" }, { x: "7", y: "3" }, { x: "6", y: "3" }, { x: "6", y: "2" }, { x: "7", y: "4" }, { x: "8", y: "4" }, { x: "8", y: "3" }, { x: "1", y: "3" }, { x: "2", y: "4" }, { x: "1", y: "4" }, { x: "1", y: "2" }, { x: "8", y: "2" }, { x: "5", y: "4" }, { x: "6", y: "4" }, { x: "4", y: "4" }, { x: "3", y: "4" }, { x: "3", y: "5" }, { x: "4", y: "5" }, { x: "5", y: "5" }, { x: "6", y: "5" }, { x: "5", y: "6" }, { x: "4", y: "6" }, { x: "4", y: "7" }, { x: "5", y: "7" }, { x: "8", y: "6" }, { x: "7", y: "6" }, { x: "7", y: "5" }, { x: "8", y: "5" }, { x: "1", y: "5" }, { x: "2", y: "5" }, { x: "2", y: "6" }, { x: "2", y: "7" }, { x: "1", y: "7" }, { x: "1", y: "6" }, { x: "2", y: "8" }, { x: "1", y: "8" }, { x: "1", y: "9" }, { x: "2", y: "9" }, { x: "2", y: "10" }, { x: "1", y: "10" }, { x: "1", y: "11" }, { x: "1", y: "12" }, { x: "2", y: "12" }, { x: "2", y: "11" }, { x: "7", y: "7" }, { x: "8", y: "7" }, { x: "8", y: "8" }, { x: "7", y: "8" }, { x: "7", y: "9" }, { x: "8", y: "9" }, { x: "8", y: "10" }, { x: "7", y: "10" }, { x: "7", y: "11" }, { x: "8", y: "11" }, { x: "8", y: "12" }, { x: "7", y: "12" }, { x: "5", y: "8" }, { x: "4", y: "8" }, { x: "4", y: "9" }, { x: "5", y: "9" }];

var n = [{ x: "2", y: "1" }, { x: "2", y: "2" }, { x: "3", y: "2" }, { x: "3", y: "3" }, { x: "2", y: "3" }, { x: "3", y: "4" }, { x: "4", y: "4" }, { x: "4", y: "5" }, { x: "4", y: "6" }, { x: "5", y: "6" }, { x: "5", y: "7" }, { x: "5", y: "8" }, { x: "6", y: "8" }, { x: "6", y: "9" }, { x: "6", y: "10" }, { x: "7", y: "10" }, { x: "7", y: "11" }, { x: "7", y: "12" }, { x: "7", y: "8" }, { x: "7", y: "9" }, { x: "7", y: "7" }, { x: "7", y: "6" }, { x: "7", y: "5" }, { x: "7", y: "4" }, { x: "7", y: "3" }, { x: "7", y: "2" }, { x: "7", y: "1" }, { x: "1", y: "1" }, { x: "1", y: "2" }, { x: "1", y: "3" }, { x: "1", y: "4" }, { x: "1", y: "4" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "1", y: "5" }, { x: "1", y: "5" }, { x: "1", y: "6" }, { x: "2", y: "6" }, { x: "2", y: "7" }, { x: "1", y: "7" }, { x: "1", y: "8" }, { x: "2", y: "8" }, { x: "2", y: "9" }, { x: "1", y: "9" }, { x: "1", y: "10" }, { x: "2", y: "10" }, { x: "2", y: "12" }, { x: "1", y: "12" }, { x: "1", y: "11" }, { x: "2", y: "11" }, { x: "4", y: "3" }, { x: "5", y: "5" }, { x: "5", y: "9" }, { x: "8", y: "1" }, { x: "4", y: "7" }, { x: "8", y: "2" }, { x: "8", y: "3" }, { x: "8", y: "4" }, { x: "8", y: "5" }, { x: "8", y: "6" }, { x: "8", y: "7" }, { x: "8", y: "8" }, { x: "8", y: "9" }, { x: "8", y: "10" }, { x: "8", y: "11" }, { x: "8", y: "12" }];

var o = [{ x: "8", y: "4" }, { x: "7", y: "4" }, { x: "8", y: "3" }, { x: "7", y: "3" }, { x: "7", y: "2" }, { x: "6", y: "2" }, { x: "6", y: "2" }, { x: "6", y: "1" }, { x: "5", y: "1" }, { x: "5", y: "2" }, { x: "4", y: "2" }, { x: "4", y: "1" }, { x: "3", y: "1" }, { x: "3", y: "2" }, { x: "2", y: "2" }, { x: "3", y: "3" }, { x: "2", y: "3" }, { x: "1", y: "4" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "1", y: "5" }, { x: "1", y: "6" }, { x: "2", y: "6" }, { x: "2", y: "7" }, { x: "1", y: "7" }, { x: "1", y: "8" }, { x: "2", y: "8" }, { x: "2", y: "9" }, { x: "2", y: "10" }, { x: "1", y: "9" }, { x: "2", y: "11" }, { x: "3", y: "11" }, { x: "3", y: "12" }, { x: "4", y: "12" }, { x: "4", y: "11" }, { x: "5", y: "11" }, { x: "5", y: "12" }, { x: "6", y: "12" }, { x: "6", y: "11" }, { x: "7", y: "11" }, { x: "7", y: "10" }, { x: "8", y: "10" }, { x: "8", y: "9" }, { x: "7", y: "9" }, { x: "6", y: "10" }, { x: "7", y: "8" }, { x: "8", y: "8" }, { x: "7", y: "7" }, { x: "3", y: "10" }, { x: "1", y: "10" }, { x: "8", y: "7" }, { x: "8", y: "6" }, { x: "7", y: "6" }, { x: "8", y: "5" }, { x: "7", y: "5" }, { x: "1", y: "3" }, { x: "6", y: "3" }];

var p = [{ x: "1", y: "1" }, { x: "2", y: "1" }, { x: "2", y: "2" }, { x: "3", y: "2" }, { x: "2", y: "3" }, { x: "2", y: "4" }, { x: "1", y: "4" }, { x: "1", y: "3" }, { x: "1", y: "2" }, { x: "2", y: "5" }, { x: "2", y: "6" }, { x: "3", y: "6" }, { x: "4", y: "6" }, { x: "3", y: "7" }, { x: "4", y: "7" }, { x: "2", y: "7" }, { x: "4", y: "2" }, { x: "5", y: "2" }, { x: "7", y: "2" }, { x: "6", y: "2" }, { x: "6", y: "1" }, { x: "8", y: "3" }, { x: "7", y: "3" }, { x: "7", y: "4" }, { x: "8", y: "4" }, { x: "6", y: "6" }, { x: "7", y: "6" }, { x: "8", y: "5" }, { x: "7", y: "5" }, { x: "6", y: "7" }, { x: "5", y: "7" }, { x: "5", y: "6" }, { x: "5", y: "1" }, { x: "4", y: "1" }, { x: "3", y: "1" }, { x: "1", y: "5" }, { x: "1", y: "6" }, { x: "1", y: "7" }, { x: "1", y: "8" }, { x: "2", y: "8" }, { x: "2", y: "9" }, { x: "1", y: "9" }, { x: "1", y: "10" }, { x: "2", y: "10" }, { x: "2", y: "11" }, { x: "1", y: "11" }, { x: "1", y: "12" }, { x: "2", y: "12" }];

var q = [{ x: "3", y: "1" }, { x: "3", y: "2" }, { x: "2", y: "2" }, { x: "2", y: "3" }, { x: "1", y: "3" }, { x: "1", y: "4" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "1", y: "5" }, { x: "1", y: "6" }, { x: "2", y: "6" }, { x: "8", y: "7" }, { x: "7", y: "7" }, { x: "8", y: "8" }, { x: "7", y: "8" }, { x: "7", y: "9" }, { x: "8", y: "9" }, { x: "6", y: "12" }, { x: "5", y: "12" }, { x: "4", y: "12" }, { x: "3", y: "12" }, { x: "6", y: "11" }, { x: "5", y: "11" }, { x: "4", y: "7" }, { x: "5", y: "7" }, { x: "5", y: "8" }, { x: "4", y: "8" }, { x: "5", y: "9" }, { x: "5", y: "10" }, { x: "6", y: "10" }, { x: "7", y: "10" }, { x: "8", y: "10" }, { x: "7", y: "11" }, { x: "2", y: "11" }, { x: "3", y: "11" }, { x: "4", y: "11" }, { x: "4", y: "9" }, { x: "2", y: "10" }, { x: "1", y: "10" }, { x: "1", y: "9" }, { x: "2", y: "9" }, { x: "2", y: "8" }, { x: "2", y: "7" }, { x: "1", y: "7" }, { x: "1", y: "8" }, { x: "4", y: "1" }, { x: "4", y: "2" }, { x: "5", y: "1" }, { x: "5", y: "2" }, { x: "6", y: "2" }, { x: "6", y: "1" }, { x: "7", y: "2" }, { x: "7", y: "3" }, { x: "8", y: "3" }, { x: "8", y: "4" }, { x: "7", y: "4" }, { x: "8", y: "5" }, { x: "7", y: "5" }, { x: "7", y: "6" }, { x: "8", y: "6" }];

var r = [{ x: "6", y: "1" }, { x: "6", y: "2" }, { x: "7", y: "2" }, { x: "7", y: "3" }, { x: "8", y: "3" }, { x: "8", y: "4" }, { x: "7", y: "4" }, { x: "5", y: "2" }, { x: "4", y: "2" }, { x: "3", y: "2" }, { x: "2", y: "2" }, { x: "5", y: "1" }, { x: "4", y: "1" }, { x: "3", y: "1" }, { x: "2", y: "1" }, { x: "1", y: "1" }, { x: "1", y: "2" }, { x: "1", y: "3" }, { x: "2", y: "3" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "2", y: "6" }, { x: "1", y: "6" }, { x: "1", y: "5" }, { x: "1", y: "4" }, { x: "3", y: "6" }, { x: "4", y: "6" }, { x: "5", y: "6" }, { x: "6", y: "6" }, { x: "2", y: "12" }, { x: "2", y: "11" }, { x: "2", y: "10" }, { x: "2", y: "9" }, { x: "2", y: "8" }, { x: "2", y: "7" }, { x: "7", y: "12" }, { x: "7", y: "11" }, { x: "8", y: "12" }, { x: "6", y: "10" }, { x: "7", y: "10" }, { x: "5", y: "9" }, { x: "4", y: "8" }, { x: "5", y: "8" }, { x: "5", y: "7" }, { x: "6", y: "8" }, { x: "6", y: "9" }, { x: "6", y: "11" }, { x: "4", y: "7" }, { x: "7", y: "5" }, { x: "6", y: "5" }, { x: "5", y: "5" }, { x: "4", y: "5" }, { x: "3", y: "5" }, { x: "1", y: "7" }, { x: "1", y: "8" }, { x: "1", y: "9" }, { x: "1", y: "10" }, { x: "1", y: "11" }, { x: "1", y: "12" }, { x: "7", y: "9" }, { x: "8", y: "11" }, { x: "3", y: "7" }, { x: "7", y: "6" }];

var s = [{ x: "1", y: "10" }, { x: "2", y: "11" }, { x: "2", y: "10" }, { x: "3", y: "11" }, { x: "3", y: "12" }, { x: "4", y: "12" }, { x: "4", y: "11" }, { x: "5", y: "11" }, { x: "5", y: "12" }, { x: "6", y: "12" }, { x: "7", y: "11" }, { x: "6", y: "11" }, { x: "7", y: "10" }, { x: "8", y: "10" }, { x: "8", y: "9" }, { x: "7", y: "9" }, { x: "7", y: "8" }, { x: "8", y: "8" }, { x: "7", y: "7" }, { x: "6", y: "6" }, { x: "6", y: "7" }, { x: "5", y: "7" }, { x: "5", y: "6" }, { x: "4", y: "6" }, { x: "4", y: "7" }, { x: "3", y: "7" }, { x: "3", y: "6" }, { x: "2", y: "6" }, { x: "1", y: "5" }, { x: "2", y: "5" }, { x: "2", y: "4" }, { x: "1", y: "4" }, { x: "1", y: "3" }, { x: "2", y: "3" }, { x: "2", y: "2" }, { x: "3", y: "1" }, { x: "3", y: "2" }, { x: "4", y: "2" }, { x: "4", y: "1" }, { x: "5", y: "1" }, { x: "5", y: "2" }, { x: "6", y: "2" }, { x: "6", y: "1" }, { x: "7", y: "2" }, { x: "8", y: "3" }, { x: "7", y: "3" }];

var t = [{ x: "4", y: "3" }, { x: "5", y: "3" }, { x: "5", y: "2" }, { x: "4", y: "2" }, { x: "3", y: "1" }, { x: "3", y: "2" }, { x: "2", y: "2" }, { x: "2", y: "1" }, { x: "1", y: "1" }, { x: "1", y: "2" }, { x: "4", y: "1" }, { x: "5", y: "1" }, { x: "6", y: "1" }, { x: "7", y: "1" }, { x: "8", y: "1" }, { x: "8", y: "2" }, { x: "7", y: "2" }, { x: "6", y: "2" }, { x: "5", y: "4" }, { x: "4", y: "4" }, { x: "4", y: "5" }, { x: "5", y: "5" }, { x: "5", y: "6" }, { x: "4", y: "6" }, { x: "4", y: "7" }, { x: "5", y: "7" }, { x: "5", y: "8" }, { x: "4", y: "8" }, { x: "4", y: "9" }, { x: "5", y: "9" }, { x: "5", y: "10" }, { x: "4", y: "10" }, { x: "4", y: "11" }, { x: "5", y: "11" }, { x: "5", y: "12" }, { x: "4", y: "12" }];

var u = [{ x: "3", y: "11" }, { x: "3", y: "12" }, { x: "4", y: "12" }, { x: "5", y: "12" }, { x: "5", y: "11" }, { x: "4", y: "11" }, { x: "2", y: "11" }, { x: "2", y: "10" }, { x: "1", y: "10" }, { x: "1", y: "9" }, { x: "2", y: "9" }, { x: "2", y: "8" }, { x: "1", y: "8" }, { x: "1", y: "7" }, { x: "2", y: "7" }, { x: "2", y: "6" }, { x: "1", y: "6" }, { x: "1", y: "5" }, { x: "2", y: "5" }, { x: "2", y: "4" }, { x: "1", y: "4" }, { x: "1", y: "3" }, { x: "2", y: "3" }, { x: "2", y: "2" }, { x: "1", y: "2" }, { x: "1", y: "1" }, { x: "2", y: "1" }, { x: "7", y: "1" }, { x: "8", y: "1" }, { x: "8", y: "2" }, { x: "7", y: "2" }, { x: "7", y: "3" }, { x: "8", y: "3" }, { x: "8", y: "4" }, { x: "7", y: "4" }, { x: "8", y: "5" }, { x: "7", y: "5" }, { x: "8", y: "6" }, { x: "7", y: "6" }, { x: "8", y: "7" }, { x: "7", y: "7" }, { x: "8", y: "8" }, { x: "7", y: "8" }, { x: "8", y: "9" }, { x: "7", y: "9" }, { x: "8", y: "10" }, { x: "7", y: "10" }, { x: "6", y: "11" }, { x: "6", y: "12" }, { x: "7", y: "11" }];

var v = [{ x: "4", y: "9" }, { x: "5", y: "9" }, { x: "5", y: "10" }, { x: "4", y: "10" }, { x: "4", y: "11" }, { x: "5", y: "11" }, { x: "5", y: "12" }, { x: "4", y: "12" }, { x: "3", y: "9" }, { x: "3", y: "10" }, { x: "3", y: "8" }, { x: "3", y: "7" }, { x: "3", y: "6" }, { x: "6", y: "6" }, { x: "6", y: "7" }, { x: "6", y: "8" }, { x: "6", y: "9" }, { x: "6", y: "10" }, { x: "7", y: "7" }, { x: "7", y: "6" }, { x: "7", y: "5" }, { x: "7", y: "3" }, { x: "7", y: "4" }, { x: "2", y: "3" }, { x: "2", y: "4" }, { x: "2", y: "5" }, { x: "2", y: "6" }, { x: "2", y: "7" }, { x: "1", y: "6" }, { x: "1", y: "5" }, { x: "1", y: "4" }, { x: "1", y: "3" }, { x: "1", y: "2" }, { x: "1", y: "1" }, { x: "8", y: "1" }, { x: "8", y: "3" }, { x: "8", y: "2" }, { x: "8", y: "4" }, { x: "8", y: "5" }, { x: "8", y: "6" }, { x: "2", y: "8" }, { x: "7", y: "8" }, { x: "2", y: "1" }, { x: "2", y: "2" }, { x: "7", y: "1" }, { x: "7", y: "2" }];

var w = [{ x: "4", y: "6" }, { x: "5", y: "6" }, { x: "5", y: "7" }, { x: "4", y: "7" }, { x: "4", y: "8" }, { x: "5", y: "8" }, { x: "5", y: "9" }, { x: "4", y: "9" }, { x: "3", y: "10" }, { x: "2", y: "11" }, { x: "2", y: "12" }, { x: "1", y: "12" }, { x: "1", y: "11" }, { x: "1", y: "10" }, { x: "2", y: "10" }, { x: "2", y: "9" }, { x: "1", y: "9" }, { x: "2", y: "7" }, { x: "1", y: "8" }, { x: "2", y: "8" }, { x: "1", y: "7" }, { x: "1", y: "6" }, { x: "2", y: "6" }, { x: "2", y: "5" }, { x: "1", y: "5" }, { x: "6", y: "10" }, { x: "7", y: "11" }, { x: "7", y: "12" }, { x: "8", y: "12" }, { x: "8", y: "11" }, { x: "8", y: "10" }, { x: "7", y: "10" }, { x: "7", y: "9" }, { x: "8", y: "9" }, { x: "8", y: "8" }, { x: "7", y: "8" }, { x: "7", y: "7" }, { x: "7", y: "6" }, { x: "8", y: "6" }, { x: "8", y: "7" }, { x: "7", y: "5" }, { x: "8", y: "5" }, { x: "8", y: "4" }, { x: "7", y: "4" }, { x: "7", y: "3" }, { x: "8", y: "3" }, { x: "8", y: "2" }, { x: "8", y: "1" }, { x: "7", y: "1" }, { x: "7", y: "2" }, { x: "2", y: "3" }, { x: "2", y: "4" }, { x: "1", y: "4" }, { x: "1", y: "3" }, { x: "1", y: "2" }, { x: "1", y: "1" }, { x: "2", y: "1" }, { x: "2", y: "2" }, { x: "3", y: "11" }, { x: "6", y: "11" }, { x: "4", y: "5" }, { x: "5", y: "5" }];

var x = [{ x: "4", y: "6" }, { x: "5", y: "6" }, { x: "1", y: "11" }, { x: "1", y: "12" }, { x: "2", y: "12" }, { x: "2", y: "11" }, { x: "2", y: "10" }, { x: "2", y: "9" }, { x: "3", y: "9" }, { x: "4", y: "8" }, { x: "3", y: "8" }, { x: "4", y: "7" }, { x: "5", y: "7" }, { x: "5", y: "8" }, { x: "6", y: "8" }, { x: "6", y: "9" }, { x: "7", y: "9" }, { x: "7", y: "10" }, { x: "7", y: "11" }, { x: "7", y: "12" }, { x: "8", y: "12" }, { x: "8", y: "11" }, { x: "1", y: "1" }, { x: "1", y: "2" }, { x: "2", y: "2" }, { x: "2", y: "3" }, { x: "3", y: "4" }, { x: "3", y: "5" }, { x: "6", y: "5" }, { x: "6", y: "4" }, { x: "7", y: "2" }, { x: "8", y: "2" }, { x: "8", y: "1" }, { x: "7", y: "3" }, { x: "3", y: "3" }, { x: "6", y: "3" }, { x: "6", y: "6" }, { x: "3", y: "6" }, { x: "4", y: "5" }, { x: "5", y: "5" }, { x: "2", y: "4" }, { x: "7", y: "4" }, { x: "1", y: "10" }, { x: "8", y: "10" }];

var y = [{ x: "5", y: "6" }, { x: "4", y: "6" }, { x: "3", y: "5" }, { x: "3", y: "4" }, { x: "2", y: "4" }, { x: "2", y: "3" }, { x: "2", y: "2" }, { x: "1", y: "2" }, { x: "1", y: "1" }, { x: "2", y: "1" }, { x: "6", y: "5" }, { x: "6", y: "4" }, { x: "7", y: "4" }, { x: "7", y: "3" }, { x: "7", y: "2" }, { x: "7", y: "1" }, { x: "8", y: "1" }, { x: "8", y: "2" }, { x: "4", y: "7" }, { x: "5", y: "7" }, { x: "5", y: "8" }, { x: "4", y: "8" }, { x: "4", y: "9" }, { x: "5", y: "9" }, { x: "5", y: "10" }, { x: "4", y: "10" }, { x: "4", y: "11" }, { x: "4", y: "12" }, { x: "5", y: "12" }, { x: "5", y: "11" }, { x: "3", y: "6" }, { x: "6", y: "6" }, { x: "2", y: "5" }, { x: "7", y: "5" }, { x: "1", y: "3" }, { x: "8", y: "3" }];

var z = [{ x: "1", y: "1" }, { x: "1", y: "2" }, { x: "2", y: "2" }, { x: "2", y: "1" }, { x: "3", y: "1" }, { x: "3", y: "2" }, { x: "4", y: "1" }, { x: "4", y: "2" }, { x: "5", y: "1" }, { x: "5", y: "2" }, { x: "6", y: "1" }, { x: "6", y: "2" }, { x: "7", y: "1" }, { x: "8", y: "1" }, { x: "8", y: "2" }, { x: "7", y: "2" }, { x: "8", y: "3" }, { x: "7", y: "3" }, { x: "7", y: "4" }, { x: "6", y: "4" }, { x: "6", y: "5" }, { x: "5", y: "5" }, { x: "5", y: "6" }, { x: "6", y: "6" }, { x: "6", y: "11" }, { x: "5", y: "11" }, { x: "5", y: "11" }, { x: "4", y: "11" }, { x: "3", y: "11" }, { x: "2", y: "11" }, { x: "2", y: "12" }, { x: "3", y: "12" }, { x: "4", y: "12" }, { x: "5", y: "12" }, { x: "6", y: "12" }, { x: "1", y: "10" }, { x: "2", y: "10" }, { x: "2", y: "9" }, { x: "3", y: "9" }, { x: "3", y: "8" }, { x: "4", y: "8" }, { x: "4", y: "7" }, { x: "5", y: "7" }, { x: "4", y: "6" }, { x: "1", y: "11" }, { x: "1", y: "12" }, { x: "3", y: "7" }, { x: "7", y: "11" }, { x: "8", y: "11" }, { x: "8", y: "12" }, { x: "7", y: "12" }];

var space = [];

// // print the letter on the grid!
// for (var i = 0; i < b.length; i++) {
// 	var ran = Math.floor(Math.random() * (74 - 12 + 12)) + 12;
// 	$('.grid2 .point[data-coords="' + b[i].x + ',' + b[i].y + '"]').append('<div class="obj"></div>').find(".obj").css({width: ran + 'px', height: ran + 'px'});
// };

var gridMarkup = '<div class="grid"><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div></div>';

function makeLetter(letter) {
	canvas.append(gridMarkup);
	var grid = $('.grid:last-child');
	// assign coords to points
	grid.find('.point').each(function(){
		var objNumber = $(this).index() + 1;
		var rowNumber = Math.ceil( objNumber / objsPerRow );
		var colNumber = Math.ceil((objNumber - .1) % objsPerRow);
		$(this).attr('data-coords', colNumber + ',' + rowNumber);
	});
	// assign objects to points
	for (var ii = 0; ii < letter.length; ii++) {
		var ran = Math.floor(Math.random() * (max - min) + min) + 8;
		grid.find('.point[data-coords="' + letter[ii].x + ',' + letter[ii].y + '"]').append('<div class="obj"></div>').find(".obj").css({width: ran + 'px', height: ran + 'px'});
	}
}

// more characters soon...
// character builder: https://codepen.io/nickcil/pen/GWQQdP?editors=1111

var phrase = canvas.text().toLowerCase().split('');
canvas.empty();
for (var ii = 0; ii < phrase.length; ii++) {
	if (phrase[ii] === " ") {
		makeLetter(space);
	} else {
		makeLetter(eval(phrase[ii]));
	}
};

$('.point').each(function(){
	if ($(this).find('.obj').length == 0) {
		$(this).append('<div class="obj empty"></div>');
	}	
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console