<!-- Plant designs from <a href='https://fr.freepik.com/vecteurs/fleur'>Fleur vecteur créé par pch.vector - fr.freepik.com</a> -->
<button>Reload</button>
<div class="container">
  <svg viewBox="0 0 660 660">
    <defs>
      <g id="butterfly">
        <path d="M126.12,77.49c-4.13-3.3-4.05-12.1-8.05-15.42-9.94-8.24-22.7-2.08-31.72-.78,1.48-5.11,9.56-8,13.35-11.7,4-4,8.21-8.39,9.45-13.94,2.52-11.35-2.66-26.17-12.69-32.33C85.73-3.27,74.28.4,68.15,10.35c-3.19,5.18-13.82,24.86-6.05,44C48.48,37.7,25.17,38.52,19,39.1,7.32,40.19-1,48.82.11,61.36c1.08,11.73,12.06,22.93,23.35,25.7,5.53,1.36,11.32-.43,16.69-2.29,5-1.74,11.16-7.72,16.41-6.78C51.39,85.5,40.22,94.21,43.2,106.77c1.2,5,9.12,8.89,10.26,14,3.62,16.39-1.15,29.09,1.66,29.22,4.61.55,5.28-31.12,16.1-38.25,10.11-6.67,14.85-11.43,11.07-24.33.21.22.42.44.64.65,10.19,9.65,16.58,7.52,27.22,1.3,11.18-6.53,39.87,6.9,41.42,2.52C152.7,89.36,139.2,88,126.12,77.49Z" fill="#4d65a7" />
        <path d="M71.22,111.79c-10.82,7.13-11.49,38.8-16.1,38.25-2.81-.13,2-12.83-1.66-29.22-1.14-5.16-9.06-9-10.26-14a18.29,18.29,0,0,1,1.29-12.06c.57,2.84.64,6.74,1.39,8.11,2.29,4.23,8.41,1.84,9.68,7,.42,1.67-.39,4.6,2,5.2,1.91.49,4.13-2.29,5.2-3.49,3.25-3.63,6.47-3.66,10.37-5.9,2.13-1.22,3.49-2,4.64-4.22.73-1.41,1.8-4.77,4.24-3.46a2.17,2.17,0,0,1,1,1.45C81.61,104.32,77.43,107.69,71.22,111.79ZM23.46,87.06c5.53,1.36,11.32-.43,16.69-2.29,3.49-1.21,7.5-4.45,11.38-6l0-.1c-6.16-.07-11.77,2-17.8,1.35-3-.31-5.4,1.47-8.3,1.09a7.78,7.78,0,0,1-6.61-5.57C18,73,18,71.91,15.31,70.92s-4.37-.84-5.53-3.69-1.3-3.77-3.26-6S4.33,56.84,5.16,54A21.64,21.64,0,0,1,16.42,40.81,34.53,34.53,0,0,1,20.89,39c-.76,0-1.42.09-1.94.14C7.32,40.19-1,48.82.11,61.36,1.19,73.09,12.17,84.29,23.46,87.06Zm-7.78-37.9c-2.63,1.12-4.75,5.29-1.55,6.93,2.69,1.38,8.34,1.84,9.28-1.91C24.94,48,18.84,46.88,15.68,49.16Zm94.47,40.25c11.18-6.53,39.87,6.9,41.42,2.52,1.13-2.57-12.37-3.92-25.45-14.44-4.13-3.3-4.05-12.1-8.05-15.42a18.38,18.38,0,0,0-11.38-4.19c2.29,1.78,5.76,3.57,6.66,4.85,2.77,3.93-2.09,8.35,1.93,11.76,1.31,1.11,4.29,1.68,3.77,4.11-.42,1.93-3.89,2.69-5.44,3.12-4.69,1.3-6.15,4.17-9.88,6.67-2,1.38-3.36,2.24-5.84,2.29-1.59,0-5.08-.49-5,2.28a2.18,2.18,0,0,0,.85,1.55C98.85,95.42,103.73,93.17,110.15,89.41ZM96.46,3.32C85.73-3.27,74.28.4,68.15,10.35c-.27.44-.61,1-1,1.67A33.45,33.45,0,0,1,70.8,8.84,21.58,21.58,0,0,1,87.62,4.59c2.91.52,4.83,1.76,5.91,4.44s2,3.36,3.9,5.56,1.16,3.81.86,6.6.68,3.35,2.57,5.21a7.79,7.79,0,0,1,2.06,8.4c-1,2.76-3.62,4.16-4.66,7-2.11,5.68-6.43,9.81-9.09,15.36l.1,0c3.12-2.79,7.8-5,10.43-7.54,4-4,8.21-8.39,9.45-13.94C111.67,24.3,106.49,9.48,96.46,3.32ZM79.7,21c3.77.83,5.87-4.44,5.82-7.47,0-3.59-4.73-3.54-6.9-1.68C75.18,13.7,73.5,19.67,79.7,21Zm.84,59.82c-2.57-3.47-4.8-6.39-6.46-10.39a96.28,96.28,0,0,0-5.54-11c-1.8-3.16-2.17-7.25-4.73-10-1.9-2.07-3.89-2.36-5.34-1.71a2.11,2.11,0,0,0-.84.53,3.75,3.75,0,0,0-1.08,1.52,5.89,5.89,0,0,0-.76,2.64c.09,2,2.11,4.12,3.27,5.71,3.3,4.52,6.53,9,9.85,13.56,2.82,3.84,5.71,7.49,8.54,11.32,1.64,2.22,4.6,8.24,7.29,8.81C85.92,88.69,82.41,83.36,80.54,80.84Z" fill="#231f20" />
      </g>
      <g id="flower2">
        <g class="flowerInside">
          <path d="M77.83,90.52C59.28,82.28,41.15,61.45,31.21,43.89,24.51,32,20.8,19.18,14.56,7.26c-3.24-6.2-9.43-9.73-12.21-.88-1.89,6,.65,11.7,4.19,16.91,2.09,4.17,4.29,7.85,5,9.58,4.71,11.12,9,23.42,11.36,35.45a188.87,188.87,0,0,1,3.34,36.57c0,9.24-2.53,20.07-.32,29.19,3.87,16,10.35-3.73,15.08-2.25,3.81,1.2,3.82,9.62,8.9,11.17s8.57-2.33,9.52-6.53-3.25-9.64,3.59-8c4.5,1.07,4.46,6.34,10,6,14.55-.95,3.07-16.14,2.15-22.07,7.46-1.49,21.59,12.06,22.4-4.71C98.11,96.37,85.9,94.1,77.83,90.52Z" fill="#e03e26" />
          <path d="M90.73,98.26c-9.6,1-1.39,5.37-2.75,10.13-2,6.92-8.47-.64-12.49,2s.53,8.39-4.22,11.59c-4.27,2.87-7.86-1.82-12.3-.18-5.32,2-4.15,7.52-7.68,10.69-5.24,4.7-4.35-1.37-8.69-3.44-3.92-1.87-2.41,0-5.54.83-.55.15-.83,2.4-1.54,2.54-2,.41-1.93-1.65-3.18-1.84-2-.31-2.12-3-5.12-1.69a3,3,0,0,0-1.59,1.72v-.26c0,.16-.07.34-.11.52a7,7,0,0,0-.32,1.56c-.72,3.8-1.09,8.48,2.86,10.46,5.68,2.86,8.49-3.94,11.11-7.19,3.7,4.09,2.26,9,9.2,8.91s7.84-4.79,10.14-9.38c3.36-6.72,2.69-3.46,8.43-.47,4.13,2.15,10.46,1.82,13.65-2.33,3.64-4.73-2-9-.14-13.19s7.84,1.41,12.16.06C101.15,116.58,101.74,97.05,90.73,98.26Z" fill="#a02721" />
          <path d="M8.81,28.35C3.93,22.68-1.85,13.84.82,6c3.75-11,11.62-4.61,15.44,1.83,2.47,4.15,9.54,16.94,7.37,22-2,4.64-16.1.19-16.44-4.29Z" fill="#497b39" />
        </g>
      </g>
      <g id="flower">
        <g class="flowerInside">
          <path d="M74.51,59.24C58.34,55.85,40.35,42.37,29.44,30.08,22.07,21.79,16.92,12.2,9.92,3.77,6.29-.61.76-2.36.05,5.16c-.48,5.09,2.52,9.2,6.22,12.75,2.38,2.95,4.76,5.51,5.63,6.76A149.85,149.85,0,0,1,27,51a154.28,154.28,0,0,1,8.9,28.54c1.57,7.36,1.42,16.41,4.73,23.29,5.82,12.09,7.61-4.74,11.62-4.37,3.24.31,4.69,7,9,7.38s6.43-3.32,6.47-6.83-4.24-7.12,1.49-7c3.76.09,4.63,4.29,9,3.06,11.42-3.24-.31-13.38-2.06-17.94,5.68-2.47,19.25,5.91,17-7.58C91.66,60.43,81.55,60.71,74.51,59.24Z" fill="#e03e26" />
          <path d="M49.44,73.79c-.82-6.25-7.24-1-7.9,3.29-.33,2.21,1.62,5.12,1.07,7.18-.91,3.36-2.88,3.14-4.9,5.3-5.62,6-7.47,23.86,6.09,20.14,3.81-1,4.51-7.8,9.47-6.62,5.34,1.28,3.38,9.72,11.08,9.13,6.87-.53,5.76-6.21,8.08-10.79,1.72-3.4-1.12-2.68,3.49-2.86,3.08-.12,4.5,2,7.75.87,11-3.84,1.83-13.9-1.18-19,4.22-2.78,9.82.53,13.92-2.8,3.35-2.72,3.4-9.4,1.37-13.18-4.22-7.85-23.21.27-18.48-9.31C66,48.86,69.67,68.39,62,67.38c-4.64-.61-3.53-8.54-10.36-3.62-4.15,3-3.65,7.2-2,11.35Z" fill="#a02721" />

        </g>
      </g>
      <g id="leaf">
        <g class="leafInside">
          <path d="M33.79,11.83c-7.76-.91-14.95,3.09-21.07,7.42-3.16,2.24-6.61,4.47-8.87,7.68S1,34.05.53,37.8A46.28,46.28,0,0,0,.64,52.47a2.52,2.52,0,0,0,3.08,1.75,2.55,2.55,0,0,0,1.74-3.07,42.38,42.38,0,0,1,.2-14.21,21.23,21.23,0,0,1,1.48-5.72,13.16,13.16,0,0,1,4.06-4.68c6.36-5,14.07-10.71,22.59-9.71a2.51,2.51,0,0,0,2.5-2.5,2.56,2.56,0,0,0-2.5-2.5Z" fill="#72bf44" />
          <path d="M22.09,29.82c2,5.71,6.11,10.94,11.81,13,8.17,2.93,17-1.16,25.25-3.69,9.81-3,20.48-3.8,30.34-1s18.78,9.63,23,19A64.47,64.47,0,0,0,46.15,0C27.49.71,15.44,10.77,22.09,29.82Z" fill="#72bf44" />
        </g>
      </g>
      <g id="leaf2">
        <g class="leafInside">
          <path d="M5.64,38.58c1.72-2.72,3.49-3,5.94-4.5a30.84,30.84,0,0,1,3.61-1.93c.65-.29,1.3-.56,2-.81L18,31l.48-.15a2.33,2.33,0,0,0,1.68-.09,2.49,2.49,0,0,0,1.44-2,2.2,2.2,0,0,0-1-2.05,4.28,4.28,0,0,0-4.24-.24c-.83.28-1.69.61-2.52,1A37.5,37.5,0,0,0,9,30C-2.16,36.94.85,38.42.62,51.68a2.46,2.46,0,0,0,2,2.59,2.3,2.3,0,0,0,1.1-.1,2.41,2.41,0,0,0,.78-.44,2.11,2.11,0,0,0,.78-1.59S3.92,41.3,5.64,38.58Z" transform="translate(-0.42 -0.12)" fill="#6fba44" />
          <path d="M15.81,7.3a22.73,22.73,0,0,1,19.63-7c2.45.37,4.85,1.14,7.32,1.36A55.84,55.84,0,0,0,50,1.55c13-.41,25.54,5.63,36.8,12.63a209.31,209.31,0,0,1,20.11,14.23c2.81,2.25,5.72,4.81,6.63,8.36-5.56-3.57-12.75-2-18.74.59s-11.94,6-18.44,5.8C72.18,43,68,41.43,64,42.51c-5,1.36-8.1,6.49-12.28,9.7-5.6,4.31-13,5-20,4.76-5-.18-10.14-.82-14.43-3.51s-7.47-7.9-6.54-13c.65-3.53,2.33-6,1.43-9.62-.5-2-2.22-3.5-2.63-5.64C8.32,19.08,11.86,11.54,15.81,7.3Z" transform="translate(-0.42 -0.12)" fill="#72bf44" />
          <path d="M50.49,20.85A120.41,120.41,0,0,1,98,29.79,7.44,7.44,0,0,0,87.7,31.6,9.32,9.32,0,0,1,86,34a5.3,5.3,0,0,1-3.56.7c-3.83-.21-7.66-.73-11.49-.57s-7.75,1.06-10.81,3.44c-1.67,1.29-3.09,3-5,3.78-3.52,1.37-7.63-.8-11.21.41-4,1.36-6.08,6.54-10.2,7.51a10.92,10.92,0,0,1-5.41-.54c-2.46-.7-5.33-2-5.75-4.57-.21-1.27.18-2.8-.71-3.71-.61-.61-1.55-.63-2.33-1C16.6,38.2,16.26,32.49,17.59,30c1.59-3,6.51-4.33,9.39-5.37A72.79,72.79,0,0,1,50.49,20.85Z" transform="translate(-0.42 -0.12)" fill="#82c447" />
        </g>
      </g>
    </defs>
    <g class="paths"></g>
    <g class="leaves"></g>
  </svg>
