p5+gsap实现树叶树枝生长长满格子动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：p5+gsap实现树叶树枝生长长满格子动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
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;
}
g.leafInside.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;
}
button:hover {
  letter-spacing: 0.15em;
}
</style>


</head>

<body>

<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>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.8.0.js"></script>
      <script >
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 = &#.........完整代码请登录后点击上方下载按钮下载查看