licher255/svg-techo

Was macht svg-techo?

Nutze die wiederverwendbaren JavaScript-Module in assets/lib/. Ändere das Aussehen über Generatorparameter. Erweitere das entsprechende Modul, wenn eine Aufgabe neues Verhalten benötigt, und überprüfe dann die normalen Einstiegspunkte.

Einstiegspunkte

• assets/lib/index.mjs exportiert materialKinds, svgKinds, referencePresets, renderSvg(kind, options) und createLightRenderer(canvas, options).
• assets/lib/index.d.mts bietet TypeScript-Deklarationen.
• scripts/render-svg.mjs ist die Node-CLI.
• scripts/self-test.mjs überprüft Geometrie, Eingabegrenzen, Determiniertheit, Schleifen und RGBA-Eingabe.
• scripts/browser-check.html überprüft SVG-Dekodierung, WebGL, Alpha, Phase und Bereinigung.

Löse diese Pfade relativ zu dieser SKILL.md auf. Kopiere das vollständige Verzeichnis assets/lib/ in die versionskontrollierte Quelle des Zielprojekts, bevor du es importierst, und bewahre die internen Modulimporte.

Arbeitsablauf

1. Identifiziere den Zweck, die Abmessungen, die Palette, die Animation und die Transparenzanforderungen des Assets. Lese die vorhandenen Design-Tokens des Projekts, bevor du Farben auswählst.
2. Lese die API-Referenz. Kopiere referencePresets[kind] und bearbeite die verschachtelte options[kind]-Konfiguration des Generators. Bestätige die Bedeutung von Radius, Abstand, Anzahl und Strichbreite.
3. Für Websites oder Marketing-Videos lies den entsprechenden Abschnitt der Integrationsanleitung. Halte Parameter und Seed mit dem Projekt fest, damit spätere Versionen das Asset reproduzieren können.
4. Führe den Code aus und überprüfe die tatsächliche Ausgabe. Überprüfe SVG-Abmessungen, Transparenz und Beschneidung. Überprüfe WebGL-Kompilierung, Rendering und Bereinigung. Überprüfe Videobildanzahl, Loop-Übergänge und Alpha im Ziel-Workflow.
5. Liefere den angeforderten Code, Aufrufbeispiele, Konfiguration und Ausgabedateien. Dokumentiere die tatsächlich verwendeten Parameter.

Module

Modul	Verantwortung
geometry.mjs	Verteilt an geometry-a, geometry-b und dot-matrix
dot-matrix.mjs	Punktabmessungen, Randabstände, Formen und Layouts
fields.mjs	Verteilt an fields-audited für Konturen, Halbton, ASCII und Pixelcode
light.mjs	WebGL-Streak- und Flame-Rendering mit expliziter Phase
common.mjs	Gemeinsame Validierung, deterministischer Zufall, Phasennormalisierung, XML-Escaping

Erweiterungsregeln

• Halte SVG-Generatoren rein und deterministisch. Statische Generatoren bleiben statisch, es sei denn, der Aufrufer ändert ihre spezifischen Parameter. WebGL und Konturen mit aktivierter Bewegung akzeptieren Phase.
• Behalte den Seed über Videobilder hinweg fest. Leite Animationsparameter aus der Bildnummer ab.
• Aktualisiere Exporte, Deklarationen, Parameterdokumentation und relevante Prüfungen, wenn du eine Art oder einen Parameter hinzufügst.
• Verwende die Bibliothek erneut, wenn du an React, Three.js oder Remotion anpasst.
• Dot-Matrix verwendet dotMatrix.dotSize, spacing, layout und range. Der Standarddurchmesser beträgt 8 und der Randabstand 24. Die Dichte folgt dem Abstand oder den Zeilen/Spalten.
• Überprüfe transparente Grafiken auf dem vorgesehenen Hintergrund. Validiere dekodiertes Video-Alpha im Zieleditor.
• Verwende Geschäftsdaten und einen Standard-Encoder für maschinenlesbare Barcodes.

Beispielaufgaben

• Generiere markenfarbige Kontur-SVGs und behalte ihre Parameter.
• Animiere hudLines.rotation anhand einer Remotion-Bildnummer.
• Verwende Produktbild-RGBA als Halbton-Alpha-Maske oder ASCII-Eingabe.
• Passe die Richtungs- und Energieparameter des Light-Renderers für ein Loop-Overlay an.