From ae450f2df24151f0abf162149b7f714571246fbd Mon Sep 17 00:00:00 2001
From: Laurids Kern <me@lauridskern.com>
Date: Mon, 21 Nov 2022 23:15:17 +0100
Subject: [PATCH 1/4] Fix: Text size for single letters, Fix: vertical
 centering

---
 pages/api/avatar/[name].tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/api/avatar/[name].tsx b/pages/api/avatar/[name].tsx
index f6db18e..ae4d20d 100644
--- a/pages/api/avatar/[name].tsx
+++ b/pages/api/avatar/[name].tsx
@@ -36,13 +36,13 @@ export default async function (req: NextRequest, res: NextResponse) {
         {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>

From bf38a051c44adf146b7c133eac685785f9f906be Mon Sep 17 00:00:00 2001
From: Laurids Kern <me@lauridskern.com>
Date: Mon, 21 Nov 2022 23:32:10 +0100
Subject: [PATCH 2/4] Add: optional noise filter

---
 pages/api/avatar/[name].tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/pages/api/avatar/[name].tsx b/pages/api/avatar/[name].tsx
index ae4d20d..cfadcbe 100644
--- a/pages/api/avatar/[name].tsx
+++ b/pages/api/avatar/[name].tsx
@@ -11,6 +11,7 @@ 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 size = Number(url.searchParams.get("size") || "120");
   const [username, type] = name?.split(".") || [];
   const fileType = type?.includes("svg") ? "svg" : "png";
@@ -31,8 +32,26 @@ export default async function (req: NextRequest, res: NextResponse) {
             <stop offset="0%" stopColor={gradient.fromColor} />
             <stop offset="100%" stopColor={gradient.toColor} />
           </linearGradient>
+          {fileType === "svg" && noise !== null && (
+            <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="url(#gradient)"
+          x="0"
+          y="0"
+          width={size}
+          height={size}
+          filter="url(#noise)"
+        />
         {fileType === "svg" && text && (
           <text
             x="50%"

From 57af7a4dca152cafa18d9957e85f69a2c1fa154e Mon Sep 17 00:00:00 2001
From: Laurids Kern <me@lauridskern.com>
Date: Tue, 22 Nov 2022 15:15:09 +0100
Subject: [PATCH 3/4] Fix: .png rendering

---
 pages/api/avatar/[name].tsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/pages/api/avatar/[name].tsx b/pages/api/avatar/[name].tsx
index cfadcbe..7f1e9b1 100644
--- a/pages/api/avatar/[name].tsx
+++ b/pages/api/avatar/[name].tsx
@@ -32,17 +32,16 @@ export default async function (req: NextRequest, res: NextResponse) {
             <stop offset="0%" stopColor={gradient.fromColor} />
             <stop offset="100%" stopColor={gradient.toColor} />
           </linearGradient>
-          {fileType === "svg" && noise !== null && (
-            <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>
-          )}
+
+          <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)"
@@ -50,7 +49,7 @@ export default async function (req: NextRequest, res: NextResponse) {
           y="0"
           width={size}
           height={size}
-          filter="url(#noise)"
+          filter={fileType === "svg" && noise !== null ? "url(#noise)" : ""}
         />
         {fileType === "svg" && text && (
           <text

From c10e64523215a1eddf5ef13218bdaaf0ea17763d Mon Sep 17 00:00:00 2001
From: Laurids Kern <me@lauridskern.com>
Date: Tue, 22 Nov 2022 16:48:57 +0100
Subject: [PATCH 4/4] Add: Support for solid color, adjust saturation &
 lightness for gradient

---
 pages/api/avatar/[name].tsx | 13 ++++++++++---
 utils/gradient.ts           | 10 +++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/pages/api/avatar/[name].tsx b/pages/api/avatar/[name].tsx
index f6db18e..2b86a82 100644
--- a/pages/api/avatar/[name].tsx
+++ b/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,13 @@ 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 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}
@@ -32,7 +33,13 @@ export default async function (req: NextRequest, res: NextResponse) {
             <stop offset="100%" stopColor={gradient.toColor} />
           </linearGradient>
         </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}
+        />
         {fileType === "svg" && text && (
           <text
             x="50%"
diff --git a/utils/gradient.ts b/utils/gradient.ts
index 8ff5362..37eb07a 100644
--- a/utils/gradient.ts
+++ b/utils/gradient.ts
@@ -9,7 +9,7 @@ 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 {
@@ -17,3 +17,11 @@ export function generateGradient(username: string) {
     toColor: second,
   };
 }
+
+export function generateSolidColor(username: string) {
+  const c = color({ h: djb2(username) % 360, s: 0.7, l: 0.65 });
+
+  return {
+    color: c.toHexString(),
+  };
+}