Add: optional noise filter, Add: solid color support, Fix: Text size for single letters, Fix: vertical centering

pages/api/avatar/[name].tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from "@vercel/og";
 import { NextRequest, NextResponse } from "next/server";
 import { renderToReadableStream } from "react-dom/server";
-import { generateGradient } from "../../../utils/gradient";
+import { generateGradient, generateSolidColor } from "../../../utils/gradient";
 
 export const config = {
   runtime: "experimental-edge",
@@ -11,12 +11,14 @@ export default async function (req: NextRequest, res: NextResponse) {
   const url = new URL(req.url);
   const name = url.searchParams.get("name");
   const text = url.searchParams.get("text");
+  const noise = url.searchParams.get("noise");
+  const solid = url.searchParams.get("solid");
   const size = Number(url.searchParams.get("size") || "120");
   const [username, type] = name?.split(".") || [];
   const fileType = type?.includes("svg") ? "svg" : "png";
 
   const gradient = generateGradient(username || Math.random() + "");
-
+  const solidColor = generateSolidColor(username || Math.random() + "");
   const avatar = (
     <svg
       width={size}
@@ -31,18 +33,35 @@ export default async function (req: NextRequest, res: NextResponse) {
             <stop offset="0%" stopColor={gradient.fromColor} />
             <stop offset="100%" stopColor={gradient.toColor} />
           </linearGradient>
+
+          <filter id="noise">
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency={Math.min(Math.max(size / 150, 0.6), 2)}
+              result="noisy"
+            />
+            <feColorMatrix type="saturate" values="0" />
+            <feBlend in="SourceGraphic" in2="noisy" mode="multiply" />
+          </filter>
         </defs>
-        <rect fill="url(#gradient)" x="0" y="0" width={size} height={size} />
+        <rect
+          fill={solid != null ? solidColor.color : "url(#gradient)"}
+          x="0"
+          y="0"
+          width={size}
+          height={size}
+          filter={fileType === "svg" && noise !== null ? "url(#noise)" : ""}
+        />
         {fileType === "svg" && text && (
           <text
             x="50%"
-            y="50%"
+            y={text.length > 1 ? "54%" : "55.5%"}
             alignmentBaseline="central"
             dominantBaseline="central"
             textAnchor="middle"
             fill="#fff"
             fontFamily="sans-serif"
-            fontSize={(size * 0.9) / text.length}
+            fontSize={(size * 0.7) / text.length}
           >
             {text}
           </text>

utils/gradient.ts

@@ -9,11 +9,19 @@ export function djb2(str: string) {
 }
 
 export function generateGradient(username: string) {
-  const c1 = color({ h: djb2(username) % 360, s: 0.95, l: 0.5 });
+  const c1 = color({ h: djb2(username) % 360, s: 0.8, l: 0.6 });
   const second = c1.triad()[1].toHexString();
 
   return {
     fromColor: c1.toHexString(),
     toColor: second,
   };
 }
+
+export function generateSolidColor(username: string) {
+  const c = color({ h: djb2(username) % 360, s: 0.7, l: 0.65 });
+
+  return {
+    color: c.toHexString(),
+  };
+}