圣诞 HTML 代码汇总

news2024/11/23 20:23:18

文章目录

  • Part.I 音效圣诞树
  • Part.II 圣诞树小球
  • Part.III 简笔圣诞树

圣诞节快到了,在网上找了一些 html 代码,觉得挺有意思的,顺带分享一下~

Part.I 音效圣诞树

来源:https://blog.csdn.net/m0_73309780/article/details/128176149


效果如下:
在这里插入图片描述

源码如下,使用方法:将下面的源码贴到txt中将后缀改为html,用浏览器打开html即可。可以更改文字内容,歌曲的话更改也不是不可以,但是音乐源不知道怎么找,是通过loadAudio(i)下载音乐的。

<!DOCTYPE html>
<html lang="en" >
<head>
 <meta charset="UTF-8">

 <title></title>

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

 <style>
  * 
  {
   box-sizing: border-box;
  }


  body 
  {
   margin: 0;
   height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #161616;
   color: #c5a880;
   font-family: sans-serif;
  }


  label
  {
   display: inline-block;
   background-color: #161616;
   padding: 16px;
   border-radius: 0.3rem;
   cursor: pointer;
   margin-top: 1rem;
   width: 300px;
   border-radius: 10px;
   border: 1px solid #c5a880;
   text-align: center;
  }


  ul 
  {
   list-style-type: none;
   padding: 0;
   margin: 0;
  }

  .btn
  {
   background-color: #161616;
   border-radius: 10px;
   color: #c5a880;
   border: 1px solid #c5a880;
   padding: 16px;
   width: 300px;
   margin-bottom: 16px;
   line-height: 1.5;
   cursor: pointer;
  }
  .separator
  {
   font-weight: bold;
   text-align: center;
   width: 300px;
   margin: 16px 0px;
   color: #a07676;
  }


  .title 
  {
   color: #a07676;
   font-weight: bold;
   font-size: 1.25rem;
   margin-bottom: 16px;
  }


  .text-loading 
  {
   font-size: 2rem;
  }
 </style>

 <script>
  window.console = window.console || function(t) {};
 </script>

 <script>
  if (document.location.search.match(/type=embed/gi)) {
   window.parent.postMessage("resize", "*");
  }
 </script>


</head>

