SVG Sketchbook

Shapes 3 B - Basic Shapes Grid 

<section id="shapes-3b">
    <div class="container">
        <svg id="shapes-3b-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="400" height="300" viewBox="0 0 400 300">
            <defs>
                <path id="triangle" d="M28.4,5.9l19.7,34.2c1.5,2.6-0.4,5.9-3.4,5.9H5.3c-3,0-4.9-3.3-3.4-5.9L21.6,5.9C23.1,3.3,26.9,3.3,28.4,5.9z" />
                <path id="square" d="M43,48.5H7c-3,0-5.5-2.5-5.5-5.5V7C1.5,4,4,1.5,7,1.5h36c3,0,5.5,2.5,5.5,5.5v36C48.5,46,46,48.5,43,48.5z" />
                <path id="pentagon" d="M30.6,5.3l12.8,9.3c3.4,2.4,4.8,6.8,3.5,10.7l-4.9,15c-1.3,3.9-5,6.6-9.1,6.6H17.1c-4.1,0-7.8-2.7-9.1-6.6l-4.9-15C1.9,21.3,3.3,17,6.6,14.5l12.8-9.3C22.7,2.8,27.3,2.8,30.6,5.3z" />
            </defs>
        </svg>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="../../js/components/shapes-3b.js" type="module"></script>
 
<section id="shapes-3b">
    <div class="container">
        <svg id="shapes-3b-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="400" height="300" viewBox="0 0 400 300">
            <defs>
                <path id="triangle" d="M28.4,5.9l19.7,34.2c1.5,2.6-0.4,5.9-3.4,5.9H5.3c-3,0-4.9-3.3-3.4-5.9L21.6,5.9C23.1,3.3,26.9,3.3,28.4,5.9z"/>
                <path id="square" d="M43,48.5H7c-3,0-5.5-2.5-5.5-5.5V7C1.5,4,4,1.5,7,1.5h36c3,0,5.5,2.5,5.5,5.5v36C48.5,46,46,48.5,43,48.5z"/>
                <path id="pentagon" d="M30.6,5.3l12.8,9.3c3.4,2.4,4.8,6.8,3.5,10.7l-4.9,15c-1.3,3.9-5,6.6-9.1,6.6H17.1c-4.1,0-7.8-2.7-9.1-6.6l-4.9-15C1.9,21.3,3.3,17,6.6,14.5l12.8-9.3C22.7,2.8,27.3,2.8,30.6,5.3z"/>
            </defs>
        </svg>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="{{ path '/js/components/shapes-3b.js' }}" type="module"></script>
 
/* No context defined. */
  • Content: 
    import {
  getRandomInt,
  getRandomIntInclusive,
  shuffleArray
} from "./utils-v1.js";

const colors = [
  "#511259",
  "#553159",
  "#696273",
  "#F2EDA2",
  "#8C846C",
]

const shapes = [
  "triangle",
  "square",
  "pentagon",
]

function getColor(colors) {
  return colors[getRandomIntInclusive(0, colors.length - 1)];
}

function getRandomArrayElement(arr) {
  return arr[getRandomIntInclusive(0, arr.length - 1)];
}

console.log("shapes-3b active");

const draw = SVG('#shapes-3b-svg');

const width = draw.width();
const height = draw.height();

const sqSize = 30;

let cols = Math.floor(width / sqSize);
let rows = Math.floor(height / sqSize);

let startX = (width - (cols * sqSize)) / 2;
let startY = (height - (rows * sqSize)) / 2;

console.log({startX, startY});

for (let r = 0; r < rows; r++) {
  for (let c = 0; c < cols; c++) {
    let currentShape = draw.use(getRandomArrayElement(shapes));
    let objscale = sqSize / currentShape.bbox().width * 0.95;

    currentShape.transform({
      position: [ startX + c * sqSize + sqSize / 2, startY + r * sqSize + sqSize / 2 ],
      scale: objscale,
      rotate: getRandomIntInclusive(0, 3) * 90
    });

    currentShape.attr({
      fill: getColor(colors),
    });
  }
}
  • URL: /components/raw/shapes-3b/shapes-3b.js
  • Filesystem Path: components/03-svgjs/02-shapes/03-shapes-3b/shapes-3b.js
  • Size: 1.2 KB
  • Content: 
    #shapes-3b {
  padding: 1rem;

  .container {
    width: 100%;
    height: calc(100vh - 2rem);
  }

  svg {
    border: 1px solid teal;
    width: 100%;
    height: auto;
  }
}
  • URL: /components/raw/shapes-3b/shapes-3b.scss
  • Filesystem Path: components/03-svgjs/02-shapes/03-shapes-3b/shapes-3b.scss
  • Size: 177 Bytes

No notes defined.