106.9K+Download
Zur Nutzungsanleitung springen
SVG Animationsvon supermemoryai

SVG Animations Skill.

Editierbare Animationen für SVG-Pfade, Icons und Illustrationen erstellen.

  • SVG
  • Vektoranimation
OpenDesign herunterladenNutzungsanleitung ansehen
Quellprüfung · svg-animationsSKILL.md
Aufgabe Editierbare Animationen für SVG-Pfade, Icons und Illustrationen erstellen. Ergebnisse Editierbares SVG-Markup mit dem gewählten Animationsmechanismus. Vor dem Start SVG oder Formbriefing mitbringen und Auslöser, Endzustand und Einbettungsziel angeben. Inline-Markup und Bildeinbettung brauchen getrennte Prüfungen für Interaktion, Beschriftung und reduzierte Bewegung.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-11-02 · kein generiertes Beispiel

01 Funktionen

Editierbare Animationen für SVG-Pfade, Icons und Illustrationen erstellen

SVG-Zeichnen, Pfadbewegung, Form-Morphing und gruppierte Transformationen erkunden – mit Prüfungen für Einbettung, Endzustände und reduzierte Bewegung.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

svg-animations ist eine praktische Referenz für von Hand programmierte Vektoranimation. Sie behandelt SVG-Koordinatensysteme, Formen, Pfade, Gruppen, Masken und Filter und verbindet sie mit CSS- oder SMIL-Animationen. Typische Ergebnisse sind sich zeichnende Linien, Objekte auf Bewegungspfaden, wechselnde Icons und animierte Illustrationen.

Die Quelle erklärt Mechanismen, die für korrekte Ergebnisse wichtig sind: Eine Zeichenanimation nutzt die Pfadlänge, Morphing benötigt kompatible Befehlsstrukturen und gruppierte Transformationen können Gesamtbewegung von lokalen Details trennen. Sie fordert außerdem zugängliche Beschriftungen und Verhalten bei reduzierter Bewegung, die in der tatsächlichen Einbettung und Animationsart geprüft werden müssen.

Erwartete Ergebnisse

  • Editierbares SVG-Markup mit dem gewählten Animationsmechanismus.
  • Eine Animation für ein Vektor-Icon, eine Illustration, ein Logo oder einen Ladezustand.
  • Hinweise zu Einbettung und Fallback für den vorgesehenen Webkontext.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Koordinatensystem festlegen

    Eine viewBox definieren und das Motiv aus Grundformen, Pfaden und Gruppen aufbauen. Wiederverwendbare Masken, Verläufe und Filter in Definitionen ablegen.

  2. 02
    Animationsmechanismus wählen

    Für Strichzeichnung, Pfadverfolgung oder Morphing die erforderlichen Attribute und das passende Zeitmodell verwenden. Längen messen und Pfadbefehle abstimmen, statt zu raten.

  3. 03
    Einbettungskontext prüfen

    Transformationen, Endzustände und Schleifenübergänge in der tatsächlichen Seite oder Bildeinbettung prüfen. Beschriftungen und reduzierte Bewegung für den gewählten Mechanismus testen.

02 Einsatzbereiche

Wann einsetzen?

SVG oder Formbriefing mitbringen und Auslöser, Endzustand und Einbettungsziel angeben. Inline-Markup und Bildeinbettung brauchen getrennte Prüfungen für Interaktion, Beschriftung und reduzierte Bewegung.

Gut geeignet

  • Vektorgrafiken brauchen dezente BewegungFür Icons, Ladegrafiken und Illustrationen, die als Markup editierbar bleiben sollen.
  • Ein Pfadeffekt braucht technische AnleitungDie Referenz erklärt Zeichnen, Bewegung und die Interpolation kompatibler Formen.

Zu prüfende Grenzen

  • Browserverhalten muss getestet werdenDie Quelle enthält allgemeine Kompatibilitätsaussagen; einzelne CSS-Pfad- und SMIL-Funktionen sollten in den Zielbrowsern geprüft werden.
  • CSS-Regeln decken nicht jede Engine abEin CSS-Block für reduzierte Bewegung allein stoppt möglicherweise keine SMIL-Zeitleiste. Der tatsächliche Animationsmechanismus braucht einen geeigneten Fallback.