<body translate="no" >
 <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script>

 <div id="overlay">
  <ul>
   <li class="title">请选择音乐</li>
   <li>
    <button class="btn" id="btnA" type="button">
     Snowflakes Falling Down by Simon Panrucker
    </button>
   </li>
   <li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li>
   <li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li>
   <li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li>
   <li class="separator">或者</li>
   <li>
    <input type="file" id="upload" hidden />
    <label for="upload">Upload File</label>
   </li>
  </ul>
 </div>

 <script id="rendered-js" >
  const { PI, sin, cos } = Math;
  const TAU = 2 * PI;

  const map = (value, sMin, sMax, dMin, dMax) => {
   return dMin + (value - sMin) / (sMax - sMin) * (dMax - dMin);
  };

  const range = (n, m = 0) =>
  Array(n).
  fill(m).
  map((i, j) => i + j);

  const rand = (max, min = 0) => min + Math.random() * (max - min);
  const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min));
  const randChoise = arr => arr[randInt(arr.length)];
  const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)];

  let scene, camera, renderer, analyser;
  let step = 0;
  const uniforms = {
   time: { type: "f", value: 0.0 },
   step: { type: "f", value: 0.0 } };

   const params = {
    exposure: 1,
    bloomStrength: 0.9,
    bloomThreshold: 0,
    bloomRadius: 0.5 };

    let composer;

    const fftSize = 2048;
    const totalPoints = 4000;

    const listener = new THREE.AudioListener();

    const audio = new THREE.Audio(listener);

    document.querySelector("input").addEventListener("change", uploadAudio, false);

    const buttons = document.querySelectorAll(".btn");
    buttons.forEach((button, index) =>
     button.addEventListener("click", () => loadAudio(index)));


    function init() {
     const overlay = document.getElementById("overlay");
     overlay.remove();

     scene = new THREE.Scene();
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);

     camera = new THREE.PerspectiveCamera(
      60,
      window.innerWidth / window.innerHeight,
      1,
      1000);

     camera.position.set(-0.09397456774197047, -2.5597086635726947, 24.420789670889008);
     camera.rotation.set(0.10443543723052419, -0.003827152981119352, 0.0004011488708739715);

     const format = renderer.capabilities.isWebGL2 ?
     THREE.RedFormat :
     THREE.LuminanceFormat;

     uniforms.tAudioData = {
      value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format) };


      addPlane(scene, uniforms, 3000);
      addSnow(scene, uniforms);

      range(10).map(i => {
       addTree(scene, uniforms, totalPoints, [20, 0, -20 * i]);
       addTree(scene, uniforms, totalPoints, [-20, 0, -20 * i]);
      });

      const renderScene = new THREE.RenderPass(scene, camera);

      const bloomPass = new THREE.UnrealBloomPass(
       new THREE.Vector2(window.innerWidth, window.innerHeight),
       1.5,
       0.4,
       0.85);

      bloomPass.threshold = params.bloomThreshold;
      bloomPass.strength = params.bloomStrength;
      bloomPass.radius = params.bloomRadius;

      composer = new THREE.EffectComposer(renderer);
      composer.addPass(renderScene);
      composer.addPass(bloomPass);

      addListners(camera, renderer, composer);
      animate();
     }

     function animate(time) {
      analyser.getFrequencyData();
      uniforms.tAudioData.value.needsUpdate = true;
      step = (step + 1) % 1000;
      uniforms.time.value = time;
      uniforms.step.value = step;
      composer.render();
      requestAnimationFrame(animate);
     }

     function loadAudio(i) {
      document.getElementById("overlay").innerHTML =
      '<div class="text-loading">正在下载音乐,请稍等...</div>';
      const files = [
      "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3",
      "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3",
      "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",
      "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"];

      const file = files[i];

      const loader = new THREE.AudioLoader();
      loader.load(file, function (buffer) {
       audio.setBuffer(buffer);
       audio.play();
       analyser = new THREE.AudioAnalyser(audio, fftSize);
       init();
      });


     }


     function uploadAudio(event) {
      document.getElementById("overlay").innerHTML =
      '<div class="text-loading">请稍等...</div>';
      const files = event.target.files;
      const reader = new FileReader();

      reader.onload = function (file) {
       var arrayBuffer = file.target.result;

       listener.context.decodeAudioData(arrayBuffer, function (audioBuffer) {
        audio.setBuffer(audioBuffer);
        audio.play();
        analyser = new THREE.AudioAnalyser(audio, fftSize);
        init();
       });
      };

      reader.readAsArrayBuffer(files[0]);
     }

     function addTree(scene, uniforms, totalPoints, treePosition) {
      const vertexShader = `
      attribute float mIndex;
      varying vec3 vColor;
      varying float opacity;
      uniform sampler2D tAudioData;

      float norm(float value, float min, float max ){
       return (value - min) / (max - min);
      }
      float lerp(float norm, float min, float max){
       return (max - min) * norm + min;
      }

      float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){
       return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
      }


      void main() {
       vColor = color;
       vec3 p = position;
       vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
       float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r;
       float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 );
       float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0);
       opacity = map(mvPosition.z , -200.0, 15.0, 0.0, 1.0);
       gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z );
       gl_Position = projectionMatrix * mvPosition;
      }
      `;
      const fragmentShader = `
      varying vec3 vColor;
      varying float opacity;
      uniform sampler2D pointTexture;
      void main() {
       gl_FragColor = vec4( vColor, opacity );
       gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); 
      }
      `;
      const shaderMaterial = new THREE.ShaderMaterial({
       uniforms: {
        ...uniforms,
        pointTexture: {
         value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) } },


         vertexShader,
         fragmentShader,
         blending: THREE.AdditiveBlending,
         depthTest: false,
         transparent: true,
         vertexColors: true });


      const geometry = new THREE.BufferGeometry();
      const positions = [];
      const colors = [];
      const sizes = [];
      const phases = [];
      const mIndexs = [];

      const color = new THREE.Color();

      for (let i = 0; i < totalPoints; i++) {
       const t = Math.random();
       const y = map(t, 0, 1, -8, 10);
       const ang = map(t, 0, 1, 0, 6 * TAU) + TAU / 2 * (i % 2);
       const [z, x] = polar(ang, map(t, 0, 1, 5, 0));

       const modifier = map(t, 0, 1, 1, 0);
       positions.push(x + rand(-0.3 * modifier, 0.3 * modifier));
       positions.push(y + rand(-0.3 * modifier, 0.3 * modifier));
       positions.push(z + rand(-0.3 * modifier, 0.3 * modifier));

       color.setHSL(map(i, 0, totalPoints, 1.0, 0.0), 1.0, 0.5);

       colors.push(color.r, color.g, color.b);
       phases.push(rand(1000));
       sizes.push(1);
       const mIndex = map(i, 0, totalPoints, 1.0, 0.0);
       mIndexs.push(mIndex);
      }

      geometry.setAttribute(
       "position",
       new THREE.Float32BufferAttribute(positions, 3).setUsage(
        THREE.DynamicDrawUsage));


      geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
      geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
      geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
      geometry.setAttribute("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1));

      const tree = new THREE.Points(geometry, shaderMaterial);

      const [px, py, pz] = treePosition;

      tree.position.x = px;
      tree.position.y = py;
      tree.position.z = pz;

      scene.add(tree);
     }

     function addSnow(scene, uniforms) {
      const vertexShader = `
      attribute float size;
      attribute float phase;
      attribute float phaseSecondary;

      varying vec3 vColor;
      varying float opacity;


      uniform float time;
      uniform float step;

      float norm(float value, float min, float max ){
       return (value - min) / (max - min);
      }
      float lerp(float norm, float min, float max){
       return (max - min) * norm + min;
      }

      float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){
       return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
      }
      void main() {
       float t = time* 0.0006;

       vColor = color;

       vec3 p = position;

       p.y = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0);

       p.x += sin(t+phase);
       p.z += sin(t+phaseSecondary);

       opacity = map(p.z, -150.0, 15.0, 0.0, 1.0);

       vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );

       gl_PointSize = size * ( 100.0 / -mvPosition.z );

       gl_Position = projectionMatrix * mvPosition;

      }
      `;

      const fragmentShader = `
      uniform sampler2D pointTexture;
      varying vec3 vColor;
      varying float opacity;

      void main() {
       gl_FragColor = vec4( vColor, opacity );
       gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); 
      }
      `;
      function createSnowSet(sprite) {
       const totalPoints = 300;
       const shaderMaterial = new THREE.ShaderMaterial({
        uniforms: {
         ...uniforms,
         pointTexture: {
          value: new THREE.TextureLoader().load(sprite) } },


          vertexShader,
          fragmentShader,
          blending: THREE.AdditiveBlending,
          depthTest: false,
          transparent: true,
          vertexColors: true });


       const geometry = new THREE.BufferGeometry();
       const positions = [];
       const colors = [];
       const sizes = [];
       const phases = [];
       const phaseSecondaries = [];

       const color = new THREE.Color();

       for (let i = 0; i < totalPoints; i++) {
        const [x, y, z] = [rand(25, -25), 0, rand(15, -150)];
        positions.push(x);
        positions.push(y);
        positions.push(z);

        color.set(randChoise(["#f1d4d4", "#f1f6f9", "#eeeeee", "#f1f1e8"]));

        colors.push(color.r, color.g, color.b);
        phases.push(rand(1000));
        phaseSecondaries.push(rand(1000));
        sizes.push(rand(4, 2));
       }

       geometry.setAttribute(
        "position",
        new THREE.Float32BufferAttribute(positions, 3));

       geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
       geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
       geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
       geometry.setAttribute(
        "phaseSecondary",
        new THREE.Float32BufferAttribute(phaseSecondaries, 1));


       const mesh = new THREE.Points(geometry, shaderMaterial);

       scene.add(mesh);
      }
      const sprites = [
      "https://assets.codepen.io/3685267/snowflake1.png",
      "https://assets.codepen.io/3685267/snowflake2.png",
      "https://assets.codepen.io/3685267/snowflake3.png",
      "https://assets.codepen.io/3685267/snowflake4.png",
      "https://assets.codepen.io/3685267/snowflake5.png"];

      sprites.forEach(sprite => {
       createSnowSet(sprite);
      });
     }

     function addPlane(scene, uniforms, totalPoints) {
      const vertexShader = `
      attribute float size;
      attribute vec3 customColor;
      varying vec3 vColor;

      void main() {
       vColor = customColor;
       vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
       gl_PointSize = size * ( 300.0 / -mvPosition.z );
       gl_Position = projectionMatrix * mvPosition;

      }
      `;
      const fragmentShader = `
      uniform vec3 color;
      uniform sampler2D pointTexture;
      varying vec3 vColor;

      void main() {
       gl_FragColor = vec4( vColor, 1.0 );
       gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );

      }
      `;
      const shaderMaterial = new THREE.ShaderMaterial({
       uniforms: {
        ...uniforms,
        pointTexture: {
         value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) } },


         vertexShader,
         fragmentShader,
         blending: THREE.AdditiveBlending,
         depthTest: false,
         transparent: true,
         vertexColors: true });


      const geometry = new THREE.BufferGeometry();
      const positions = [];
      const colors = [];
      const sizes = [];

      const color = new THREE.Color();

      for (let i = 0; i < totalPoints; i++) {
       const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)];
       positions.push(x);
       positions.push(y);
       positions.push(z);

       color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"]));

       colors.push(color.r, color.g, color.b);
       sizes.push(1);
      }

      geometry.setAttribute(
       "position",
       new THREE.Float32BufferAttribute(positions, 3).setUsage(
        THREE.DynamicDrawUsage));


      geometry.setAttribute(
       "customColor",
       new THREE.Float32BufferAttribute(colors, 3));

      geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));

      const plane = new THREE.Points(geometry, shaderMaterial);

      plane.position.y = -8;
      scene.add(plane);
     }

     function addListners(camera, renderer, composer) {
      document.addEventListener("keydown", e => {
       const { x, y, z } = camera.position;
       console.log(`camera.position.set(${x},${y},${z})`);
       const { x: a, y: b, z: c } = camera.rotation;
       console.log(`camera.rotation.set(${a},${b},${c})`);
      });

      window.addEventListener(
       "resize",
       () => {
        const width = window.innerWidth;
        const height = window.innerHeight;

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        renderer.setSize(width, height);
        composer.setSize(width, height);
       },
       false);

     }
