SVG Sketchbook

Grid 5 

<section id="grid-5">
    <div class="container">
        <svg id="grid-5-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-5.js" type="module"></script>
 
<section id="grid-5">
    <div class="container">
        <svg id="grid-5-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-5.js' }}" type="module"></script>
 
/* No context defined. */
  • Content: 
    import {
  GridAttrs,
  getRandomIntInclusive,
  coinFlip,
  getRandomArrayElement,
  getRandom
} from "./utils-v1.js";

const colors = [
  "#70948a",
  "#9F9FA5",
  "#B7C4C4",
  "#E4E8E8",
  "#D8A2AF",
]

const accentColors = [
  "#634a51",
  "#8b7272",
  "#a19191",
  "#6f6f69",
  "#4ab299",
]

console.log("grid-5 active");

const draw = SVG('#grid-5-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 scaleFactor = getRandom();
    let scaleFactor = 1

    let circle = draw.circle(sqSize * 2 * scaleFactor, sqSize * 2 * scaleFactor)
      .cx(myGrid.centeredXCoords[x] + sqSize / 2)
      .cy(myGrid.centeredYCoords[y] + sqSize / 2)
      .fill(getRandomArrayElement(colors))
      .stroke({
        color: '#fff',
        width: 20
      })
      .opacity(0.25)
      .addClass('back');
  }
}

for (let y = 0; y < myGrid.rows; y++) {
  for (let x = 0; x < myGrid.cols; x++) {
    let circle = draw.circle(sqSize, sqSize)
      .cx(myGrid.centeredXCoords[x] + sqSize / 2)
      .cy(myGrid.centeredYCoords[y] + sqSize / 2)
      .fill(getRandomArrayElement(colors))
      .opacity(0.5)
      .transform({
        scale: 0.9
      })
      .stroke({
        color: "#fff",
        width: 5,
        opacity: 0.5
      })
      .addClass('front');
  }
}
  • URL: /components/raw/grid-5/grid-5.js
  • Filesystem Path: components/03-svgjs/04-grid/05-grid-5/grid-5.js
  • Size: 1.5 KB
  • Content: 
    #grid-5 {
  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-5/grid-5.scss
  • Filesystem Path: components/03-svgjs/04-grid/05-grid-5/grid-5.scss
  • Size: 219 Bytes

No notes defined.