Orbital Palettes

// Named palettes for the painted fields: a ground with an upper and a lower
// field blurred over it, the way Orbital paints a ball and ColorWash paints
// a panel. Plain data with no imports, so any component can read it. Pass a
// name to ColorWash as `color`, or an entry (or your own object of the same
// shape) to Orbital or ColorWash as `palette`.

type OrbitalPalette = {
  /** The base color under everything else, any CSS color. */
  ground: string
  /** A CSS background, usually a radial gradient, blurred over the top. */
  upper: string
  /** A CSS background blurred over the bottom. */
  lower: string
  /** The orb's glow: an inner bloom and a halo. ColorWash ignores it. */
  glow?: string
  /** The orb's preferred shading tier. ColorWash ignores it. */
  form?: "off" | "medium" | "strong"
  /** Read by nothing today; kept so older palettes still type-check. */
  period?: "nocturne"
}

type OrbitalPaletteName =
  | "gold"
  | "delft"
  | "warmth"
  | "marigold"
  | "vesper"
  | "aurora"
  | "gesso"
  | "plaster"
  | "moss"
  | "tidepool"
  | "vermillion"
  | "cocoa"
  | "linen"
  | "tarn"
  | "gold-dark"
  | "mint"
  | "rose"
  | "sky"
  | "lilac"