</script>
</body>
</html>

Part.II 圣诞树小球

来源:https://juejin.cn/post/7042544790562406408

首先看效果:
在这里插入图片描述
这个代码原链接已经给了,直接将style标签复制到head标签里面就可以了。更改文字可以通过搜索来找到改文字的位置。
在这里插入图片描述

Part.III 简笔圣诞树

来源:https://codepen.io/chrisgannon/pen/dypvKvR

首先看效果
在这里插入图片描述
完整代码如下:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Merry Christmas Tree!</title>
  <!-- <link rel="stylesheet" href="./style.css"> -->
  <style>
  
    body 
    {
  background-color:#151522;
  overflow: hidden;
    display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
  width:90%;
  height:90%;
  visibility:hidden;
 
}

.sparkle{
  /* mix-blend-mode:luminosity */
}
  </style>
    
</head>
<body>
<!-- partial:index.partial.html -->
<svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 800 600" >
<defs>
  <circle id="circ" class="particle" cx="0" cy="0" r="1"/>
  <polygon id="star" class="particle" points="4.55,0 5.95,2.85 9.1,3.3 6.82,5.52 7.36,8.65 4.55,7.17 1.74,8.65 2.27,5.52 0,3.3 3.14,2.85 "/>
<polygon id="cross" class="particle"  points="4,3.5 2.5,2 4,0.5 3.5,0 2,1.5 0.5,0 0,0.5 1.5,2 0,3.5 0.5,4 2,2.5 3.5,4 "/>  
<path id="heart" class="particle" d="M2.9,0C2.53,0,2.2,0.18,2,0.47C1.8,0.18,1.47,0,1.1,0C0.49,0,0,0.49,0,1.1
	C0,2.6,1.56,4,2,4s2-1.4,2-2.9C4,0.49,3.51,0,2.9,0z"/>  
 

<radialGradient id="grad" cx="3" cy="3" r="6" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:red"/>
	<stop  offset="0.4" style="stop-color:#334673"/>
	<stop  offset="0.6" style="stop-color:#EDDDC4"/>
	<stop  offset="0.9" style="stop-color:#FEE8C7"/>
	<stop  offset="1" style="stop-color:red"/>
</radialGradient>
  <radialGradient id="dotGrad" cx="0" cy="0" r="50" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:1"/>
	<stop  offset="0.1" style="stop-color:#0867C7;stop-opacity:0.6"/>
	<stop  offset="1" style="stop-color:#081029;stop-opacity:0"/>
</radialGradient>
  
<mask id="treePathMask">
  <path class="treePathMask" fill="none" stroke-width="18" stroke="#FFF" d="M252.9,447.9c0,0-30.8-21.6,33.9-44.7c64.7-23.1,46.2-37,33.9-41.6
    c-12.3-4.6-59.3-11.6-42.4-28.5s114-52.4,81.7-66.2c-32.4-13.9-58.5-10.8-35.4-29.3s66.2-101.7,70.9-115.6
    c4.4-13.2,16.9-18.5,24.7,0c7.7,18.5,44.7,100.1,67.8,115.6c23.1,15.4-10.8,21.6-26.2,24.7c-15.4,3.1-20,33.9,33.9,49.3
    c53.9,15.4,47.8,40.1,27.7,44.7c-20,4.6-63.2,4.6-27.7,32.4s98.6,21.6,61.6,60.1"/>  
  </mask>
  <mask id="treeBottomMask">
<path class="treeBottomMask" stroke="#FFF" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9"/>    
    </mask>
 <mask id="treePotMask">
<path class="treePotMask" stroke="#FFF" stroke-width="8" d="M374.3,502.5c0,0-4.6,20,7.7,29.3c12.3,9.2,40.1,7.7,50.8,0s10.8-23.1,10.8-29.3"/>    
    </mask>
  
    <filter id="glow" x="-150%" y="-150%" width="280%" height="280%">
      <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
      <feGaussianBlur in="offOut" stdDeviation="16" result="blur" />

      <feComponentTransfer>
