SVG Sketchbook

Tires 3 

<section id="tires-3">
    <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-3.js"></script>
 
<section id="tires-3">
    <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-3.js' }}"></script>
 
/* No context defined. */
  • Content: 
    (function () {
  document.addEventListener('DOMContentLoaded', function () {
    console.log("tires-3 active");

    const width = 400;
    const height = 300;

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

    const rect = draw.rect(100, 100)
      .attr({
        fill: '#ff0000'
      });

    const rect2 = draw.rect(100, 100)
      .attr({
        fill: '#00ff00',
        x: 100,
        y: 200
      });

    const rect3 = draw.rect(100, 100)
      .attr({
        fill: '#0000ff',
        x: 200,
        y: 100
      });

    const rect4 = draw.rect(98, 298)
      .attr({
        fill: '#323232',
        x: 301,
        y: 1
      });

    const circle1 = draw.circle(100)
      .attr({
        cx: 50,
        cy: 150,
        fill: '#990000'
      });

    const circle2 = draw.circle(100)
      .attr({
        cx: 150,
        cy: 50,
        fill: '#009900'
      });

    const circle3 = draw.circle(100)
      .attr({
        cx: 250,
        cy: 250,
        fill: '#000099'
      });

    const sw = 2;

    const line1 = draw.line(0, 200, 99, 299)
      .stroke({
        width: sw,
        color: '#00ffff',
        linecap: 'round'
      })

    const line2 = draw.line(100, 199, 199, 100)
      .stroke({
        width: sw,
        color: '#ff00ff',
        linecap: 'round'
      })

    const line3 = draw.line(200, 0, 299, 99)
      .stroke({
        width: sw,
        color: '#ffff00',
        linecap: 'round'
      })

  });
})();
  • URL: /components/raw/tires-3/tires-3.js
  • Filesystem Path: components/03-svgjs/01-tires/03-tires-3/tires-3.js
  • Size: 1.5 KB
  • Content: 
    #tires-3 {
  padding: 1rem;

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

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

No notes defined.