const ORBITAL_PALETTES: Record<OrbitalPaletteName, OrbitalPalette> = {
  gold: {
    ground: "oklch(0.315 0.064 270.3)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.875 0.097 100.4) 0%, oklch(0.850 0.101 100.7 / 0.7) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.365 0.073 269.3) 0%, oklch(0.365 0.073 269.3 / 0.8) 56%, transparent 100%)",
    glow: "oklch(0.936 0.055 102.9)",
    form: "strong",
  },
  delft: {
    ground: "oklch(0.376 0.087 261.9)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.905 0.025 104.4) 0%, oklch(0.887 0.026 104.5 / 0.72) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.467 0.121 261.9) 0%, oklch(0.467 0.121 261.9 / 0.8) 55%, transparent 100%)",
    glow: "oklch(0.978 0.010 261.8)",
    form: "strong",
  },
  warmth: {
    ground: "oklch(0.652 0.147 52.4)",
    upper:
      "radial-gradient(ellipse 130% 100% at 50% 35%, oklch(0.836 0.159 96.2) 0%, oklch(0.814 0.157 92.4 / 0.7) 55%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 90% at 50% 80%, oklch(0.518 0.176 28.9) 0%, oklch(0.487 0.167 27.7 / 0.8) 55%, transparent 100%)",
    glow: "oklch(0.836 0.159 96.2)",
  },
  marigold: {
    ground: "oklch(0.379 0.076 35.6)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.805 0.160 71.9) 0%, oklch(0.805 0.160 71.9 / 0.75) 53%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.243 0.023 32.4) 0%, oklch(0.243 0.023 32.4 / 0.88) 56%, transparent 100%)",
    glow: "oklch(0.829 0.154 76.5)",
    form: "strong",
  },
  vesper: {
    ground: "oklch(0.28 0.06 300)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.90 0.04 55) 0%, oklch(0.90 0.04 55 / 0.7) 53%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.42 0.13 305) 0%, oklch(0.42 0.13 305 / 0.85) 56%, transparent 100%)",
    glow: "oklch(0.82 0.07 50)",
    form: "strong",
  },
  aurora: {
    ground: "oklch(0.318 0.057 158.2)",
    upper:
      "radial-gradient(ellipse 140% 110% at 50% 45%, oklch(0.890 0.129 146.1) 0%, oklch(0.890 0.129 146.1 / 0.5) 55%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 100% at 50% 55%, oklch(0.236 0.055 296.3) 0%, oklch(0.236 0.055 296.3 / 0.5) 55%, transparent 100%)",
  },
  gesso: {
    ground: "oklch(0.563 0.167 30.8)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.919 0.014 53.3) 0%, oklch(0.907 0.011 45.7 / 0.75) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.621 0.161 28.1) 0%, oklch(0.621 0.161 28.1 / 0.8) 55%, transparent 100%)",
    glow: "oklch(0.949 0.014 53.3)",
    form: "strong",
  },
  plaster: {
    ground: "oklch(0.728 0.030 93.8)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.787 0.035 68.7) 0%, oklch(0.787 0.035 68.7 / 0.65) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.547 0.181 27.1) 0%, oklch(0.516 0.172 26.6 / 0.75) 55%, transparent 100%)",
    glow: "oklch(0.561 0.158 29.1)",
    form: "strong",
  },
  moss: {
    ground: "oklch(0.313 0.006 34.3)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.561 0.039 200.7) 0%, oklch(0.507 0.038 203.1 / 0.7) 55%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.373 0.047 214.5) 0%, oklch(0.395 0.046 210.5 / 0.8) 56%, transparent 100%)",
    glow: "oklch(0.659 0.131 237.7)",
    form: "medium",
  },
  tidepool: {
    ground: "oklch(0.179 0.029 240.3)",
    upper:
      "radial-gradient(ellipse 140% 110% at 50% 45%, oklch(0.413 0.082 166.3) 0%, oklch(0.413 0.082 166.3 / 0.5) 55%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 100% at 50% 55%, oklch(0.962 0.077 113.3) 0%, oklch(0.962 0.077 113.3 / 0.5) 55%, transparent 100%)",
  },
  vermillion: {
    ground: "oklch(0.235 0.06 18.06)",
    upper:
      "radial-gradient(ellipse 130% 100% at 50% 38%, oklch(0.66 0.205 30.97) 0%, oklch(0.619 0.205 30.96 / 60%) 55%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 90% at 50% 82%, oklch(0.28 0.136 266.87) 0%, oklch(0.25 0.136 267.22 / 70%) 55%, transparent 100%)",
  },
  cocoa: {
    ground: "oklch(0.306 0.066 45.1)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.794 0.054 64.1) 0%, oklch(0.794 0.054 64.1 / 0.75) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.457 0.115 42.0) 0%, oklch(0.457 0.115 42.0 / 0.84) 56%, transparent 100%)",
    glow: "oklch(0.762 0.120 49.2)",
    form: "strong",
  },
  linen: {
    ground: "oklch(0.267 0.021 54.1)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.782 0.021 58.0) 0%, oklch(0.782 0.021 58.0 / 0.75) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.363 0.028 53.6) 0%, oklch(0.363 0.028 53.6 / 0.85) 56%, transparent 100%)",
    glow: "oklch(0.994 0.000 89.9)",
    form: "strong",
  },
  tarn: {
    ground: "oklch(0.286 0.036 189.5)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.757 0.155 95.6) 0%, oklch(0.757 0.155 95.6 / 0.72) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.468 0.065 190.9) 0%, oklch(0.468 0.065 190.9 / 0.82) 56%, transparent 100%)",
    glow: "oklch(0.831 0.167 96.2)",
    form: "strong",
  },
  "gold-dark": {
    ground: "oklch(0.16 0.04 270)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.29 0.06 100) 0%, oklch(0.27 0.06 101 / 0.7) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.23 0.07 269) 0%, oklch(0.23 0.07 269 / 0.8) 56%, transparent 100%)",
  },
  mint: {
    ground: "oklch(0.315 0.06368 314.9)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.875 0.09651 145.0) 0%, oklch(0.850 0.10049 145.3 / 0.7) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.365 0.07263 313.9) 0%, oklch(0.365 0.07263 313.9 / 0.8) 56%, transparent 100%)",
  },
  rose: {
    ground: "oklch(0.315 0.04852 149.9)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.875 0.07355 340.0) 0%, oklch(0.850 0.07658 340.3 / 0.7) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.365 0.05535 148.9) 0%, oklch(0.365 0.05535 148.9 / 0.8) 56%, transparent 100%)",
  },
  sky: {
    ground: "oklch(0.315 0.04989 29.9)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.875 0.07562 220.0) 0%, oklch(0.850 0.07874 220.3 / 0.7) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.365 0.05691 28.9) 0%, oklch(0.365 0.05691 28.9 / 0.8) 56%, transparent 100%)",
  },
  lilac: {
    ground: "oklch(0.315 0.03869 99.9)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.875 0.05864 290.0) 0%, oklch(0.850 0.06106 290.3 / 0.7) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.365 0.04413 98.9) 0%, oklch(0.365 0.04413 98.9 / 0.8) 56%, transparent 100%)",
  },
}

