@andresclua/perlindom 0.0.1

package/dist/PerlinDOM.es.js

@@ -0,0 +1,98 @@
+var S = Object.defineProperty;
+var y = (r) => {
+  throw TypeError(r);
+};
+var $ = (r, t, i) => t in r ? S(r, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[t] = i;
+var M = (r, t, i) => $(r, typeof t != "symbol" ? t + "" : t, i), j = (r, t, i) => t.has(r) || y("Cannot " + i);
+var F = (r, t, i) => t.has(r) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, i);
+var f = (r, t, i) => (j(r, t, "access private method"), i);
+var g, X, R, c, Y, B, d;
+const u = class u {
+  constructor({
+    element: t,
+    x: i = null,
+    y: a = null,
+    speed: n = 0.01,
+    seed: o = 0,
+    lerpSpeed: s = 0.1
+  }) {
+    F(this, c);
+    M(this, "animate", () => {
+      if (this.lerpFactor !== this.targetLerpFactor && (this.lerpFactor = f(this, c, B).call(this, this.lerpFactor, this.targetLerpFactor, this.lerpSpeed), Math.abs(this.lerpFactor - this.targetLerpFactor) < 1e-3 && (this.lerpFactor = this.targetLerpFactor)), this.lerpFactor > 0) {
+        this.time += this.speed * this.lerpFactor;
+        const t = this.noise.perlin2(this.time, 0), i = this.noise.perlin2(this.time, 100), a = this.xRange ? f(this, c, d).call(this, t, -1, 1, this.xRange.min, this.xRange.max) : 0, n = this.yRange ? f(this, c, d).call(this, i, -1, 1, this.yRange.min, this.yRange.max) : 0;
+        this.lastX = a, this.lastY = n, this.el && (this.el.style.left = `${this.initialX + a}px`, this.el.style.top = `${this.initialY + n}px`);
+      }
+      (this.lerpFactor > 0 || this.targetLerpFactor > 0) && (this.raf = requestAnimationFrame(this.animate));
+    });
+    this.el = t, this.xRange = i, this.yRange = a, this.speed = n, this.time = o, this.isPlaying = !0, this.lerpFactor = 1, this.lerpSpeed = s, this.targetLerpFactor = 1, this.lastX = 0, this.lastY = 0, t ? (this.initialX = t.offsetLeft, this.initialY = t.offsetTop) : (this.initialX = 0, this.initialY = 0), this.animate = this.animate.bind(this), this.init(o);
+  }
+  init(t) {
+    var i;
+    this.noise = f(this, c, Y).call(this, f(i = u, g, R).call(i, t)), this.isPlaying = !0, this.lerpFactor = 1, this.targetLerpFactor = 1, this.raf = requestAnimationFrame(this.animate), console.log("PerlinDOM initialized");
+  }
+  pause() {
+    this.isPlaying && (this.targetLerpFactor = 0, this.isPlaying = !1, console.log("PerlinDOM pausing..."));
+  }
+  play() {
+    this.isPlaying || (this.targetLerpFactor = 1, this.isPlaying = !0, this.lerpFactor === 0 && (this.raf = requestAnimationFrame(this.animate)), console.log("PerlinDOM playing..."));
+  }
+  destroy() {
+    cancelAnimationFrame(this.raf);
+  }
+};
+g = new WeakSet(), X = function(t) {
+  return function() {
+    let i = t += 1831565813;
+    return i = Math.imul(i ^ i >>> 15, i | 1), i ^= i + Math.imul(i ^ i >>> 7, i | 61), ((i ^ i >>> 14) >>> 0) / 4294967296;
+  };
+}, R = function(t = 0) {
+  var n;
+  const i = Array.from({ length: 256 }, (o, s) => s), a = f(n = u, g, X).call(n, t);
+  for (let o = 255; o > 0; o--) {
+    const s = Math.floor(a() * (o + 1));
+    [i[o], i[s]] = [i[s], i[o]];
+  }
+  return i.concat(i);
+}, c = new WeakSet(), Y = function(t) {
+  const i = (s) => s * s * s * (s * (s * 6 - 15) + 10), a = (s, e, h) => e + s * (h - e), n = (s, e, h) => {
+    const l = s & 15, p = l < 8 ? e : h, m = l < 4 ? h : l === 12 || l === 14 ? e : 0;
+    return (l & 1 ? -p : p) + (l & 2 ? -m : m);
+  }, o = (s, e) => s & 1 ? -e : e;
+  return {
+    // Original 1D Perlin noise function
+    perlin1(s) {
+      const e = Math.floor(s) & 255;
+      s -= Math.floor(s);
+      const h = i(s);
+      return a(h, o(t[e], s), o(t[e + 1], s - 1));
+    },
+    // New 2D Perlin noise function
+    perlin2(s, e) {
+      const h = Math.floor(s) & 255, l = Math.floor(e) & 255;
+      s -= Math.floor(s), e -= Math.floor(e);
+      const p = i(s), m = i(e), A = t[h] + l, L = t[h + 1] + l, b = t[A], v = t[A + 1], q = t[L], D = t[L + 1];
+      return a(
+        m,
+        a(
+          p,
+          n(t[b], s, e),
+          n(t[q], s - 1, e)
+        ),
+        a(
+          p,
+          n(t[v], s, e - 1),
+          n(t[D], s - 1, e - 1)
+        )
+      );
+    }
+  };
+}, B = function(t, i, a) {
+  return t + a * (i - t);
+}, d = function(t, i, a, n, o) {
+  return (t - i) * (o - n) / (a - i) + n;
+}, F(u, g);
+let P = u;
+export {
+  P as default
+};

