<section id="paths-8">
    <div class="container">
        <svg id="paths-8-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="1600" viewBox="0 0 1600 1600">
        </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-8.js" type="module"></script>
<section id="paths-8">
    <div class="container">
        <svg id="paths-8-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="1600" viewBox="0 0 1600 1600">
        </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-8.js' }}" type="module"></script>
/* No context defined. */
  • Content:
    import {
      coinFlip,
      getRandomIntInclusive,
      getRandomArrayElement
    } from "./utils-v1.js";
    
    console.log("paths-8 active");
    
    const colors = [
      "#ffffff",
      "#70948a",
      "#9F9FA5",
      "#B7C4C4",
      "#E4E8E8",
      "#D8A2AF",
    ]
    
    const draw = SVG('#paths-8-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(x1, y1) {
      let pathData = "M";
    
      pathData += `${x1} ${y1}`;
    
      return pathData;
    }
    
    function lineTo(x, y) {
      let pathData = "L";
    
      pathData += `${x} ${y}`;
    
      return pathData;
    }
    
    function smoothClosedCurveTo(x, y) {
      let pathData = "S";
    
      let c1 = x + getRandomIntInclusive(-50, 50);
      let c2 = y + getRandomIntInclusive(0, height * 0.5);
    
      pathData += `${c1},${c2} ${x},${y}`;
    
      return pathData;
    }
    
    function smoothControlledClosedCurveTo(x, y, cx, cy) {
      let pathData = "S";
    
      pathData += `${cx},${cy} ${x},${y}`;
    
      return pathData;
    }
    
    function smoothFullControlledClosedCurveTo(x, y, cx1, cy1, cx2, cy2) {
      let pathData = "C";
    
      pathData += `${cx1},${cy1} ${cx2},${cy2} ${x},${y}`;
    
      return pathData;
    }
    
    
    function defineAllPoints(w, h) {
      // Left, right, and middle anchor points
      let xL = 0;
      let xR = w;
      let xMid = w * 0.5;
    
      // The vertical middle of our wave
      let yMid = h * 0.5;
    
      // The vertical position of the mid-wave anchor points,
      let yDiff = getRandomIntInclusive(h * 0.01, h * 0.02);
      let y1 = yMid - yDiff;
      let y2 = yMid + yDiff;
    
      // "Scootch" our wave anchor points in equally on all sides
      let xDiff = getRandomIntInclusive(w * 0.1, w * 0.2);
      let cx1 = xL + xDiff;
      let cx2 = xMid - xDiff;
      let cx3 = xMid + xDiff;
      let cx4 = xR - xDiff;
    
      // Vertical positioning of the control points
      let yControlDiff = getRandomIntInclusive(h * 0.1, h * 0.2);
      let cy1 = y1 - yControlDiff;
      let cy2 = y1 + yControlDiff;
      let cy3 = y2 + yControlDiff;
      let cy4 = y2 - yControlDiff;
    
      return {
        "xL": xL,
        "xR": xR,
        "xMid": xMid,
        "yMid": yMid,
        "yDiff": yDiff,
        "y1": y1,
        "y2": y2,
        "xDiff": xDiff,
        "cx1": cx1,
        "cx2": cx2,
        "cx3": cx3,
        "cx4": cx4,
        "yControlDiff": yControlDiff,
        "cy1": cy1,
        "cy2": cy2,
        "cy3": cy3,
        "cy4": cy4,
      }
    }
    
    let rect = draw.rect(width, height).fill('#efabab').opacity(0.1);
    
    let numWaves = 1;
    let waveHeight = height / numWaves;
    
    for (let waves = 0; waves < numWaves; waves++) {
      let p = defineAllPoints(width, height);
      
      console.dir(p);
    
      // Start
      let stringData = startPoint(p.xL, p.yMid);
    
      // Make a wave
      stringData += smoothFullControlledClosedCurveTo(p.xMid, p.y1, p.cx1, p.cy1, p.cx2, p.cy1);
      stringData += smoothControlledClosedCurveTo(p.xR, p.yMid, p.cx4, p.cy2);
    
      // Reverse the wave
      stringData += smoothFullControlledClosedCurveTo(p.xMid, p.y2, p.cx4, p.cy3, p.cx3, p.cy3);
      stringData += smoothControlledClosedCurveTo(p.xL, p.yMid, p.cx1, p.cy4);
    
    
      let myPath = draw.path(stringData);
    
      myPath.fill(getRandomArrayElement(colors));
      myPath.opacity(1);
    
      myPath.stroke({
        color: '#000',
        width: 1
      });
    
      myPath.addClass('wave');
    }
    
    draw.find('.wave').each(el => {
      if (coinFlip()) {
        el.backward();
      } else if (coinFlip()) {
        el.back();
      }
    })
    
  • URL: /components/raw/paths-8/paths-8.js
  • Filesystem Path: components/03-svgjs/05-paths/08-paths-8/paths-8.js
  • Size: 3.4 KB
  • Content:
    #paths-8 {
      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-8/paths-8.scss
  • Filesystem Path: components/03-svgjs/05-paths/08-paths-8/paths-8.scss
  • Size: 222 Bytes

No notes defined.