<feFuncR type="discrete" tableValues="0.8"/>
         <feFuncG type="discrete" tableValues="0.3"/>
         <feFuncB type="discrete" tableValues="0.2"/>
        <!--<feFuncA type="linear" slope="1" intercept="0" />-->
      </feComponentTransfer>

      <feComposite in="SourceGraphic" operator="over" />

    </filter> 
   
</defs>
<g class="whole">
  
  <g class="pContainer" ></g>
  
      <g class="tree" mask="url(#treePathMask)"  >
        <path d="M252.95,447.85a20.43,20.43,0,0,1-5.64-6.24,14,14,0,0,1-1.91-8.22,16.93,16.93,0,0,1,3.06-8,33.16,33.16,0,0,1,5.79-6.28A74.78,74.78,0,0,1,268.54,410a163.48,163.48,0,0,1,15.52-6.84c10.54-3.93,21-8.07,30.72-13.46a80.83,80.83,0,0,0,7-4.37,37.51,37.51,0,0,0,6.13-5.24c1.75-1.92,3.14-4.18,3.25-6.35s-1.12-4.18-3-5.81a25,25,0,0,0-6.72-3.91,61.25,61.25,0,0,0-7.8-2.42c-5.41-1.4-10.91-2.72-16.38-4.32a84.17,84.17,0,0,1-16.2-6.19,28.26,28.26,0,0,1-3.86-2.5,15.06,15.06,0,0,1-3.44-3.63,9,9,0,0,1-1.51-5.47,10.22,10.22,0,0,1,.61-2.78,12.88,12.88,0,0,1,1.2-2.34,26.73,26.73,0,0,1,6.58-6.56c2.35-1.76,4.76-3.33,7.19-4.84,4.87-3,9.82-5.75,14.77-8.46,9.91-5.4,19.88-10.59,29.63-16.08,4.87-2.75,9.68-5.56,14.33-8.56A81.88,81.88,0,0,0,359.45,280a23,23,0,0,0,2.41-2.79,8.36,8.36,0,0,0,1.35-2.65,2.13,2.13,0,0,0-.17-1.7,5.53,5.53,0,0,0-1.88-1.77,13.15,13.15,0,0,0-1.49-.83c-.52-.26-1.1-.49-1.76-.77-1.27-.53-2.55-1-3.83-1.53q-3.86-1.48-7.8-2.77c-5.26-1.74-10.6-3.23-16-4.79-2.72-.79-5.47-1.58-8.29-2.61a31.74,31.74,0,0,1-4.33-1.92,14.39,14.39,0,0,1-2.29-1.53,8.74,8.74,0,0,1-2.22-2.66,7.2,7.2,0,0,1-.78-4,9.09,9.09,0,0,1,1-3.24,18.93,18.93,0,0,1,3-4.21,44.88,44.88,0,0,1,3.29-3.19c.56-.5,1.12-1,1.68-1.45l1.61-1.33a84,84,0,0,0,10.88-11.88,326.2,326.2,0,0,0,18.79-27.53c5.88-9.5,11.48-19.19,16.89-29S380.1,146.16,385,136.13c1.22-2.51,2.42-5,3.57-7.54s2.29-5.09,3.14-7.45l.36-1c.14-.38.26-.75.42-1.12.29-.75.64-1.48,1-2.21a25.51,25.51,0,0,1,2.65-4.21,19.15,19.15,0,0,1,3.76-3.69,13.74,13.74,0,0,1,5.24-2.42,12.11,12.11,0,0,1,6.12.25,14.59,14.59,0,0,1,5,2.79,20.59,20.59,0,0,1,3.47,3.79,30.33,30.33,0,0,1,2.5,4.1c.35.7.7,1.39,1,2.1l.46,1.05.4,1,1.64,3.84,3.39,7.67q6.88,15.32,14.36,30.37c5,10,10.18,19.94,15.69,29.65a274.94,274.94,0,0,0,17.9,28A73.36,73.36,0,0,0,487.74,233c.49.4,1,.8,1.48,1.15l1.7,1.19a35,35,0,0,1,3.66,3,17.84,17.84,0,0,1,3.32,4.08,10.83,10.83,0,0,1,1.14,2.94,8.54,8.54,0,0,1,0,3.54,10.27,10.27,0,0,1-3.22,5.39,20.71,20.71,0,0,1-4.15,2.91,49,49,0,0,1-8.4,3.46,154,154,0,0,1-16.77,4.09l-4.15.81a9.18,9.18,0,0,0-2.87,1.08,9.51,9.51,0,0,0-4,4.7,12.55,12.55,0,0,0-.67,6.58,19.5,19.5,0,0,0,2.46,6.74A37.19,37.19,0,0,0,468,295.75a75,75,0,0,0,14.14,7.86,129.67,129.67,0,0,0,15.58,5.49A141.4,141.4,0,0,1,513.88,315a75,75,0,0,1,15.19,8.65,37.29,37.29,0,0,1,6.55,6.24,21.05,21.05,0,0,1,4.31,8.49,14.43,14.43,0,0,1-1.24,9.88,18.08,18.08,0,0,1-6.66,6.94,26.74,26.74,0,0,1-8.56,3.33c-2.84.61-5.65,1.06-8.44,1.49-5.58.86-11.13,1.61-16.52,2.77a53.48,53.48,0,0,0-7.81,2.22c-2.43.94-4.81,2.22-6,3.93a4.34,4.34,0,0,0-.77,2.82,8.45,8.45,0,0,0,1,3.29,28,28,0,0,0,4.82,6.25,80.74,80.74,0,0,0,12.81,10.4c9.29,6,19.72,10.29,30.24,14.17,5.27,1.95,10.59,3.79,15.85,5.86,2.63,1,5.24,2.14,7.79,3.39a37.94,37.94,0,0,1,7.28,4.51,11.9,11.9,0,0,1,3.63,15.57,34.68,34.68,0,0,1-4.53,7.16,77.45,77.45,0,0,1-5.64,6.29,77.31,77.31,0,0,0,5.41-6.46,34.27,34.27,0,0,0,4.22-7.21,12.64,12.64,0,0,0,.88-8,12.44,12.44,0,0,0-4.71-6.43,37.71,37.71,0,0,0-7.15-4.16c-2.53-1.16-5.13-2.18-7.76-3.14-5.26-1.91-10.62-3.62-16-5.44-10.65-3.63-21.34-7.64-31.11-13.64a83.84,83.84,0,0,1-13.61-10.49,31.27,31.27,0,0,1-5.6-6.94,12,12,0,0,1-1.55-4.68,8.17,8.17,0,0,1,.19-2.7,8.56,8.56,0,0,1,1.09-2.5,12.1,12.1,0,0,1,3.6-3.44,24.27,24.27,0,0,1,4.08-2.08,57.3,57.3,0,0,1,8.36-2.56c5.59-1.31,11.19-2.17,16.71-3.12,2.76-.48,5.5-1,8.15-1.59a22.1,22.1,0,0,0,7-2.87,13.3,13.3,0,0,0,4.82-5.15,9.42,9.42,0,0,0,.69-6.53,16,16,0,0,0-3.42-6.33,33.25,33.25,0,0,0-5.73-5.27,69.74,69.74,0,0,0-14.19-7.8,135.81,135.81,0,0,0-15.61-5.42,135.53,135.53,0,0,1-16.3-5.51,81,81,0,0,1-15.41-8.31,43.39,43.39,0,0,1-12.6-13,25.53,25.53,0,0,1-3.34-9,19.13,19.13,0,0,1,1-10,16.17,16.17,0,0,1,6.69-8,15.88,15.88,0,0,1,5-1.93l4.13-.84a147.75,147.75,0,0,0,16-4,42.41,42.41,0,0,0,7.17-3,14,14,0,0,0,2.74-1.92,3.42,3.42,0,0,0,1.12-1.68,2.41,2.41,0,0,0-.43-1.61,11.07,11.07,0,0,0-2-2.4,28,28,0,0,0-2.92-2.31l-1.76-1.22c-.65-.46-1.26-.94-1.86-1.43a59,59,0,0,1-6.43-6.27c-2-2.19-3.79-4.44-5.54-6.74a267,267,0,0,1-18.55-28.74c-5.63-9.85-10.89-19.86-16-30s-9.91-20.31-14.57-30.61l-3.45-7.76L417,124.48l-.42-1-.39-.88c-.25-.59-.54-1.15-.82-1.71a22.74,22.74,0,0,0-1.89-3.09,13,13,0,0,0-2.2-2.42,7,7,0,0,0-2.31-1.33,4.49,4.49,0,0,0-2.22-.09,8.55,8.55,0,0,0-4.59,3.32,17.85,17.85,0,0,0-1.84,2.92c-.26.54-.51,1.07-.73,1.64-.12.27-.22.56-.32.85l-.35,1c-1.06,2.93-2.23,5.47-3.42,8.1s-2.42,5.16-3.67,7.7c-5,10.18-10.29,20.16-15.77,30.05s-11.17,19.66-17.16,29.28a310.2,310.2,0,0,1-19.39,28.11,90.46,90.46,0,0,1-12,12.85l-1.65,1.35c-.52.43-1,.85-1.53,1.29a38,38,0,0,0-2.79,2.65,12.42,12.42,0,0,0-1.94,2.57,2.33,2.33,0,0,0-.28.76c0,.11,0,0,0,.09a4.57,4.57,0,0,0,1.7,1.35,25.15,25.15,0,0,0,3.36,1.51c2.46.92,5.11,1.72,7.79,2.52,5.36,1.58,10.84,3.16,16.25,5q4.06,1.37,8.08,2.94c1.34.53,2.67,1.07,4,1.63.64.27,1.36.57,2.1.94a19.66,19.66,0,0,1,2.18,1.24,11.85,11.85,0,0,1,4,4.13,8.64,8.64,0,0,1,1,3.24,9.11,9.11,0,0,1-.27,3.23,14.48,14.48,0,0,1-2.42,4.85,29.32,29.32,0,0,1-3.14,3.56,87.46,87.46,0,0,1-14,10.47c-4.85,3-9.79,5.84-14.76,8.55-9.94,5.42-20,10.49-29.91,15.72-5,2.62-9.88,5.28-14.63,8.12-2.37,1.42-4.7,2.89-6.88,4.46a22.06,22.06,0,0,0-5.45,5.14,8,8,0,0,0-.76,1.39,5.36,5.36,0,0,0-.33,1.32,4.1,4.1,0,0,0,.69,2.53,15.62,15.62,0,0,0,5.49,4.62A80.14,80.14,0,0,0,298.56,353c5.31,1.66,10.73,3.06,16.18,4.58a64.81,64.81,0,0,1,8.26,2.74,27.74,27.74,0,0,1,7.69,4.74,13.65,13.65,0,0,1,3,3.81,9.27,9.27,0,0,1,1,5,11.14,11.14,0,0,1-1.54,4.7,19.09,19.09,0,0,1-2.8,3.67,40.6,40.6,0,0,1-6.81,5.54,83.78,83.78,0,0,1-7.41,4.35c-10.11,5.26-20.76,9.16-31.39,12.82a161.69,161.69,0,0,0-15.52,6.37A74.57,74.57,0,0,0,255,420a32.17,32.17,0,0,0-5.82,5.89,16.21,16.21,0,0,0-3.19,7.52,13.61,13.61,0,0,0,1.59,8A20.29,20.29,0,0,0,252.95,447.85Z" fill="#cb9866"/>
        <path d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#cb9866"/>
        <path d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#cb9866"/>
  
      </g>
