Guilloche Background Pattern

Backgrounds

About

An engraved spiral rosette with a rope border, drawn in one quiet colour. Short sparks of light travel along its lines instead of it spinning. From the Midnight Lite template (MIT).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Guilloche Background Pattern to your project and fits it to your theme.

Code

How Guilloche Background Pattern is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { GuillocheRosette } from "@/components/ui/guilloche-rosette"

const settings = {
  lines: 10,
  sparks: true,
  speed: 14,
  intensity: 3.4,
  paper: "#f7f5f0",
  color: "#8a6a2e",
  accent: "#a8803a",
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div className="relative flex min-h-svh w-full items-center justify-center overflow-hidden" style={{ background: s.paper }}>
      <GuillocheRosette lines={s.lines} sparks={s.sparks} speed={s.speed} intensity={s.intensity} color={s.color} accent={s.accent} className="w-[min(560px,86vw)]" />
    </div>
  )
}