Grid Drawing Club

Keyboard shortcuts & help

In short:

Double click to insert a new block
Right click to select / deselect a block
Drag block from corners to resize or from center to move around
Scroll to change the shape/pattern
Switch to Edit View to make your own patterns and change colors

Keyboard shortcuts

CMD / CTRL + 1: hide UI
CMD / CTRL + 2: scroll shapes
CMD / CTRL + 3: scroll patterns
CMD / CTRL + D: duplicate block
CMD / CTRL + R: remove block
CMD / CTRL + L: lock block
CMD / CTRL + U: unlock all blocks
CMD / CTRL + S: deselect
CMD / CTRL + E: switch to editor view and back

Ohje patternien tekoon

Load drawing:

Copy paste the drawing

If you want to use the drawing on your own site, copy paste this code into your HTML file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Grid Drawing</title>

.defaultpattern1 {
background:lch(10 0 0);
}

</style>
</head>
<body>
  <div class="grid-container" style="grid-template-columns: repeat(50, 1fr); grid-template-rows: repeat(50, 1fr)">
  
  </div>
</body>
</html>

It contains everything you need, but you need to put it into a parent element with a specified height and width. You can also adjust the ".grid-container" style to specify it's size. If you paste this into an empty html file, you only need to add an extra style specifying body, html { height: 100%; } to make it fill the screen.