</div>
body {
  margin: 0;
  background: #998CEB;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px;
  box-sizing: border-box;
}
.container {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
}
canvas {
  width: 100% !important;
  height: auto !important;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
}
rect {
  fill: black;
  stroke: none; 
}
svg {
  position: absolute;
  top: 0;
  left: 0;
  filter: drop-shadow(0px 0px 4px rgba(0, 150, 100, 0.6));
  stroke-width: 4;
  fill: none;
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.paths path {
  stroke: #bbe251;
}
.leaves {
  stroke: none;
}

g.leafInside {
  transform: translateY(-100%) translate(-2px, 4px);
  transform-box: fill-box;
  &.flip {
    transform: translateY(-100%) translate(-2px, 4px) scaleX(-1); 
  }
}
button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 2;
  background: none;
  border: none;
  padding: 5px 20px;
  color: white;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: 0.25s ease-out;
  &:hover {
    letter-spacing: 0.15em;
  }
}
View Compiled
console.clear();
const scale = window.innerWidth > 700 ? 40 : 20;
let _w = Math.min(window.innerWidth, window.innerHeight) - 80;
_w = Math.min(_w, 1000);
_w = _w - (_w % scale);
let _h = _w;
document.querySelector('.container').style.width = _w + 'px';

let grid = [];
let paths = [];
const svg = document.querySelector('svg');
const svgGroup = document.querySelector('.paths');
const svgLeaves = document.querySelector('.leaves');
const xmlns = 'http://www.w3.org/2000/svg';
svg.setAttribute('viewBox', `0 0 ${_w} ${_w}`);


