SVG Sketchbook

Tires 7 

<section id="tires-7">
    <div class="container"></div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="../../js/components/tires-7.js" type="module"></script>
 
<section id="tires-7">
    <div class="container"></div>
</section>

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

console.log("tires-7 active");

const width = 400;
const height = 300;

const draw = SVG().addTo('#tires-7 .container')
  .size(width, height)
  .viewbox(0, 0, width, height);

const bgOn = coinFlip();

if (bgOn) {
  const bg = draw.rect(width, height).fill('#ffffef');
} else {
  const bg = draw.rect(width, height).fill('#eeffff');
}

let y = 0;

for (let rows = 0; rows < 5; rows++) {
  const count = getRandomInt(10, 1000);
  const rects = [];

  const w = width / count;

  let x = 0;

  for (let i = 0; i < count; i++) {
    const h = getRandomIntInclusive(0, height - y);

    const alpha = getRandom() / 4;
    const color = createColor(1);

    rects[i] = draw.rect(w + 10, h)
      .attr({
        fill: color,
        x: x,
        y: y,
      })
      .opacity(alpha);

    x += w;
  }

  y = y + getRandomInt(0, height - y);
}
  • URL: /components/raw/tires-7/tires-7.js
  • Filesystem Path: components/03-svgjs/01-tires/07-tires-7/tires-7.js
  • Size: 954 Bytes
  • Content: 
    #tires-7 {
  padding: 1rem;

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

  svg {
    border: 1px solid teal;
    width: 100%;
    height: auto;
  }
}
  • URL: /components/raw/tires-7/tires-7.scss
  • Filesystem Path: components/03-svgjs/01-tires/07-tires-7/tires-7.scss
  • Size: 175 Bytes

No notes defined.