<section id="grid-3">
    <div class="container">
        <svg id="grid-3-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="1600" height="900" viewBox="0 0 1600 900">
        </svg>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.topath.js@2.0.3/dist/svg.topath.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.filter.js@3.0.8/dist/svg.filter.min.js"></script>
<script src="../../js/components/grid-3.js" type="module"></script>
<section id="grid-3">
    <div class="container">
        <svg id="grid-3-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="1600" height="900" viewBox="0 0 1600 900">
        </svg>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.topath.js@2.0.3/dist/svg.topath.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.filter.js@3.0.8/dist/svg.filter.min.js"></script>
<script src="{{ path '/js/components/grid-3.js' }}" type="module"></script>
/* No context defined. */
  • Content:
    import {
      GridAttrs,
      getRandomIntInclusive,
      coinFlip,
      getRandomArrayElement
    } from "./utils-v1.js";
    
    const colors = [
      "#70948a",
      "#9F9FA5",
      "#B7C4C4",
      "#E4E8E8",
      "#D8A2AF",
    ]
    
    const accentColors = [
      "#634a51",
      "#8b7272",
      "#a19191",
      "#6f6f69",
      "#4ab299",
    ]
    
    console.log("grid-3 active");
    
    const draw = SVG('#grid-3-svg');
    
    const width = draw.width();
    const height = draw.height();
    
    const sqSize = 100;
    
    // Grid code
    
    const myGrid = new GridAttrs(width, height, sqSize).createXCoords().createYCoords().centerIt();
    
    console.dir(myGrid);
    
    for (let y = 0; y < myGrid.rows; y++) {
      for (let x = 0; x < myGrid.cols; x++) {
        let rect = draw.rect(sqSize * 2, sqSize * 2)
          .x(myGrid.centeredXCoords[x])
          .y(myGrid.centeredYCoords[y])
          .fill(getRandomArrayElement(colors))
          .stroke({
            color: '#fff',
            width: 20
          })
          .transform({
            scale: 0.7,
            rotate: 45
          });
      }
    }
    
    for (let y = 0; y < myGrid.rows; y++) {
      for (let x = 0; x < myGrid.cols; x++) {
        let rect = draw.rect(sqSize, sqSize)
          .x(myGrid.centeredXCoords[x])
          .y(myGrid.centeredYCoords[y])
          .fill(getRandomArrayElement(colors))
          .stroke(getRandomArrayElement(accentColors))
          .transform({
            scale: 0.7,
            rotate: 45
          });
      }
    }
    
    
  • URL: /components/raw/grid-3/grid-3.js
  • Filesystem Path: components/03-svgjs/04-grid/03-grid-3/grid-3.js
  • Size: 1.3 KB
  • Content:
    #grid-3 {
      padding: 1rem;
    
      .container {
        width: 100%;
        height: calc(100vh - 8rem);
    
        display: flex;
        align-items: center;
      }
    
      svg {
        border: 1px solid teal;
        width: 100%;
        height: auto;
      }
    }
    
  • URL: /components/raw/grid-3/grid-3.scss
  • Filesystem Path: components/03-svgjs/04-grid/03-grid-3/grid-3.scss
  • Size: 219 Bytes

No notes defined.