// Adapted from nice-components/fallback-avatar — Generative SVG avatar
// Integration: TopBar user avatar, project cards
// Theme-agnostic — works on light and dark

import { useMemo, useId } from "react";
import { cn } from "@/lib/utils";

interface FallbackAvatarProps {
  name: string;
  src?: string;
  size?: number;
  className?: string;
}

const COLORS = ["#F6C750", "#E63525", "#050D4C", "#D4EBEE"];

function hash(name: string): number {
  let h = 0;
  for (let i = 0; i < name.length; i++) {
    const ch = name.charCodeAt(i);
    h = ((h << 5) - h + ch) | 0;
  }
  return Math.abs(h);
}

function getUnit(number: number, range: number, index?: number): number {
  const value = number % range;
  if (index && Math.floor((number / Math.pow(10, index)) % 10) % 2 === 0) {
    return -value;
  }
  return value;
}

function getRandomColor(number: number, colors: string[], range: number) {
  return colors[number % range];
}

export function FallbackAvatar({ name, src, size = 32, className }: FallbackAvatarProps) {
  const maskId = useId();
  const filterId = useId();

  const properties = useMemo(() => {
    const num = hash(name);
    const range = COLORS.length;
    return Array.from({ length: 3 }, (_, i) => ({
      color: getRandomColor(num + i, COLORS, range),
      translateX: getUnit(num * (i + 1), size / 10, 1),
      translateY: getUnit(num * (i + 1), size / 10, 2),
      scale: 1.2 + getUnit(num * (i + 1), size / 20) / 10,
      rotate: getUnit(num * (i + 1), 360, 1),
    }));
  }, [name, size]);

  if (src) {
    return (
      <img
        src={src}
        alt={name}
        className={cn("rounded-full object-cover", className)}
        style={{ width: size, height: size }}
      />
    );
  }

  return (
    <svg
      viewBox={`0 0 ${size} ${size}`}
      fill="none"
      width={size}
      height={size}
      className={cn("rounded-full", className)}
    >
      <mask id={maskId} maskUnits="userSpaceOnUse" x={0} y={0} width={size} height={size}>
        <rect width={size} height={size} rx={size * 2} fill="#FFFFFF" />
      </mask>
      <g mask={`url(#${maskId})`}>
        <rect width={size} height={size} fill={properties[0].color} />
        <path
          filter={`url(#${filterId})`}
          d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
          fill={properties[1].color}
          transform={`translate(${properties[1].translateX} ${properties[1].translateY}) rotate(${properties[1].rotate} ${size / 2} ${size / 2}) scale(${properties[1].scale})`}
        />
        <path
          filter={`url(#${filterId})`}
          style={{ mixBlendMode: "overlay" }}
          d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
          fill={properties[2].color}
          transform={`translate(${properties[2].translateX} ${properties[2].translateY}) rotate(${properties[2].rotate} ${size / 2} ${size / 2}) scale(${properties[2].scale})`}
        />
      </g>
      <defs>
        <filter id={filterId} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur stdDeviation={7} result="effect1_foregroundBlur" />
        </filter>
      </defs>
    </svg>
  );
}
Prop	Type	Default	Description
name*	`string`	—	Name to generate avatar from
src	`string`	—	Image URL (falls back to SVG if missing)
size	`number`	`32`	Avatar size in pixels
className	`string`	—	Additional CSS classes
FallbackAvatar

Preview

API Reference