// One line per palette, for pickers and captions.
const ORBITAL_PALETTE_NOTES: Record<OrbitalPaletteName, string> = {
  gold: "pale gold over indigo, the Orbital default",
  delft: "cream over blue",
  warmth: "gold over terracotta",
  marigold: "gold over rust",
  vesper: "pale peach over violet",
  aurora: "mint over deep green",
  gesso: "warm white over red-orange",
  plaster: "rose over plaster",
  moss: "sky over warm grey",
  tidepool: "teal over deep blue",
  vermillion: "cream over oxblood",
  cocoa: "pale sand over cocoa",
  linen: "pale sand over umber",
  tarn: "gold over deep teal",
  "gold-dark": "dim gold over near-black blue",
  mint: "pale mint over plum",
  rose: "pale pink over deep green",
  sky: "pale blue over dark brown",
  lilac: "pale lilac over dark olive",
}

export { ORBITAL_PALETTES, ORBITAL_PALETTE_NOTES }
export type { OrbitalPalette, OrbitalPaletteName }

import {
  ORBITAL_PALETTE_NOTES,
  ORBITAL_PALETTES,
  type OrbitalPaletteName,
} from "@/components/orbs/orbital-palettes"
import { ColorWash } from "@/components/scene/color-wash"

// Every named palette as a ColorWash swatch. Pass the name to ColorWash as
// `color`, or the entry to Orbital or ColorWash as `palette`.
export default function Demo() {
  return (
    <ul className="grid w-full max-w-3xl grid-cols-2 gap-x-6 gap-y-8 p-6 sm:grid-cols-3 md:grid-cols-6">
      {(Object.keys(ORBITAL_PALETTES) as OrbitalPaletteName[]).map((name) => (
        <li key={name} className="flex flex-col gap-3">
          <ColorWash
            color={name}
            grain={0.35}
            className="aspect-square rounded-xl"
            aria-hidden="true"
          />
          <div className="flex flex-col">
            <span className="font-mono text-xs/4 tracking-widest uppercase">
              {name}
            </span>
            <span className="text-xs/4 text-muted-foreground">
              {ORBITAL_PALETTE_NOTES[name]}
            </span>
          </div>
        </li>
      ))}
    </ul>
  )
}

import type * as React from "react"
import { cn } from "cn"

import {
  ORBITAL_PALETTES,
  type OrbitalPalette,
  type OrbitalPaletteName,
} from "@/components/orbs/orbital-palettes"
import { PAPER_GRAIN } from "@/components/texture/grain-recipes"

/** A palette of your own: a ground and the two fields painted over it. */
type ColorWashPalette = Pick<OrbitalPalette, "ground" | "upper" | "lower">

type ColorWashFinishProps = {
  /**
   * A named palette from `ORBITAL_PALETTES`, the table Orbital paints from
   * too. The default is `delft`, cream over blue.
   */
  color?: OrbitalPaletteName
  /**
   * Your own ground, upper and lower field. Replaces the named `color`; the
   * wash reports `data-color="custom"`.
   */
  palette?: ColorWashPalette
  /** Blur on the upper field, in px. Default 44. */
  upperBlur?: number
  /** Blur on the lower field, in px. Default 52. */
  lowerBlur?: number
  /** Grain opacity, 0 to 1. Default 0.5. */
  grain?: number
  /** Height of the upper field, as a percentage of the frame. Default 78. */
  upperHeight?: number
  /** Height of the lower field, as a percentage of the frame. Default 65. */
  lowerHeight?: number
  /**
   * OKLCH lightness added to the ground, kept within 0 to 1; positive values
   * lighten. Default 0.
   */
  groundLift?: number
}

/**
 * A box painted as a soft color field, a ground with a blurred upper and
 * lower field and a grain overlay, used as a background for cards and
 * sections. `color` picks a named palette from `ORBITAL_PALETTES`, the
 * default is `delft`, and `palette` takes one of your own.
 *
 * Children render above the wash in a full-height wrapper. The wash layers
 * are hidden from assistive tech and take no pointer events.
 */