function reset () {
  _w = Math.min(window.innerWidth, window.innerHeight) - 80;
  _w = Math.min(_w, 1000);
  _w = _w - (_w % scale);
  _h = _w;
  document.querySelector('.container').style.width = _w + 'px';
  grid = [];
  paths = [];
  
  gsap.killTweensOf('*');
  
  safe = 4000;
  tempPath = [];
  
  svgGroup.innerHTML = '';
  svgLeaves.innerHTML = '';
  magic();
}
document.querySelector('button').addEventListener('click', () => {
  reset();
});
function setup () {
  let c = createCanvas(_w, _h);
  c.parent(document.querySelector('.container'));
  document.querySelector('main').remove();
  magic();
}

function magic () {
  for (let y = 0; y < _h; y+=scale) {
    let row = [];
    for (let x = 0; x < _w; x+=scale) {
      row.push({
        color: random(255),
        x: x,
        y: y,
        from: null,
        to: null
      });
    }
    grid.push(row);
  }
  
  startWalking(Math.floor(Math.random() * grid.length), Math.floor(Math.random() * grid[0].length));
  svgGroup.innerHTML = '';
  paths.forEach(p => {
    renderSVG(p);
  });
  gsap.set('.paths path', {
    strokeDashoffset: (i, path) => {
      return path.getTotalLength();
    },
    strokeDasharray: (i, path) => {
      return path.getTotalLength();
    }
  });
  document.querySelectorAll('.paths path').forEach(p => {
    p.lastImg = -1;
    p.length = p.getTotalLength();
    gsap.to(p, {
      strokeDashoffset: 0,
      onUpdate: function () {
        const offset = parseFloat(p.style.strokeDashoffset);
        if (p.lastImg !== -1 && p.lastImg - offset < 20) {
          return;
        }
        if (Math.random() > 0.93) {
          addOneLeaf(p.getPointAtLength(p.length - offset));
          p.lastImg = offset;
        }
        if (Math.random() > 0.992) {
          addOneFlower(p.getPointAtLength(p.length - offset));
          p.lastImg = offset;
        }
        if (Math.random() > 0.997) {
          addOneButterfly(p.getPointAtLength(p.length - offset));
          p.lastImg = offset;
        }
      },
      duration: (i, path) => {
        return (Math.random() * 0.6 + 0.4) * (path.getTotalLength() * 0.02)
      },
      delay: () => {
        return Math.random() * 4
      }
    });
  })
  
  clear();
  renderGrid();
}

