<section id="shapes-3c">
    <div class="container">
        <svg id="shapes-3c-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-3c.js" type="module"></script>
<section id="shapes-3c">
    <div class="container">
        <svg id="shapes-3c-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-3c.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-3c active");
    
    const draw = SVG('#shapes-3c-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++) {
        const group = draw.group();
    
        let curSquare = group.rect(sqSize, sqSize);
    
        // curSquare.cx(startX + c * sqSize + sqSize / 2);
        // curSquare.cy(startY + r * sqSize + sqSize / 2);
    
        curSquare.attr({
          fill: getColor(colors),
        });
    
        let currentShape = group.use(getRandomArrayElement(shapes)).attr({
          fill: '#fff',
        });
    
        curSquare.maskWith(currentShape);
    
        let objscale = sqSize / currentShape.bbox().width * 0.95;
    
        group.transform({
          position: [ startX + c * sqSize + sqSize / 2, startY + r * sqSize + sqSize / 2 ],
          scale: objscale,
          // rotate: getRandomIntInclusive(0, 3) * 90
        });
    
      }
    }
    
  • URL: /components/raw/shapes-3c/shapes-3c.js
  • Filesystem Path: components/03-svgjs/02-shapes/03-shapes-3c/shapes-3c.js
  • Size: 1.5 KB
  • Content:
    #shapes-3c {
      padding: 1rem;
    
      .container {
        width: 100%;
        height: calc(100vh - 2rem);
      }
    
      svg {
        border: 1px solid teal;
        width: 100%;
        height: auto;
      }
    }
    
  • URL: /components/raw/shapes-3c/shapes-3c.scss
  • Filesystem Path: components/03-svgjs/02-shapes/03-shapes-3c/shapes-3c.scss
  • Size: 177 Bytes

No notes defined.