feat: v0.0.10 ⚡️

feat: v0.0.10 ⚡️

meshgrad/dist/index.mjs

@@ -1,2 +1,2 @@
-var i=()=>Math.round(Math.random()*360),d=n=>Math.round(Math.random()*(n*100)%100),c=(n,t,e)=>Math.round(t/e*(n*100)%100),g=n=>{n=n.replace(/#/g,""),n.length===3&&(n=n.split("").map(function(b){return b+b}).join(""));var t=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(n);if(!t)return null;var e=parseInt(t[1],16),r=parseInt(t[2],16),a=parseInt(t[3],16);e/=255,r/=255,a/=255;var o=Math.max(e,r,a),s=Math.min(e,r,a),u=(o+s)/2;if(o==s)u=0;else{var m=o-s;switch(o){case e:u=(r-a)/m+(r<a?6:0);break;case r:u=(a-e)/m+2;break;case a:u=(e-r)/m+4;break}u/=6}return u=Math.round(360*u),u},p=(n,t)=>Array.from({length:n},(e,r)=>r===0?`hsl(${t}, 100%, 80%)`:r<n/1.4?`hsl(${t-30*(1-2*(r%2))*(r>2?r/2:r)}, 100%, ${76-r*(1-2*(r%2))*1.75}%)`:`hsl(${t-150*(1-2*(r%2))}, 100%, ${76-r*(1-2*(r%2))*1.25}%)`),M=(n,t,e)=>Array.from({length:n},(r,a)=>`radial-gradient(at ${e?c(a,e,n):d(a)}% ${e?c(a*10,e,n):d(a*10)}%, ${t[a]} 0px, transparent 50%)
-`),f=(n,t,e)=>{let r=p(n,t??i()),a=M(n,r,e||void 0);return[r[0],a.join(",")]},$=(n,t,e)=>{let[r,a]=f(n,t?g(t):void 0,e??void 0);return`background-color: ${r}; background-image:${a}`},l=(n,t,e)=>{let[r,a]=f(n,t?g(t):void 0,e??void 0);return{backgroundColor:r,backgroundImage:a}};export{l as generateJSXMeshGradient,$ as generateMeshGradient};
+var i=()=>Math.round(Math.random()*360),c=n=>Math.round(Math.random()*(n*100)%100),g=(n,t,e)=>Math.round(t/e*(n*100)%100),d=n=>{if(!!n){n=n.replace(/#/g,""),n.length===3&&(n=n.split("").map(function(b){return b+b}).join(""));var t=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(n);if(!!t){var e=parseInt(t[1],16),r=parseInt(t[2],16),a=parseInt(t[3],16);e/=255,r/=255,a/=255;var o=Math.max(e,r,a),s=Math.min(e,r,a),u=(o+s)/2;if(o==s)u=0;else{var m=o-s;switch(o){case e:u=(r-a)/m+(r<a?6:0);break;case r:u=(a-e)/m+2;break;case a:u=(e-r)/m+4;break}u/=6}return u=Math.round(360*u),u}}},p=(n,t)=>Array.from({length:n},(e,r)=>r===0?`hsl(${t}, 100%, 80%)`:r<n/1.4?`hsl(${t-30*(1-2*(r%2))*(r>2?r/2:r)}, 100%, ${76-r*(1-2*(r%2))*1.75}%)`:`hsl(${t-150*(1-2*(r%2))}, 100%, ${76-r*(1-2*(r%2))*1.25}%)`),M=(n,t,e)=>Array.from({length:n},(r,a)=>`radial-gradient(at ${e?g(a,e,n):c(a)}% ${e?g(a*10,e,n):c(a*10)}%, ${t[a]} 0px, transparent 50%)
+`),f=(n,t,e)=>{let r=p(n,t||i()),a=M(n,r,e||void 0);return[r[0],a.join(",")]},$=(n,t,e)=>{let[r,a]=f(n,d(t)?d(t):void 0,e||void 0);return`background-color: ${r}; background-image:${a}`},k=(n,t,e)=>{let[r,a]=f(n,d(t)?d(t):void 0,e||void 0);return{backgroundColor:r,backgroundImage:a}};export{k as generateJSXMeshGradient,$ as generateMeshGradient};

meshgrad/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "A tiny utility for generating CSS Mesh Gradients",
   "homepage": "https://meshgrad.cretu.dev",
   "name": "meshgrad",

meshgrad/src/index.ts

@@ -7,49 +7,57 @@ const getPercent = (value: number): number => {
   return Math.round((Math.random() * (value * 100)) % 100);
 };
 
-const getHashPercent = (value: number, hash: number, length: number): number => {
-  return Math.round((hash / length * (value * 100)) % 100);
+const getHashPercent = (
+  value: number,
+  hash: number,
+  length: number
+): number => {
+  return Math.round(((hash / length) * (value * 100)) % 100);
 };
 
-const hexToHSL = (hex:string): number => {
-  hex = hex.replace(/#/g, '');
-    if (hex.length === 3) {
-        hex = hex.split('').map(function (hex) {
-            return hex + hex;
-        }).join('');
+const hexToHSL = (hex?: string): number | undefined => {
+  if (!hex) return undefined;
+  hex = hex.replace(/#/g, "");
+  if (hex.length === 3) {
+    hex = hex
+      .split("")
+      .map(function (hex) {
+        return hex + hex;
+      })
+      .join("");
+  }
+  var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex);
+  if (!result) {
+    return undefined;
+  }
+  var r = parseInt(result[1], 16);
+  var g = parseInt(result[2], 16);
+  var b = parseInt(result[3], 16);
+  (r /= 255), (g /= 255), (b /= 255);
+  var max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  var h = (max + min) / 2;
+  if (max == min) {
+    h = 0;
+  } else {
+    var d = max - min;
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
     }
-    var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex);
-    if (!result) {
-        return null;
-    }
-    var r = parseInt(result[1], 16);
-    var g = parseInt(result[2], 16);
-    var b = parseInt(result[3], 16);
-    r /= 255, g /= 255, b /= 255;
-    var max = Math.max(r, g, b),
-        min = Math.min(r, g, b);
-    var h = (max + min) / 2;
-    if (max == min) {
-        h = 0;
-    } else {
-        var d = max - min;
-        switch (max) {
-        case r:
-            h = (g - b) / d + (g < b ? 6 : 0);
-            break;
-        case g:
-            h = (b - r) / d + 2;
-            break;
-        case b:
-            h = (r - g) / d + 4;
-            break;
-        }
-        h /= 6;
-    }
-    h = Math.round(360 * h);
+    h /= 6;
+  }
+  h = Math.round(360 * h);
 
-return h
-}
+  return h;
+};
 
 const genColors = (length: number, initialHue: number): string[] => {
   return Array.from({ length }, (_, i) => {
@@ -76,27 +84,45 @@ const genColors = (length: number, initialHue: number): string[] => {
 
 const genGrad = (length: number, colors: string[], hash?: number): string[] => {
   return Array.from({ length }, (_, i) => {
-    return `radial-gradient(at ${hash ? getHashPercent(i, hash, length) : getPercent(i)}% ${hash ? getHashPercent(i * 10, hash, length) : getPercent(i * 10)}%, ${
+    return `radial-gradient(at ${
+      hash ? getHashPercent(i, hash, length) : getPercent(i)
+    }% ${hash ? getHashPercent(i * 10, hash, length) : getPercent(i * 10)}%, ${
       colors[i]
     } 0px, transparent 50%)\n`;
   });
 };
 
 const genStops = (length: number, baseColor?: number, hash?: number) => {
   // get the color for the radial gradient
-  const colors = genColors(length, baseColor ?? getColor());
+  const colors = genColors(length, baseColor ? baseColor : getColor());
   // generate the radial gradient
   const proprieties = genGrad(length, colors, hash ? hash : undefined);
   return [colors[0], proprieties.join(",")];
 };
 
-const generateMeshGradient = (length: number, baseColor?: string, hash?: number) => {
-  const [bgColor, bgImage] = genStops(length, baseColor ? hexToHSL(baseColor) : undefined, hash ?? undefined);
+const generateMeshGradient = (
+  length: number,
+  baseColor?: string,
+  hash?: number
+) => {
+  const [bgColor, bgImage] = genStops(
+    length,
+    hexToHSL(baseColor) ? hexToHSL(baseColor) : undefined,
+    hash ? hash : undefined
+  );
   return `background-color: ${bgColor}; background-image:${bgImage}`;
 };
 
-const generateJSXMeshGradient = (length: number, baseColor?: string, hash?: number) => {
-  const [bgColor, bgImage] = genStops(length, baseColor ? hexToHSL(baseColor) : undefined, hash ?? undefined);
+const generateJSXMeshGradient = (
+  length: number,
+  baseColor?: string,
+  hash?: number
+) => {
+  const [bgColor, bgImage] = genStops(
+    length,
+    hexToHSL(baseColor) ? hexToHSL(baseColor) : undefined,
+    hash ? hash : undefined
+  );
   return { backgroundColor: bgColor, backgroundImage: bgImage };
 };
 

website/package.json

@@ -94,7 +94,7 @@
     "eslint": "^8.20.0",
     "eslint-config-next": "12.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "meshgrad": "^0.0.6",
+    "meshgrad": "^0.0.10",
     "postcss": "^8.4.14",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.1.6",