<path class="treeBottomPath" stroke="none" fill="none" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9"/>    
<path  class="treePath" fill="none" stroke="none" stroke-miterlimit="10" d="M252.95,447.85s-30.81-21.57,33.89-44.68,46.22-37,33.89-41.6-59.32-11.56-42.37-28.5,114-52.38,81.66-66.25S301.48,256,324.59,237.55,390.84,135.87,395.46,122c4.41-13.24,16.95-18.49,24.65,0s44.68,100.14,67.79,115.55-10.78,21.57-26.19,24.65-20,33.89,33.89,49.3,47.76,40.06,27.73,44.68-63.17,4.62-27.73,32.35,98.6,21.57,61.63,60.09"/>  
        <path class="treeBottom" mask="url(#treeBottomMask)" d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#cb9866"/>
        <path class="treePot" mask="url(#treePotMask)" d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#cb9866"/>
  <g class="treeStar" >
        <path class="treeStarOutline" opacity="0" d="M421,53.27c5,.83,10.08,1.52,15.15,2.13l3.8.45,1.9.21c.33,0,.6.06,1,.12a2.41,2.41,0,0,1,1.27.66,2.52,2.52,0,0,1,.56,2.76,3.42,3.42,0,0,1-.78,1.07l-.66.69-2.65,2.77c-1.78,1.83-3.54,3.68-5.35,5.48l-2.7,2.71L429.81,75l-.69.67-.34.33,0,0h0a.14.14,0,0,0,0-.08s0-.07,0,0l0,.24.07.47.57,3.78c.4,2.52.71,5,1.06,7.57l.94,7.59.22,1.9c0,.06,0,.19,0,.34a2.21,2.21,0,0,1,0,.43,2.72,2.72,0,0,1-.21.84,2.85,2.85,0,0,1-2.65,1.75,2.57,2.57,0,0,1-.82-.14,3.12,3.12,0,0,1-.65-.3l-1.64-1-6.58-3.91-6.63-3.81-3.34-1.86-.42-.23-.21-.12-.14-.07a1,1,0,0,0-.59,0,1.15,1.15,0,0,0-.31.12l-.43.22-.85.44c-2.27,1.17-4.54,2.31-6.79,3.52s-4.51,2.38-6.74,3.61l-3.36,1.83-.84.46a3.07,3.07,0,0,1-1.28.44,2.68,2.68,0,0,1-2.84-3l.15-1,.29-1.89.57-3.78,1.18-7.56,1.24-7.52a.13.13,0,0,0,0,.08l0,0-.1-.09-.17-.17-1.37-1.34-2.73-2.68-10.93-10.7-.34-.33a4,4,0,0,1-.64-.84,3.63,3.63,0,0,1-.43-2.12,3.68,3.68,0,0,1,2.64-3.17l.52-.11.25,0,.47-.06.95-.12,1.9-.25,7.58-1,7.6-.9,1.9-.23.95-.11c.24,0,.11,0,.09,0l-.09.05-.07.08,0,0,.09-.16.46-.84.91-1.68c2.41-4.5,4.95-8.92,7.51-13.34l1-1.66.48-.83.24-.41.13-.23a3.49,3.49,0,0,1,.22-.33,2.66,2.66,0,0,1,2.83-.9,2.52,2.52,0,0,1,1.26.84,2.85,2.85,0,0,1,.37.62l.18.44q1.45,3.54,3,7.06c1,2.36,2,4.68,3.06,7,.51,1.17,1.06,2.32,1.59,3.48l.8,1.74a2.12,2.12,0,0,0,.45.75A1.42,1.42,0,0,0,421,53.27Zm-.06.39a1.82,1.82,0,0,1-1-.46,2.52,2.52,0,0,1-.56-.86l-.84-1.72c-.56-1.14-1.11-2.3-1.69-3.43-1.17-2.27-2.29-4.56-3.5-6.81s-2.39-4.51-3.6-6.76l-.23-.42a.8.8,0,0,0-.14-.18.58.58,0,0,0-.33-.15.56.56,0,0,0-.57.28L407,36.48c-2.09,4.66-4.2,9.31-6.45,13.88l-.83,1.72-.42.86-.13.27a3.57,3.57,0,0,1-2,1.67,4.26,4.26,0,0,1-.84.18l-.95.13-1.89.27L386,56.53l-7.58,1-3.49.44a.45.45,0,0,0,.34-.4.51.51,0,0,0-.07-.28s-.06-.08-.07-.08l.33.34,10.65,11,2.66,2.75,1.33,1.37.4.42a3.41,3.41,0,0,1,.53.84,3.36,3.36,0,0,1,.24,1.95c-.53,2.56-1,5-1.57,7.52L388,90.85l-.83,3.73-.42,1.87-.2.9a.5.5,0,0,0,0,.3.58.58,0,0,0,.52.37,6.28,6.28,0,0,0,1.38-.58l3.46-1.62q3.47-1.61,6.9-3.3c2.3-1.1,4.57-2.26,6.85-3.39l.86-.43.43-.21a2.55,2.55,0,0,1,.57-.22,2.21,2.21,0,0,1,1.29.08l.29.13.21.11.42.23,3.37,1.81,6.8,3.51,6.85,3.41,1.71.85c.19.09.15.07.22.08a.25.25,0,0,0,.12,0,.42.42,0,0,0,.21-.1.33.33,0,0,0,.1-.19.2.2,0,0,0,0-.09.1.1,0,0,0,0,0l0-.13L428.74,96l-1.42-7.52c-.43-2.51-.9-5-1.29-7.54l-.6-3.78-.08-.47,0-.24a3.75,3.75,0,0,1,0-.45,3.37,3.37,0,0,1,.52-1.9,3.33,3.33,0,0,1,.3-.4,3.73,3.73,0,0,1,.3-.3l.35-.32.7-.65,2.81-2.59,2.86-2.54c1.9-1.71,3.84-3.36,5.77-5l2.91-2.49a12.91,12.91,0,0,0,1.15-1,.7.7,0,0,0-.06-.79.73.73,0,0,0-.37-.26c-.23-.06-.6-.13-.89-.2l-1.87-.4L436,56.39C431,55.39,426,54.45,420.95,53.66Z" fill="#FFFCF9" />  
  <path  d="M408.12,83.45l-17.78,8.94,3.72-19.55-14-14.15,19.74-2.5,9.13-17.68,8.48,18L437,59.73l-14.5,13.63,3,19.67Z" fill="#C89568"/> 
  </g>
  <circle class="sparkle" fill="url(#dotGrad)" cx="0" cy="0" r="50"/> 

	</g>