Diese Eingaben mitbringen

  • Vektorgrafik oder FormbriefingEin SVG oder eine Beschreibung der zu erstellenden Pfade und Formen bereitstellen.
  • BewegungsverhaltenEinblendung, Schleife, Morphing oder Pfadverfolgung samt Auslöser festlegen.
  • EinbettungszielInline-SVG oder Bildeinbettung, Zielbrowser und Anforderungen an Barrierefreiheit angeben.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. Geometrie bleibt editierbar

    Pfade und Gruppen lassen sich direkt ändern, statt einen gerenderten Clip zu ersetzen.

  2. Gemessene Zeichenlängen

    Die tatsächliche Pfadlänge verhindert unvollständige Linien oder zu frühes Sichtbarwerden.

  3. Getrennte Transformationen

    Bewegung auf Gruppenebene kann mit lokalen Änderungen koexistieren, ohne den vorgesehenen Ursprung zu verlieren.

04 Beispielbriefing

Ein konkretes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Quelle und Einrichtung prüfen

Ein SVG oder eine Beschreibung der zu erstellenden Pfade und Formen bereitstellen.

Upstream-Quelldatei
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md

Der folgende Verweis öffnet die Originalanleitung. Prüfe vor der Nutzung die Einrichtung des Repositorys; dies ist kein Installationsbefehl.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing
Verwende svg-animations, um eine kleine Erfolgsillustration für meine Checkout-Seite zu erstellen. Zeichne erst einen Kreisumriss, zeige dann ein Häkchen und halte den fertigen Zustand. Bewahre die Grafik als editierbares SVG und miss die tatsächlichen Pfadlängen. Liefere eine Inline-Einbettung mit beschreibendem Titel sowie eine statische Version für reduzierte Bewegung. Teste Transformationsursprünge und vollständig gezeichnete Endkonturen in den Zielbrowsern, statt identisches Verhalten aller Animationsfunktionen vorauszusetzen. Ergänze einen Wiedergabeauslöser zur Prüfung, aber mache aus der Erfolgsanzeige keine endlose, aufmerksamkeitheischende Schleife.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Pfadlängen, Kompatibilität der Morphing-Befehle und Transformationsursprünge prüfen.
  • Endzustände und mögliche Schleifengrenzen in der tatsächlichen Anzeigegröße prüfen.
  • Zugängliche Beschriftung und den Fallback für reduzierte Bewegung des gewählten Mechanismus testen.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
supermemoryai
Repository
supermemoryai/skills
Skill-Datei
SKILL.md
Lizenz
Not confirmed
Geprüfter Stand
2026-11-02 · 64e285d5a4a5

Lesehinweise

  1. LizenzumfangUnbekannt, nicht gemeinfrei. Andere Dateinamen oder externe Bedingungen können existieren; die Vollständigkeit ist nicht bestätigt.
Redaktionelle Quellenzusammenfassung
Editierbare Animationen für SVG-Pfade, Icons und Illustrationen erstellen.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Wie zeichnet sich eine Linie selbst?

Die Quelle macht einen Strich sichtbar, indem sie stroke-dashoffset relativ zu seiner gemessenen Länge verändert. Das steuert den sichtbaren Anteil des Pfads.

Können beliebige zwei Formen ineinander übergehen?

Direkte Pfadinterpolation setzt kompatible Befehlsstrukturen voraus. Formen mit unterschiedlichen Befehlen benötigen Vorbereitung oder einen anderen Morphing-Ansatz.

Reicht eine einzige CSS-Regel für reduzierte Bewegung?

Das hängt vom Animationsmechanismus ab. CSS-Animationen, JavaScript und SMIL können unterschiedliche Behandlung erfordern; deshalb muss das eingebettete Ergebnis praktisch getestet werden.

OpenDesign

Briefing und Designarbeit an einem Ort.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md