HTML + CSSHintergründe

Guilloche wie auf Banknoten

Rosetten und Bordüren aus feinen, verschlungenen Linien wie der Sicherheitsdruck einer Banknote, die atmen und mit dem Cursor die Phase ändern, auf Canvas.

Einstellungen

1x
1x
1

Code

<div class="pt-uvq16-guilloche"><canvas></canvas></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Hintergründe

Alle ansehen: Hintergründe

Wofür du ihn nutzen kannst

Guilloche nennt man die gravierten Linienmuster, die Banknoten, Pässe und Aktienurkunden schützen. Hier ist jeder Ring der zentralen Rosette ein Kreis, den zwei Sinuswellen mit unterschiedlicher Phase verformen, sodass sich die Linien zu einem dichten Netz verweben. Dazu kommen zwei kleine Rosetten in den Ecken und wellige Kordelbordüren oben und unten. Alles dreht sich langsam.

Die erste und zweite Farbe verlaufen über die Ringe, die dritte markiert jede vierte Linie wie eine zweite Druckfarbe. Die Dichte fügt mehr Ringe hinzu. Der Cursor verschiebt die Rosette, ändert die Amplitude und beschleunigt die Phase. Passt zu Finanzen, Fintech, Zertifikaten, Luxusgütern und alter Drucktechnik.