</svg>
<!-- partial -->
  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/EasePack3.min.js'></script>
<script  id="rendered-js">

MorphSVGPlugin.convertToPath('polygon');
var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  pContainer = select('.pContainer'),
  mainSVG = select('.mainSVG'),
  star = select('#star'),
  sparkle = select('.sparkle'),
  tree = select('#tree'),
  showParticle = true,
  particleColorArray = ['#E8F6F8', '#ACE8F8', '#F6FBFE','#A2CBDC','#B74551', '#5DBA72', '#910B28', '#910B28', '#446D39'],
  particleTypeArray = ['#star','#circ','#cross','#heart'],
 // particleTypeArray = ['#star'],
  particlePool = [],
  particleCount = 0,
  numParticles = 201


gsap.set('svg', {
  visibility: 'visible'
})

gsap.set(sparkle, {
	transformOrigin:'50% 50%',
	y:-100
})

let getSVGPoints = (path) => {
	
	let arr = []
	var rawPath = MotionPathPlugin.getRawPath(path)[0];
	rawPath.forEach((el, value) => {
		let obj = {}
		obj.x = rawPath[value * 2]
		obj.y = rawPath[(value * 2) + 1]
		if(value % 2) {
			arr.push(obj)
		}
		//console.log(value)
	})
	
	return arr;
}
let treePath = getSVGPoints('.treePath'),
    treeBottomPath = getSVGPoints('.treeBottomPath'),
    mainTl = gsap.timeline({delay:0, repeat:0}),
    starTl;

