SVG Sketchbook

Tires 4 

<section id="tires-4">
    <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-4.js" type="module"></script>
 
<section id="tires-4">
    <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-4.js' }}" type="module"></script>
 
/* No context defined. */
  • Content: 
    import * as utils from './utils-v1.js';

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

    const width = 400;
    const height = 300;

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

    const x = utils.getRandomInt(0, width);
    const y = utils.getRandomInt(0, height);

    const w = utils.getRandomInt(0, width - x);
    const h = utils.getRandomInt(0, height - y);

    const color = utils.makeColor();

    const rect = draw.rect(w, h)
      .attr({
        fill: color,
        x: x,
        y: y
      });
  });
})();
  • URL: /components/raw/tires-4/tires-4.js
  • Filesystem Path: components/03-svgjs/01-tires/04-tires-4/tires-4.js
  • Size: 662 Bytes
  • Content: 
    #tires-4 {
  padding: 1rem;

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

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

No notes defined.