let safe = 4000;
let tempPath = [];
function startWalking (row, col) {
  const cell = grid[row][col];
  safe--;
  if (safe < 0) {
    return;
  }
  // If the element is already moving to somewhere, return
  if (cell.stuck) {
    return;
  };
  // If four directions are not available, return from new place
  if (
    ((!grid[row - 1] || grid[row - 1][col].from !== null) &&
    (!grid[row + 1] || grid[row + 1][col].from !== null) &&
    (!grid[row][col + 1] || grid[row][col + 1].from !== null) &&
    (!grid[row][col - 1] || grid[row][col - 1].from !== null)) ||
    (cell.to !== null && cell.from !== null)
  ) {
    if (tempPath.length) {
      paths.push(tempPath);
    }
    tempPath = [];
    startWalking(Math.floor(Math.random() * grid.length), Math.floor(Math.random() * grid[0].length));
    cell.stuck = true;
    return;
  };
  
  // Give an angle to the start
  if (cell.from === null) {
    cell.from = random(['top', 'left', 'right', 'bottom']);
    tempPath.push(cell);
  }
  
  let hasWalked = false;
  // Find a direction (top/left/bottom/right);
  const to = random(['top', 'left', 'right', 'bottom'].filter(angle => angle !== cell.from));
  cell.to = to;
  // Check if top cell is available
  if (to === 'top') {
    if (grid[row - 1] && grid[row - 1][col].from === null && grid[row - 1][col].to === null) {
      grid[row - 1][col].from = 'bottom';
      tempPath.push(grid[row - 1][col]);
      startWalking(row - 1, col);
      hasWalked = true;
    }
  }
  // Check if bottom cell is available
  if (to === 'bottom') {
    if (grid[row + 1] && grid[row + 1][col].from === null && grid[row + 1][col].to === null) {
      grid[row + 1][col].from = 'top';
      tempPath.push(grid[row + 1][col]);
      startWalking(row + 1, col);
      hasWalked = true;
    }
  }
  // Check if right cell is available
  if (to === 'right') {
    if (grid[row][col + 1] && grid[row][col + 1].from === null && grid[row][col + 1].to === null) {
      grid[row][col + 1].from = 'left';
      tempPath.push(grid[row][col + 1]);
      startWalking(row, col + 1);
      hasWalked = true;
    }
  }
  // Check if left cell is available
  if (to === 'left') {
    if (grid[row][col - 1] && grid[row][col - 1].from === null && grid[row][col - 1].to === null) {
      grid[row][col - 1].from = 'right';
      tempPath.push(grid[row][col - 1]);
      startWalking(row, col - 1);
      hasWalked = true;
    }
  }
  if (!hasWalked) {
    cell.to = null;
    startWalking(row, col);
  }
}