function flicker(p){

  gsap.killTweensOf(p, {opacity:true});
  gsap.fromTo(p, {
    opacity:1
  }, {
		duration: 0.07,
    opacity:Math.random(),
    repeat:-1
  })
}

function createParticles() {
  
  var i = numParticles, p, particleTl, step = numParticles/treePath.length, pos;
  while (--i > -1) {
    
    p = select(particleTypeArray[i%particleTypeArray.length]).cloneNode(true);
    mainSVG.appendChild(p);
    p.setAttribute('fill', particleColorArray[i % particleColorArray.length]);
    p.setAttribute('class', "particle");   
    particlePool.push(p);
    //hide them initially
    gsap.set(p, {
                 x:-100, 
                 y:-100,
   transformOrigin:'50% 50%'
                 })
    
    

  }

}

var getScale = gsap.utils.random(0.5, 3, 0.001, true);

function playParticle(p){
  if(!showParticle){return};
  var p = particlePool[particleCount]
 gsap.set(p, {
	 x: gsap.getProperty('.pContainer', 'x'),
	 y: gsap.getProperty('.pContainer', 'y'),
	 scale:getScale()
    }
    );
var tl = gsap.timeline();
  tl.to(p, {
		duration: gsap.utils.random(0.61,6),
      physics2D: {
        velocity: gsap.utils.random(-23, 23),
        angle:gsap.utils.random(-180, 180),
        gravity:gsap.utils.random(-6, 50)
      },
      scale:0,
      rotation:gsap.utils.random(-123,360),
      ease: 'power1',
      onStart:flicker,
      onStartParams:[p],
      onRepeat: (p) => {
        gsap.set(p, {         
            scale:getScale()
        })
      },
      onRepeatParams: [p]

    });
  

  particleCount++;
  particleCount = (particleCount >=numParticles) ? 0 : particleCount
  
}

function drawStar(){
  
  starTl = gsap.timeline({onUpdate:playParticle})
  starTl.to('.pContainer, .sparkle', {
		duration: 6,
		motionPath :{
			path: '.treePath',
      autoRotate: false
		},
    ease: 'linear'
  })  
  .to('.pContainer, .sparkle', {
		duration: 1,
    onStart:function(){showParticle = false},
    x:treeBottomPath[0].x,
    y:treeBottomPath[0].y
  })
  .to('.pContainer, .sparkle',  {
		duration: 2,
    onStart:function(){showParticle = true},
		motionPath :{
			path: '.treeBottomPath',
      autoRotate: false
		},
    ease: 'linear'    
  },'-=0')
.from('.treeBottomMask', {
		duration: 2,
  drawSVG:'0% 0%',
  stroke:'#FFF',
  ease:'linear'
},'-=2')  
   
}


createParticles();
drawStar();

mainTl.from(['.treePathMask','.treePotMask'],{
	duration: 6,
  drawSVG:'0% 0%',
  stroke:'#FFF',
	stagger: {
		each: 6
	},
  duration: gsap.utils.wrap([6, 1,2]),
  ease:'linear'
})
.from('.treeStar', {
	duration: 3,
  scaleY:0,
  scaleX:0.15,
  transformOrigin:'50% 50%',
  ease: 'elastic(1,0.5)'
},'-=4')

 .to('.sparkle', {
	duration: 3,
    opacity:0,
    ease:"rough({strength: 2, points: 100, template: linear, taper: both, randomize: true, clamp: false})"
  },'-=0')
  .to('.treeStarOutline', {
	duration: 1,
    opacity:1,
    ease:"rough({strength: 2, points: 16, template: linear, taper: none, randomize: true, clamp: false})"
  },'+=1')

mainTl.add(starTl, 0)
gsap.globalTimeline.timeScale(1.5);

</script>

</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/108709.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面临项目失控?四个维度应对项目进度优化【洞见2】

常见的对进度的管理的流程是制定进度目标&#xff0c;WBS工作任务拆解&#xff0c;任务的时间估算&#xff0c;然后执行监督。 有时候这样的过程就会出现的进度延迟&#xff0c;而针对进度的延迟&#xff0c;往往企业多选择是通过加班赶工来完成。 项目进度优化方案 但是如…

【第一章 Linux特点,结构,网路连接模式,Linux目录结构】

第一章 Linux特点&#xff0c;结构&#xff0c;网路连接模式&#xff0c;Linux目录结构 1.操作系统&#xff1a; 用于管理和控制计算机所有软、硬件资源的一组程序。 2. Linux特点总结&#xff1a; ① 开放性&#xff1b; ② 多用户&#xff1b; ③ 多任务&#xff1b; ④ 良好…

喇叭天线设计

电磁喇叭天线是最简单而常用的微波天线。它的主要优点是结构简单&#xff0c;馈电简便&#xff0c;便于控制主面波束宽度和增益&#xff0c;频率特性好且损耗较小。它由波导逐渐张开来形成&#xff0c;其作用是加强方向性&#xff0c;这与声学喇叭的原理相似。若主模TE10的矩形…

python爬虫爬取网页上的图片

目录 一&#xff1a;爬虫基础 二&#xff1a;安装html解析的python工具 三&#xff1a;爬取网页图片 一&#xff1a;爬虫基础 爬虫基本过程&#xff1a; 1.请求标头 headers 2.创建一个会话 requests.Session 3.确定请求的路径 4.根据路径获取网页资源(HTML文件) 5.解析html…