package/dist/PerlinDOM.umd.js

@@ -0,0 +1 @@
+(function(r,e){typeof exports=="object"&&typeof module<"u"?module.exports=e():typeof define=="function"&&define.amd?define(e):(r=typeof globalThis<"u"?globalThis:r||self,r.PerlinDOM=e())})(this,function(){"use strict";var T=Object.defineProperty;var M=r=>{throw TypeError(r)};var j=(r,e,l)=>e in r?T(r,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):r[e]=l;var P=(r,e,l)=>j(r,typeof e!="symbol"?e+"":e,l),O=(r,e,l)=>e.has(r)||M("Cannot "+l);var d=(r,e,l)=>e.has(r)?M("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(r):e.set(r,l);var u=(r,e,l)=>(O(r,e,"access private method"),l);var e,X,R,c,Y,b,y;const g=class g{constructor({element:s,x:t=null,y:a=null,speed:o=.01,seed:h=0,lerpSpeed:i=.1}){d(this,c);P(this,"animate",()=>{if(this.lerpFactor!==this.targetLerpFactor&&(this.lerpFactor=u(this,c,b).call(this,this.lerpFactor,this.targetLerpFactor,this.lerpSpeed),Math.abs(this.lerpFactor-this.targetLerpFactor)<.001&&(this.lerpFactor=this.targetLerpFactor)),this.lerpFactor>0){this.time+=this.speed*this.lerpFactor;const s=this.noise.perlin2(this.time,0),t=this.noise.perlin2(this.time,100),a=this.xRange?u(this,c,y).call(this,s,-1,1,this.xRange.min,this.xRange.max):0,o=this.yRange?u(this,c,y).call(this,t,-1,1,this.yRange.min,this.yRange.max):0;this.lastX=a,this.lastY=o,this.el&&(this.el.style.left=`${this.initialX+a}px`,this.el.style.top=`${this.initialY+o}px`)}(this.lerpFactor>0||this.targetLerpFactor>0)&&(this.raf=requestAnimationFrame(this.animate))});this.el=s,this.xRange=t,this.yRange=a,this.speed=o,this.time=h,this.isPlaying=!0,this.lerpFactor=1,this.lerpSpeed=i,this.targetLerpFactor=1,this.lastX=0,this.lastY=0,s?(this.initialX=s.offsetLeft,this.initialY=s.offsetTop):(this.initialX=0,this.initialY=0),this.animate=this.animate.bind(this),this.init(h)}init(s){var t;this.noise=u(this,c,Y).call(this,u(t=g,e,R).call(t,s)),this.isPlaying=!0,this.lerpFactor=1,this.targetLerpFactor=1,this.raf=requestAnimationFrame(this.animate),console.log("PerlinDOM initialized")}pause(){this.isPlaying&&(this.targetLerpFactor=0,this.isPlaying=!1,console.log("PerlinDOM pausing..."))}play(){this.isPlaying||(this.targetLerpFactor=1,this.isPlaying=!0,this.lerpFactor===0&&(this.raf=requestAnimationFrame(this.animate)),console.log("PerlinDOM playing..."))}destroy(){cancelAnimationFrame(this.raf)}};e=new WeakSet,X=function(s){return function(){let t=s+=1831565813;return t=Math.imul(t^t>>>15,t|1),t^=t+Math.imul(t^t>>>7,t|61),((t^t>>>14)>>>0)/4294967296}},R=function(s=0){var o;const t=Array.from({length:256},(h,i)=>i),a=u(o=g,e,X).call(o,s);for(let h=255;h>0;h--){const i=Math.floor(a()*(h+1));[t[h],t[i]]=[t[i],t[h]]}return t.concat(t)},c=new WeakSet,Y=function(s){const t=i=>i*i*i*(i*(i*6-15)+10),a=(i,n,f)=>n+i*(f-n),o=(i,n,f)=>{const p=i&15,m=p<8?n:f,F=p<4?f:p===12||p===14?n:0;return(p&1?-m:m)+(p&2?-F:F)},h=(i,n)=>i&1?-n:n;return{perlin1(i){const n=Math.floor(i)&255;i-=Math.floor(i);const f=t(i);return a(f,h(s[n],i),h(s[n+1],i-1))},perlin2(i,n){const f=Math.floor(i)&255,p=Math.floor(n)&255;i-=Math.floor(i),n-=Math.floor(n);const m=t(i),F=t(n),A=s[f]+p,L=s[f+1]+p,B=s[A],v=s[A+1],D=s[L],q=s[L+1];return a(F,a(m,o(s[B],i,n),o(s[D],i-1,n)),a(m,o(s[v],i,n-1),o(s[q],i-1,n-1)))}}},b=function(s,t,a){return s+a*(t-s)},y=function(s,t,a,o,h){return(s-t)*(h-o)/(a-t)+o},d(g,e);let r=g;return r});

package/docs/examples.html

@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PerlinDOM Examples</title>
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      line-height: 1.6;
+      color: #333;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    
+    h1, h2 {
+      color: #2c3e50;
+    }
+    
+    .example-container {
+      margin-bottom: 40px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 20px;
+      position: relative;
+      overflow: hidden;
+      height: 300px;
+      background-color: #f9f9f9;
+    }
+    
+    .code-block {
+      background-color: #f5f5f5;
+      padding: 15px;
+      border-radius: 5px;
+      overflow-x: auto;
+      margin-bottom: 20px;
+      font-family: monospace;
+      font-size: 14px;
+    }
+    
+    /* Example 1: Basic Animation */
+    .basic-element {
+      width: 80px;
+      height: 80px;
+      background-color: #3498db;
+      border-radius: 50%;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      filter: blur(5px);
+    }
+    
+    /* Example 2: Horizontal Only */
+    .horizontal-element {
+      width: 60px;
+      height: 60px;
+      background-color: #e74c3c;
+      border-radius: 10px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    
+    /* Example 3: Multiple Elements */
+    .particle {
+      width: 30px;
+      height: 30px;
+      background-color: #2ecc71;
+      border-radius: 50%;
+      position: absolute;
+      opacity: 0.7;
+    }
+    
+    /* Example 4: Background Effect */
+    .bg-container {
+      background-color: #34495e;
+      position: relative;
+    }
+    
+    .bg-element {
+      position: absolute;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    .bg-element-1 {
+      width: 100px;
+      height: 100px;
+      left: 20%;
+      top: 30%;
+    }
+    
+    .bg-element-2 {
+      width: 150px;
+      height: 150px;
+      left: 60%;
+      top: 50%;
+    }
+    
+    .bg-element-3 {
+      width: 80px;
+      height: 80px;
+      left: 40%;
+      top: 70%;
+    }
+    
+    .content {
+      position: relative;
+      z-index: 10;
+      color: white;
+      text-align: center;
+      padding-top: 120px;
+    }
+    
+    /* Example 5: Interactive Element */
+    .interactive-container {
+      display: flex;
+      justify-content: space-between;
+    }
+    
+    .controls {
+      width: 40%;
+    }
+    
+    .preview {
+      width: 55%;
+      height: 200px;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      position: relative;
+      overflow: hidden;
+    }
+    
+    .interactive-element {
+      width: 50px;
+      height: 50px;
+      background-color: #9b59b6;
+      border-radius: 50%;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    
+    .control-group {
+      margin-bottom: 15px;
+    }
+    
+    label {
+      display: block;
+      margin-bottom: 5px;
+      font-weight: bold;
+    }
+    
+    input[type="range"] {
+      width: 100%;
+    }
+    
+    .value-display {
+      font-size: 12px;
+      color: #666;
+    }
+  </style>
+</head>
+<body>
+  <h1>PerlinDOM Examples</h1>
+  <p>This page demonstrates various ways to use the PerlinDOM library for creating smooth, organic animations.</p>
+  
+  <!-- Example 1: Basic Animation -->
+  <h2>1. Basic Animation</h2>
+  <div class="code-block">
+    const basicAnimation = new PerlinDOM({<br>
+    &nbsp;&nbsp;element: document.querySelector('.basic-element'),<br>
+    &nbsp;&nbsp;x: { min: -50, max: 50 },<br>
+    &nbsp;&nbsp;y: { min: -50, max: 50 },<br>
+    &nbsp;&nbsp;speed: 0.01,<br>
+    &nbsp;&nbsp;seed: 123<br>
+    });
+  </div>
+  <div class="example-container">
+    <div class="basic-element"></div>
+  </div>
+  
+  <!-- Example 2: Horizontal Only -->
+  <h2>2. Horizontal-Only Movement</h2>
+  <div class="code-block">
+    const horizontalAnimation = new PerlinDOM({<br>
+    &nbsp;&nbsp;element: document.querySelector('.horizontal-element'),<br>
+    &nbsp;&nbsp;x: { min: -100, max: 100 },<br>
+    &nbsp;&nbsp;y: null, // No vertical movement<br>
+    &nbsp;&nbsp;speed: 0.02<br>
+    });
+  </div>
+  <div class="example-container">
+    <div class="horizontal-element"></div>
+  </div>
+  
+  <!-- Example 3: Multiple Elements -->
+  <h2>3. Multiple Elements with Different Seeds</h2>
+  <div class="code-block">
+    document.querySelectorAll('.particle').forEach((el, index) => {<br>
+    &nbsp;&nbsp;new PerlinDOM({<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;element: el,<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;x: { min: -100, max: 100 },<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;y: { min: -100, max: 100 },<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;speed: 0.01,<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;seed: index * 100 // Different seed for each element<br>
+    &nbsp;&nbsp;});<br>
+    });
+  </div>
+  <div class="example-container">
+    <div class="particle" style="left: 30%; top: 30%"></div>
+    <div class="particle" style="left: 50%; top: 50%"></div>
+    <div class="particle" style="left: 70%; top: 70%"></div>
+    <div class="particle" style="left: 30%; top: 70%"></div>
+    <div class="particle" style="left: 70%; top: 30%"></div>
+  </div>
+  
+  <!-- Example 4: Background Effect -->
+  <h2>4. Creating a Background Effect</h2>
+  <div class="code-block">
+    document.querySelectorAll('.bg-element').forEach(el => {<br>
+    &nbsp;&nbsp;new PerlinDOM({<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;element: el,<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;x: { min: -10, max: 10 },<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;y: { min: -10, max: 10 },<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;speed: 0.002, // Very slow movement<br>
+    &nbsp;&nbsp;&nbsp;&nbsp;seed: Math.random() * 2000<br>
+    &nbsp;&nbsp;});<br>
+    });
+  </div>
+  <div class="example-container bg-container">
+    <div class="bg-element bg-element-1"></div>
+    <div class="bg-element bg-element-2"></div>
+    <div class="bg-element bg-element-3"></div>
+    <div class="content">
+      <h3>Subtle Background Animation</h3>
+      <p>Perfect for creating depth in UI elements</p>
+    </div>
+  </div>
+  
+  <!-- Example 5: Interactive Controls -->
+  <h2>5. Interactive Controls</h2>
+  <div class="code-block">
+    // Create the animation with initial settings<br>
+    const interactiveAnimation = new PerlinDOM({<br>
+    &nbsp;&nbsp;element: document.querySelector('.interactive-element'),<br>
+    &nbsp;&nbsp;x: { min: -50, max: 50 },<br>
+    &nbsp;&nbsp;y: { min: -50, max: 50 },<br>
+    &nbsp;&nbsp;speed: 0.01,<br>
+    &nbsp;&nbsp;seed: 0<br>
+    });<br><br>
+    
+    // Update settings based on user input<br>
+    speedControl.addEventListener('input', () => {<br>
+    &nbsp;&nbsp;// Stop current animation<br>
+    &nbsp;&nbsp;interactiveAnimation.destroy();<br>
+    &nbsp;&nbsp;<br>
+    &nbsp;&nbsp;// Reinitialize with new settings<br>
+    &nbsp;&nbsp;interactiveAnimation.speed = parseFloat(speedControl.value);<br>
+    &nbsp;&nbsp;interactiveAnimation.init(seedControl.value);<br>
+    });
+  </div>
+  <div class="example-container">
+    <div class="interactive-container">
+      <div class="controls">
+        <div class="control-group">
+          <label for="x-range">X Range:</label>
+          <input type="range" id="x-range" min="0" max="100" value="50">
+          <div class="value-display">-50 to 50</div>
+        </div>
+        
+        <div class="control-group">
+          <label for="y-range">Y Range:</label>
+          <input type="range" id="y-range" min="0" max="100" value="50">
+          <div class="value-display">-50 to 50</div>
+        </div>
+        
+        <div class="control-group">
+          <label for="speed">Speed:</label>
+          <input type="range" id="speed" min="0.001" max="0.05" step="0.001" value="0.01">
+          <div class="value-display">0.01</div>
+        </div>
+        
+        <div class="control-group">
+          <label for="seed">Seed:</label>
+          <input type="range" id="seed" min="0" max="1000" step="1" value="0">
+          <div class="value-display">0</div>
+        </div>
+      </div>
+      
+      <div class="preview">
+        <div class="interactive-element"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Load PerlinDOM library -->
+  <script type="module">
+    import PerlinDOM from '../dist/perlindom.es.js';
+    
+    // Example 1: Basic Animation
+    const basicAnimation = new PerlinDOM({
+      element: document.querySelector('.basic-element'),
+      x: { min: -50, max: 50 },
+      y: { min: -50, max: 50 },
+      speed: 0.01,
+      seed: 123
+    });
+    
+    // Example 2: Horizontal Only
+    const horizontalAnimation = new PerlinDOM({
+      element: document.querySelector('.horizontal-element'),
+      x: { min: -100, max: 100 },
+      y: null, // No vertical movement
+      speed: 0.02
+    });
+    
+    // Example 3: Multiple Elements
+    document.querySelectorAll('.particle').forEach((el, index) => {
+      new PerlinDOM({
+        element: el,
+        x: { min: -100, max: 100 },
+        y: { min: -100, max: 100 },
+        speed: 0.01,
+        seed: index * 100 // Different seed for each element
+      });
+    });
+    
+    // Example 4: Background Effect
+    document.querySelectorAll('.bg-element').forEach(el => {
+      new PerlinDOM({
+        element: el,
+        x: { min: -10, max: 10 },
+        y: { min: -10, max: 10 },
+        speed: 0.002, // Very slow movement
+        seed: Math.random() * 2000
+      });
+    });
+    
+    // Example 5: Interactive Controls
+    let interactiveAnimation;
+    
+    function initInteractiveAnimation() {
+      // Destroy previous instance if it exists
+      if (interactiveAnimation) {
+        interactiveAnimation.destroy();
+      }
+      
+      // Get current values
+      const xRange = parseInt(document.getElementById('x-range').value);
+      const yRange = parseInt(document.getElementById('y-range').value);
+      const speed = parseFloat(document.getElementById('speed').value);
+      const seed = parseInt(document.getElementById('seed').value);
+      
+      // Create new instance
+      interactiveAnimation = new PerlinDOM({
+        element: document.querySelector('.interactive-element'),
+        x: { min: -xRange, max: xRange },
+        y: { min: -yRange, max: yRange },
+        speed: speed,
+        seed: seed
+      });
+      
+      // Update displays
+      document.querySelector('#x-range + .value-display').textContent = `-${xRange} to ${xRange}`;
+      document.querySelector('#y-range + .value-display').textContent = `-${yRange} to ${yRange}`;
+      document.querySelector('#speed + .value-display').textContent = speed.toFixed(3);
+      document.querySelector('#seed + .value-display').textContent = seed;
+    }
+    
+    // Initialize
+    initInteractiveAnimation();
+    
+    // Add event listeners
+    document.getElementById('x-range').addEventListener('input', initInteractiveAnimation);
+    document.getElementById('y-range').addEventListener('input', initInteractiveAnimation);
+    document.getElementById('speed').addEventListener('input', initInteractiveAnimation);
+    document.getElementById('seed').addEventListener('input', initInteractiveAnimation);
+  </script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@andresclua/perlindom",
+    "private": false,
+    "version": "0.0.1",
+    "description": "A lightweight JavaScript library for creating smooth, organic animations for DOM elements using Perlin noise",
+    "type": "module",
+    "main": "./dist/perlindom.umd.js",
+    "module": "./dist/perlindom.es.js",
+    "exports": {
+        ".": {
+            "import": "./dist/perlindom.es.js",
+            "require": "./dist/perlindom.umd.js"
+        }
+    },
+    "keywords": [
+        "animation",
+        "perlin",
+        "noise",
+        "dom",
+        "javascript",
+        "motion",
+        "ui"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "devDependencies": {
+        "sass": "^1.80.6",
+        "vite": "^5.4.10"
+    }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>