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