SVG Sketchbook

Shapes 2 

<section id="shapes-2">
    <div class="container">
        <svg id="shapes-2-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-2.js" type="module"></script>
 
<section id="shapes-2">
    <div class="container">
        <svg id="shapes-2-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-2.js' }}" type="module"></script>
 
/* No context defined. */
  • Content: 
    import {
  getRandomInt,
  getRandomIntInclusive,
  shuffleArray
} from "./utils-v1.js";

const colors = [
  "#511259",
  "#553159",
  "#696273",
  "#F2EDA2",
  "#8C846C",
]

function getColor(colors) {
  return colors[getRandomIntInclusive(0, colors.length - 1)];
}

console.log("shapes-2 active");

const width = 400;
const height = 300;

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

const triangle1 = draw.use("triangle").attr({
  fill: getColor(colors)
}).x(0).y(0).width(50).height(50);

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

const pentagon1 = draw.use("pentagon").attr({
  fill: getColor(colors)
}).x(100).y(0).width(50).height(50);

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

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

const pentagon = draw.use("pentagon").attr({
  fill: getColor(colors)
}).x(300).y(15).width(50).height(50).rotate(45);
  • URL: /components/raw/shapes-2/shapes-2.js
  • Filesystem Path: components/03-svgjs/02-shapes/02-shapes-2/shapes-2.js
  • Size: 1.1 KB
  • Content: 
    #shapes-2 {
  padding: 1rem;

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

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

No notes defined.