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>
  </head>
  <style>
    body, html, a {
      height:100%;
      width:100%;
      margin:0;
    }
    :root {
    --color1: lch(0 0 0);
    --color2: lch(0 0 0);
    --color3: lch(0 0 0);
    --color4: lch(0 0 0);
    --color5: lch(0 0 0);
    --color6: lch(0 0 0);
    --color7: lch(0 0 0);
    --color8: lch(0 0 0);
    --color9: lch(0 0 0);
    --color10: lch(0 0 0);
    --color11: lch(0 0 0);
    --color12: lch(0 0 0);
  }
  .grid-container {
    height: 100%;
    width: 100%;
    display: grid;
    position: relative;
    background-color: #d1d1d1;
  }
  .shapeContainer {
    position: relative;
  }
  .shape {
    position: absolute;
    width: 100%;
    height: 100%;
  }

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

</style>
  <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.