SVG Sketchbook

Tires 6 

<section id="tires-6">
    <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-6.js" type="module"></script>
 
<section id="tires-6">
    <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-6.js' }}" type="module"></script>
 
/* No context defined. */
  • Content: 
    import { coinFlip, getRandom, getRandomInt, getRandomIntInclusive, createColor } from "./utils-v1.js";

(function () {
  document.addEventListener('DOMContentLoaded', function () {
    console.log("tires-6 active");

    const width = 400;
    const height = 300;

    const draw = SVG().addTo('#tires-6 .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');
    }

    const count = getRandomInt(10, 20);
    const rects = [];

    const w = width / count;
    const y = getRandomInt(0, height / 2);

    let x = 0;

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

      const alpha = getRandom() / 2 + 0.2;
      const color = createColor(1);

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

      x += w;
    }
  });
})();
  • URL: /components/raw/tires-6/tires-6.js
  • Filesystem Path: components/03-svgjs/01-tires/06-tires-6/tires-6.js
  • Size: 1.1 KB
  • Content: 
    #tires-6 {
  padding: 1rem;

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

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

No notes defined.