SVG Sketchbook

Shapes 4 

<section id="shapes-4">
    <div class="container">
        <svg id="shapes-4-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 width="30" height="30" 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 width="30" height="30" 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 width="30" height="30" 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-4.js" type="module"></script>
 
<section id="shapes-4">
    <div class="container">
        <svg id="shapes-4-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 width="30" height="30" 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 width="30" height="30" 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 width="30" height="30" 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-4.js' }}" type="module"></script>
 
/* No context defined. */
  • Content: 
    import {
  getRandomInt,
  getRandomIntInclusive,
  shuffleArray
} from "./utils-v1.js";

const colors = [
  "#031326",
  "#172C42",
  "#2F445C",
  "#495D75",
  "#7A93A7",
]

const warmColors = [
  "#E8C066",
  "#FFE171",
  "#FFCA7D",
  "#E8A066",
  "#FF9B71",
]

const grays = [
  "#6C6F73",
  "#BDBFBF",
  "#888C8C",
  "#3C3F40",
  "#F0F2F0",
]

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-4 active");

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

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

const bg = draw.rect(width, height).fill(getColor(grays));

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;

for (let r = 0; r < rows; r++) {
  for (let c = 0; c < cols; c++) {
    const thisShape = getRandomArrayElement(shapes);

    let currentShape = draw.use(thisShape);
    let objscale = 0.6;
    let objrotate = getRandomIntInclusive(0, 3) * 90;

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

    currentShape.attr({
      fill: getColor(colors),
      "stroke-width": "1",
      "stroke": getColor(grays)
    });

    let currentShape2 = draw.use(thisShape);
    objscale /= 2;

    currentShape2.transform({
      position: [startX + c * sqSize + sqSize / 2, startY + r * sqSize + sqSize / 2],
      scale: objscale,
      rotate: objrotate
    });

    currentShape2.attr({
      "fill": getColor(warmColors),
      "stroke-width": "1",
      "stroke": getColor(grays)
    });
  }
}

// for (let r = 0; r < rows; r++) {
//   for (let c = 0; c < cols; c++) {
//     let currentShape = draw.use(getRandomArrayElement(shapes));
//     const objscale = 0.3;
//
//     currentShape.transform({
//       position: [startX + c * sqSize + sqSize / 2, startY + r * sqSize +
// sqSize / 2], scale: objscale, rotate: getRandomIntInclusive(0, 3) * 90 });
// currentShape.attr({ fill: getColor(warmColors), }); } }
  • URL: /components/raw/shapes-4/shapes-4.js
  • Filesystem Path: components/03-svgjs/02-shapes/04-shapes-4/shapes-4.js
  • Size: 2.3 KB
  • Content: 
    #shapes-4 {
  padding: 1rem;

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

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

No notes defined.