function renderGrid () {
  fill(255);
  stroke(0);
  strokeWeight(1);
  grid.forEach(row => {
    row.forEach(cell => {
      square(cell.x, cell.y, scale);
    });
  })
}

function renderSVG (data) {
  const path = document.createElementNS(xmlns, 'path');
  let d = '';
  let cell = data[0];
  
  if (cell.from === 'left' && cell.to === 'top' ||
      cell.from === 'left' && cell.to === 'right' ||
      cell.from === 'left' && cell.to === 'bottom') {
    d += `M ${cell.x} ${cell.y + scale / 2} `;
  }
  
  if (cell.from === 'right' && cell.to === 'top' ||
      cell.from === 'right' && cell.to === 'left' ||
      cell.from === 'right' && cell.to === 'bottom') {
    d += `M ${cell.x + scale} ${cell.y + scale / 2} `;
  }
  
  if (cell.from === 'top' && cell.to === 'bottom' ||
      cell.from === 'top' && cell.to === 'right' ||
      cell.from === 'top' && cell.to === 'left') {
    d += `M ${cell.x + scale / 2} ${cell.y} `;
  }
  
  if (cell.from === 'bottom' && cell.to === 'top' ||
      cell.from === 'bottom' && cell.to === 'right' ||
      cell.from === 'bottom' && cell.to === 'left') {
    d += `M ${cell.x + scale / 2} ${cell.y + scale} `;
  }
  
  
  data.forEach((cell, i) => {
    if (cell.from === 'left' && cell.to === 'right') {
      d += `l ${scale} ${0} `;
    } else if (cell.from === 'right' && cell.to === 'left') {
      d += `l ${-scale} ${0} `;
    } else if (cell.from === 'top' && cell.to === 'bottom') {
      d += `l ${0} ${scale} `;
    } else if (cell.from === 'bottom' && cell.to === 'top') {
      d += `l ${0} ${-scale} `;
    } else if (cell.from === 'top' && cell.to === 'left') {
      d += `a ${scale/2} ${scale/2} 0 0 1 ${-scale/2} ${scale/2} `;
    } else if (cell.from === 'left' && cell.to === 'top') {
      d += `a ${scale/2} ${scale/2} 0 0 0 ${scale/2} ${-scale/2} `; 
    } else if (cell.from === 'top' && cell.to === 'right') {
      d += `a ${scale/2} ${scale/2} 0 0 0 ${scale/2} ${scale/2} `;
    } else if (cell.from === 'right' && cell.to === 'top') {
      d += `a ${scale/2} ${scale/2} 0 0 1 ${-scale/2} ${-scale/2} `; 
    } else if (cell.from === 'bottom' && cell.to === 'left') {
      d += `a ${scale/2} ${scale/2} 0 0 0 ${-scale/2} ${-scale/2} `;
    } else if (cell.from === 'left' && cell.to === 'bottom') {
      d += `a ${scale/2} ${scale/2} 0 0 1 ${scale/2} ${scale/2} `; 
    }else if (cell.from === 'bottom' && cell.to === 'right') {
      d += `a ${scale/2} ${scale/2} 0 0 1 ${scale/2} ${-scale/2} `;
    } else if (cell.from === 'right' && cell.to === 'bottom') {
      d += `a ${scale/2} ${scale/2} 0 0 0 ${-scale/2} ${scale/2} `;
    }
  });
  path.setAttribute('d', d);
  svgGroup.appendChild(path);
}

