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"></div>
            
          
!
            
              * {
	box-sizing: border-box;
}

body {
	background: black;
}

.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: -2px;
}

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

// .obj {
// 	position: absolute;
// 	width: 20px;
// 	height: 20px;
// 	border: 1px solid #000;
// 	background: #fff;
// 	border-radius: 100%;
// 	transform: translate(-50%, -50%);
// }

.obj {
	position: absolute;
	background: white;
	border-radius: 100%;
	outline: 1px solid black;
	transform: translate(-50%, -50%);
	border-radius: 0;
//	animation: a 10s ease infinite;
	opacity: 1;
	
	&.empty {
		background-color: #fff;
		border-radius: 0;
		opacity: 1;
		width: 11px;
		height: 11px;
	}
}

@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;
		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 i = 0; i < letter.length; i++) {
		var max = 1;
		var min = -8;
		var ran = Math.floor(Math.random() * (max - min) + min) + 8;
		grid.find('.point[data-coords="' + letter[i].x + ',' + letter[i].y + '"]').append('<div class="obj"></div>').find(".obj").css({width: ran + 'px', height: ran + 'px'});
	}
}
makeLetter(g);
makeLetter(r);
makeLetter(u);
makeLetter(m);
makeLetter(p);
makeLetter(y);
makeLetter(space);
makeLetter(w);
makeLetter(i);
makeLetter(z);
makeLetter(a);
makeLetter(r);
makeLetter(d);
makeLetter(s);
makeLetter(space);
makeLetter(m);
makeLetter(a);
makeLetter(k);
makeLetter(e);
makeLetter(space);
makeLetter(a);
makeLetter(space);
makeLetter(t);
makeLetter(o);
makeLetter(x);
makeLetter(i);
makeLetter(c);
makeLetter(space);
makeLetter(b);
makeLetter(r);
makeLetter(e);
makeLetter(w);
makeLetter(space);
makeLetter(f);
makeLetter(o);
makeLetter(r);
makeLetter(space);
makeLetter(t);
makeLetter(h);
makeLetter(e);
makeLetter(space);
makeLetter(j);
makeLetter(o);
makeLetter(v);
makeLetter(i);
makeLetter(a);
makeLetter(l);
makeLetter(space);
makeLetter(q);
makeLetter(u);
makeLetter(e);
makeLetter(e);
makeLetter(n);
// more characters soon...
// character builder: https://codepen.io/nickcil/pen/GWQQdP?editors=1111

$('.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