UG/NX二次开发Siemens官方NXOPEN实例解析—2.6 CreateNote

列文章目录 UG/NX二次开发Siemens官方NXOPEN实例解析—2.1 AssemblyViewer UG/NX二次开发Siemens官方NXOPEN实例解析—2.2 Selection UG/NX二次开发Siemens官方NXOPEN实例解析—2.3 Selection_UIStyler UG/NX二次开发Siemens官方NXOPEN实例解析—2.4 File2Points UG/NX二次…

【java随笔】面向对象思维

1.怎么建立面向对象的思维方式 &#xff08;1&#xff09;先整体&#xff0c;再局部 &#xff08;2&#xff09;先抽象&#xff0c;再具体 &#xff08;3&#xff09;能做什么&#xff0c;再怎么做 2.如何学习面向对象 &#xff08;1&#xff09;语法 &#xff08;2&#xff09…

执行docker restart [CONTAINER ID]命令时会把之前的参数都带上吗

我在搭建rocketmq时候&#xff0c;运行了好几个容器命令也比较长如下&#xff1a; # 启动 namesrv docker run -d -p 9876:9876 -v "D:/Program Files/rocketmq/namesrv/logs:/root/logs" -v "D:/Program Files/rocketmq/namesrv/store:/root/store" …

JAVA手机网站销售

开发工具(eclipse/idea/vscode等)&#xff1a; 数据库(sqlite/mysql/sqlserver等)&#xff1a; 功能模块(请用文字描述&#xff0c;至少200字)&#xff1a;

Hazelcast 在springboot下的使用集成

一、Hazelcast简介 Hazelcast是一款由Hazelcast公司开发的基于jvm环境的为各种应用提供分布式集群服务的分布式缓存解决方案。可以嵌入到java、c、.net等开发的产品中使用。其主要功能有&#xff1a; 提供了 Map、Queue、MultiMap、Set、List、Semaphore、Atomic 等接口的分布…

RocketMQ消费者没有成功消费消息的问题排查

背景 今天下游同事反馈&#xff0c;有一些以取消的订单库存还原异常了&#xff0c;导致部分商品库存没有还原。查日志发现没有收到还原消息&#xff0c;但是查看发送方是可以确认消息是已经发了的&#xff0c;那么是什么原因导致消费者没有收到&#xff0c;或者收到后没有处理消…

算法刷题打卡第53天:排序数组---希尔排序

排序数组 难度&#xff1a;中等 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 示例 1&#xff1a; 输入&#xff1a;nums [5,2,3,1] 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;nums [5,1,1,2,0,0] 输出&#xff1a;[0,0,1,1,2,5]希尔排…

六、Buffer缓冲区和Stream流

Buffer —— 缓冲区 JavaScript 提供了大量对字符串的便捷操作&#xff0c;但没有读取或操作二进制数据流机制&#xff0c;而在Node.js中可以直接用Buffer类提供的构造函数创建Buffer实例&#xff0c;一个Buffer实例代表一个缓冲区&#xff0c;Buffer的缓冲区专门用于存放二进制…

全球「数字游民」现状,有人已经72岁了

近年来&#xff0c;“数字游民”在国内越来越流行&#xff0c;特别是受疫情的影响&#xff0c;很多人对这种工作生活方式越来越喜欢&#xff0c;也越来越习惯&#xff0c;在此之前&#xff0c;当你告诉别人你是一名“数字游民”时&#xff0c;大家通常会认为你是没有工作的无业…

RocketMQ-双主双从集群+DashBorad搭建(云服务器)

文章目录一、理论垫基础1. NameServer 集群2. Producer集群3. Consumer集群4. Broker集群4.1 节点间数据同步 以及 消息的持久化4.2 Broker的集群模式4.2.1、单Master模式4.2.2、多Master模式4.2.3、多Master多Slave模式-异步复制4.2.4、多Master多Slave模式-同步双写最佳实践4…

APM32F103 RTC内部时钟源报警中断例程测试

APM32F103 RTC内部时钟源报警中断例程测试✨相关篇推荐《【开源电路】STM32F103VCT6开发板》&#x1f4cc;关篇《APM32F103 RTC内部时钟源秒中断例程测试》&#x1f4cc;本案例来源于官方的SDK固件包&#xff1a;https://www.geehy.com/support/apm32 &#x1f388;源码位置&am…

二极管:烧IC与我相干!

趁“羊”未到&#xff0c;还有心力接着上节继续讲。 话说&#xff0c;烧IC&#xff0c;不只本身IC烧&#xff0c;还火烧连营连带后端IC一并烧&#xff0c;为何呢&#xff01;&#xff1f; 那得回到过去&#xff0c;必须翻翻《硬件先生》中的《电源知识-DC-DC》&#xff0c;从D…

GPU与CPU的性能比较及影响因素

CPU的主要指标是主频和线程。 Intel&#xff1a;后缀F表示无核显&#xff0c;后缀K代表可以超频&#xff0c;H代表移动端&#xff1b;AMD&#xff1a;后缀G代表有核显&#xff0c;后缀X代表加强版&#xff0c;后缀XT代表超级加强版。 CPU 常见计算操作&#xff1a; 数据加载、…

4.0、Hibernate-延迟加载 2

4.0、Hibernate-延迟加载 2 消费者 和 订单 属于 一对多 的 关系&#xff0c;通过上一章节 3.0 的内容我们知道了可以通过设置 customer 来实现延迟加载&#xff0c;本章节来介绍一下如何设置 orders 去实现延迟加载&#xff1b; one-to-many 的 lazy 默认是 true 是开启的&…

%29 身份认证

1、Web 开发模式 &#xff08;1&#xff09;、基于服务器渲染的开发模式&#xff1a;服务器发送给客户端的 HTML 页面&#xff0c;是在服务器通过字符串的拼接&#xff0c;动态生成的&#xff08;企业级网站&#xff09; &#xff08;2&#xff09;、基于前后端分离的开发模式&…

登录过程(vuex存储token、token持久化)

登录过程(vuex存储数据) 点击登录按钮通过表单校验 this.$refs.loginForm.validate(valid > {if (valid) {//按钮动画加载,禁用 this.loading true// 调用vuex的action发送登录请求this.$store.dispatch(user/login, this.loginForm).then(() > {this.$router.push({ p…