function addOneLeaf (coords) {
  // Add Leaf
  const group = document.querySelector(Math.random() > 0.5 ? '#leaf' : '#leaf2').cloneNode(true);
  let flip = Math.random() > 0.5;
  if (flip) {
    group.children[0].classList.add('flip');
  }

  gsap.set(group, {
    x: coords.x,
    y: coords.y,
    scale: 0,
    rotate: Math.random() * 180,
    transformOrigin: flip ? `100% 98%` : `2% 93%`
  });
  gsap.to(group, {
    scale: Math.random() * 0.4 + 0.05,
    duration: Math.random() * 1 + 0.5
  });
  svgLeaves.appendChild(group);
}

function addOneFlower (coords) {
  // Add Leaf
  const group = document.querySelector(Math.random() > 0.5 ? '#flower' : '#flower2').cloneNode(true);
  let flip = Math.random() > 0.5;
  if (flip) {
    group.children[0].classList.add('flip');
  }

  gsap.set(group, {
    x: coords.x,
    y: coords.y,
    scale: 0,
    rotate: Math.random() * 180,
    transformOrigin: 'top left'
  });
  gsap.to(group, {
    scale: Math.random() * 0.2 + 0.15,
    duration: Math.random() * 1 + 0.5
  });
  svgLeaves.appendChild(group);
}

function addOneButterfly (coords) {
  // Add Leaf
  const group = document.querySelector('#butterfly').cloneNode(true);
  let flip = Math.random() > 0.5;
  if (flip) {
    group.children[0].classList.add('flip');
  }

  gsap.set(group, {
    x: coords.x - (151.64 / 2),
    y: coords.y - (150.04 / 2),
    scale: 0,
    rotate: Math.random() * 360,
    transformOrigin: 'center'
  });
  gsap.to(group, {
    scale: Math.random() * 0.25 + 0.12,
    duration: Math.random() * 1 + 0.5
  });
  svgLeaves.appendChild(group);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js
  2. https://unpkg.co/gsap@3/dist/gsap.min.js