<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.