<section id="paths-2">
    <div class="container">
        <svg id="paths-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="1600" height="900" viewBox="0 0 1600 900">
        </svg>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.topath.js@2.0.3/dist/svg.topath.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.filter.js@3.0.8/dist/svg.filter.min.js"></script>
<script src="../../js/components/paths-2.js" type="module"></script>
<section id="paths-2">
    <div class="container">
        <svg id="paths-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="1600" height="900" viewBox="0 0 1600 900">
        </svg>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.topath.js@2.0.3/dist/svg.topath.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.filter.js@3.0.8/dist/svg.filter.min.js"></script>
<script src="{{ path '/js/components/paths-2.js' }}" type="module"></script>
/* No context defined. */
  • Content:
    import {
      getRandomIntInclusive,
    } from "./utils-v1.js";
    
    console.log("paths-2 active");
    
    const draw = SVG('#paths-2-svg');
    
    const width = draw.width();
    const height = draw.height();
    
    const sqSize = Math.min(width, height);
    
    // draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
    
    function randomPoint(max) {
      let x1 = getRandomIntInclusive(0, max);
      let y1 = getRandomIntInclusive(0, max);
    
      return [x1, y1];
    }
    
    function startPoint() {
      let pathData = "M";
    
      let [x1, y1] = randomPoint(sqSize);
    
      pathData += `${x1} ${y1}`;
    
      return pathData;
    }
    
    function lineTo() {
      let pathData = "L";
    
      let [x1, y1] = randomPoint(sqSize);
    
      pathData += `${x1} ${y1}`;
    
      return pathData;
    }
    
    function smoothCurveTo() {
      let pathData = "S";
    
      let [c1, c2] = randomPoint(sqSize);
      let [x1, y1] = randomPoint(sqSize);
    
      pathData += `${c1},${c2} ${x1},${y1}`;
    
      return pathData;
    }
    
    function makePath(segments) {
      let stringData = startPoint();
    
      for (let i = 0; i < segments; i++) {
        stringData += smoothCurveTo();
      }
    
      stringData += 'z';
    
      return stringData;
    }
    
    let myPath = draw.path(makePath(2));
    
    myPath.fill('#00ff00');
    
    myPath.cx(width * 0.25);
    myPath.cy(height / 2);
    
    let myPath2 = draw.path(makePath(2));
    
    myPath2.fill('#0000ff');
    
    myPath2.cx(width * 0.75);
    myPath2.cy(height / 2);
    
    let myPath3 = draw.path(makePath(2));
    
    myPath3.fill('#009999');
    myPath3.opacity(0.5);
    
    myPath3.cx(width * 0.5);
    myPath3.cy(height / 2);
    
  • URL: /components/raw/paths-2/paths-2.js
  • Filesystem Path: components/03-svgjs/05-paths/02-paths-2/paths-2.js
  • Size: 1.4 KB
  • Content:
    #paths-2 {
      padding: 1rem;
    
      .container {
        width: 100%;
        height: calc(100vh - 8rem);
    
        display: flex;
        align-items: center;
      }
    
      svg {
        border: 1px solid teal;
        width: 100%;
        height: auto;
      }
    }
    
  • URL: /components/raw/paths-2/paths-2.scss
  • Filesystem Path: components/03-svgjs/05-paths/02-paths-2/paths-2.scss
  • Size: 220 Bytes

No notes defined.