SVG Sketchbook

Shapes 1 

<section id="shapes-1">
    <div class="container">
        <svg id="shapes-1-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="400" height="300" viewBox="0 0 400 300">
            <defs>
                <path id="triangle" d="M28.4,5.9l19.7,34.2c1.5,2.6-0.4,5.9-3.4,5.9H5.3c-3,0-4.9-3.3-3.4-5.9L21.6,5.9C23.1,3.3,26.9,3.3,28.4,5.9z" />
                <path id="square" d="M43,48.5H7c-3,0-5.5-2.5-5.5-5.5V7C1.5,4,4,1.5,7,1.5h36c3,0,5.5,2.5,5.5,5.5v36C48.5,46,46,48.5,43,48.5z" />
                <path id="pentagon" d="M30.6,5.3l12.8,9.3c3.4,2.4,4.8,6.8,3.5,10.7l-4.9,15c-1.3,3.9-5,6.6-9.1,6.6H17.1c-4.1,0-7.8-2.7-9.1-6.6l-4.9-15C1.9,21.3,3.3,17,6.6,14.5l12.8-9.3C22.7,2.8,27.3,2.8,30.6,5.3z" />

            </defs>
        </svg>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="../../js/components/shapes-1.js"></script>
 
<section id="shapes-1">
    <div class="container">
        <svg id="shapes-1-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="400" height="300" viewBox="0 0 400 300">
            <defs>
                <path id="triangle" d="M28.4,5.9l19.7,34.2c1.5,2.6-0.4,5.9-3.4,5.9H5.3c-3,0-4.9-3.3-3.4-5.9L21.6,5.9C23.1,3.3,26.9,3.3,28.4,5.9z"/>
                <path id="square" d="M43,48.5H7c-3,0-5.5-2.5-5.5-5.5V7C1.5,4,4,1.5,7,1.5h36c3,0,5.5,2.5,5.5,5.5v36C48.5,46,46,48.5,43,48.5z"/>
                <path id="pentagon" d="M30.6,5.3l12.8,9.3c3.4,2.4,4.8,6.8,3.5,10.7l-4.9,15c-1.3,3.9-5,6.6-9.1,6.6H17.1c-4.1,0-7.8-2.7-9.1-6.6l-4.9-15C1.9,21.3,3.3,17,6.6,14.5l12.8-9.3C22.7,2.8,27.3,2.8,30.6,5.3z"/>

            </defs>
        </svg>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="{{ path '/js/components/shapes-1.js' }}"></script>
 
/* No context defined. */
  • Content: 
    (function () {
  document.addEventListener('DOMContentLoaded', function () {
    console.log("shapes-1 active");

    const width = 400;
    const height = 300;

    const draw = SVG('#shapes-1-svg');

    const triangle1 = draw.use("triangle").attr({
      fill: '#00ff00'
    }).x(0).y(0).width(50).height(50);

    const square1 = draw.use("square").attr({
      fill: '#ff0000'
    }).x(50).y(0).width(50).height(50);

    const pentagon1 = draw.use("pentagon").attr({
      fill: '#0000ff'
    }).x(100).y(0).width(50).height(50);

    const triangle = draw.use("triangle").attr({
      fill: '#00ff00'
    }).x(100).y(200).width(50).height(50).rotate(45);

    const square = draw.use("square").attr({
      fill: '#ff0000'
    }).x(200).y(100).width(50).height(50).rotate(45);

    const pentagon = draw.use("pentagon").attr({
      fill: '#0000ff'
    }).x(300).y(15).width(50).height(50).rotate(45);
  });
})();
  • URL: /components/raw/shapes-1/shapes-1.js
  • Filesystem Path: components/03-svgjs/02-shapes/01-shapes-1/shapes-1.js
  • Size: 921 Bytes
  • Content: 
    #shapes-1 {
  padding: 1rem;

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

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

No notes defined.