function ColorWash({
  className,
  color,
  palette,
  style,
  children,
  upperBlur = 44,
  lowerBlur = 52,
  grain = 0.5,
  upperHeight = 78,
  lowerHeight = 65,
  groundLift = 0,
  ...props
}: React.ComponentProps<"div"> & ColorWashFinishProps) {
  const paint = palette ?? ORBITAL_PALETTES[color ?? "delft"]
  return (
    <div
      data-slot="color-wash"
      data-color={palette ? "custom" : (color ?? "delft")}
      className={cn("relative isolate overflow-hidden", className)}
      style={
        {
          "--color-wash-ground": paint.ground,
          "--color-wash-upper": paint.upper,
          "--color-wash-lower": paint.lower,
          ...style,
        } as React.CSSProperties
      }
      {...props}
    >
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            groundLift === 0
              ? "var(--color-wash-ground)"
              : `oklch(from var(--color-wash-ground) clamp(0, calc(l + ${groundLift}), 1) c h)`,
        }}
      >
        <div
          className="absolute inset-x-0 top-[-20%]"
          style={{
            background: "var(--color-wash-upper)",
            height: `${Math.max(0, upperHeight)}%`,
            filter: `blur(${Math.max(0, upperBlur)}px)`,
          }}
        />
        <div
          className="absolute inset-x-0 bottom-[-15%]"
          style={{
            background: "var(--color-wash-lower)",
            height: `${Math.max(0, lowerHeight)}%`,
            filter: `blur(${Math.max(0, lowerBlur)}px)`,
          }}
        />
      </div>
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 mix-blend-overlay"
        style={{
          opacity: Math.min(1, Math.max(0, grain)),
          backgroundImage: PAPER_GRAIN,
        }}
      />
      <div className="relative h-full">{children}</div>
    </div>
  )
}

export { ColorWash }
export type { ColorWashPalette }

// The grain tiles the kit paints with, as data URIs, each held once. Every
// recipe is a tiny SVG turbulence filter; the component using it chooses
// the tile size, opacity and blend. `*_URI` is the bare image for callers
// that wrap it themselves; the unsuffixed name is ready for `background-image`.

/** Stylized paper: coarse turbulence pushed to high contrast, the grain under most of the painted scenes and the Grain `paper` variant. */
export const PAPER_GRAIN_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='4' intercept='1'/%3E%3CfeFuncG type='linear' slope='4' intercept='1'/%3E%3CfeFuncB type='linear' slope='4' intercept='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const PAPER_GRAIN = `url("${PAPER_GRAIN_URI}")`

/** Sandpaper: finer, two-octave turbulence, the Grain `sandpaper` variant and the pours and pools. */
export const SANDPAPER_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='0.8'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SANDPAPER_GRAIN = `url("${SANDPAPER_GRAIN_URI}")`

/** Square: three-octave turbulence at high contrast, the Grain `square` variant. */
export const SQUARE_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%20viewBox=%220%200%20100%20100%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22turbulence%22%20baseFrequency=%222.1%22%20numOctaves=%223%22%20seed=%2211%22%20stitchTiles=%22stitch%22%20result=%22n%22/%3E%3CfeComponentTransfer%20result=%22g%22%3E%3CfeFuncR%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncG%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncB%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22%20in=%22g%22/%3E%3C/filter%3E%3Crect%20width=%22100%%22%20height=%22100%%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E"
export const SQUARE_GRAIN = `url("${SQUARE_GRAIN_URI}")`

/** Plain fractal noise on a 200px tile, the Grain `single` variant. */
export const SINGLE_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SINGLE_NOISE = `url("${SINGLE_NOISE_URI}")`

/** Fine fractal noise on a 512px tile, SoftGrain and the Limb scene. */
export const SOFT_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SOFT_NOISE = `url("${SOFT_NOISE_URI}")`

/** Fine fractal noise the field scenes lay over their art: Fracture Field, Gestural Zip, Solar Flare and Underwater Shaft. */
export const FIELD_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const FIELD_NOISE = `url("${FIELD_NOISE_URI}")`

/** Fine fractal noise on a 256px tile, the mist over the radial charts. */
export const CHART_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const CHART_NOISE = `url("${CHART_NOISE_URI}")`

/** A one-octave dither on a 128px tile, the glass of the neon signs. */
export const DITHER_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"
export const DITHER_NOISE = `url("${DITHER_NOISE_URI}")`

/** A thin film: paper turbulence with its alpha cut to 0.6, the grain GlowSection lays over its light. */
export const GLOW_FILM_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='sf'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sf)'/%3E%3C/svg%3E"
export const GLOW_FILM = `url("${GLOW_FILM_URI}")`

/** Plain fractal noise on a 400px tile, the canvas finish of ColorField and FeltOrb. */
export const CANVAS_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"
export const CANVAS_NOISE = `url("${CANVAS_NOISE_URI}")`