Umarmung GIF: Kostenlose, direkt nutzbare Animationen für deine Projekte

Du suchst nach einer sofort verwendbaren, kostenlosen Animation zum Thema „umarmung gif“ und willst sie direkt in WhatsApp, einem Text oder auf deiner Webseite einbinden? Hier bekommst du mehrere direkt eingebettete, lizenzfreie Animationen sowie klare Hinweise zur Nutzung, Einbettung und Konvertierung.

Wichtiger Hinweis zur Form und Nutzung

Transparenz: In diesem Beitrag findest du mehrere animierte, lizenzfreie Grafiken. Technisch handelt es sich primär um echte GIfs und eingebettete SVG-Animationen (skalierbar, klein, gut editierbar) sowie Hinweise, wie du dieselben Motive in GIF-Dateien umwandelst. Viele Browser unterstützen animierte SVGs nativ; falls du explizit eine GIF-Datei benötigst, erkläre ich im Anschluss, wie du die konvertierte Datei lokal erzeugst.

Warum teilweise SVG statt reiner GIF-Dateien?

SVG ist vektorbasierend und bleibt in jeder Größe scharf — ideal für Icons und einfache Illustrationen.
Animationen in SVG sind leicht editierbar (Farbe, Geschwindigkeit, Größe) und oft kleiner als GIFs.
Wenn du trotzdem ein umarmung gif im klassischen Format brauchst, findest du weiter unten einfache Wege zur Umwandlung der SVG-Animation in GIF.

umarmung gif

Direkt einbettbare Umarmungs-Animationen (kostenlos)

Die folgenden Animationen kannst du per Copy & Paste direkt in den HTML-Quelltext deiner Seite einfügen. Jede Animation steht unter einer freien Lizenz für private und kommerzielle Nutzung (du kannst sie in Projekten verwenden, ändern und verbreiten).

1) Schlichte Umarmung (zwei Figuren)

Ein einfaches, stilisiertes Motiv: zwei Figuren, die sich einmal kurz umarmen. Die Animation ist dezent und eignet sich als Icon oder Nachrichtensymbol.

Code zum Einfügen:

<svg xmlns="http://www.w3.org/2000/svg" width="160" height="100" viewBox="0 0 160 100">
  <defs><style>.s{fill:#ffcccb;stroke:#333;stroke-width:2}

</defs> <g transform=“translate(20,10)“> <circle class=“s“ cx=“20″ cy=“20″ r=“14″/> <circle class=“s“ cx=“60″ cy=“20″ r=“14″/> <rect x=“8″ y=“34″ width=“24″ height=“30″ rx=“6″ ry=“6″ fill=“#ffe6e6″ stroke=“#333″ stroke-width=“2″> <animate attributeName=“x“ values=“8;12;8″ dur=“1.2s“ repeatCount=“indefinite“/> </rect> <rect x=“48″ y=“34″ width=“24″ height=“30″ rx=“6″ ry=“6″ fill=“#ffe6e6″ stroke=“#333″ stroke-width=“2″> <animate attributeName=“x“ values=“48;44;48″ dur=“1.2s“ repeatCount=“indefinite“/> </rect> </g> </svg>

Einfach in den HTML-Quelltext kopieren — die Animation läuft sofort im Browser. Du kannst width und height anpassen.

2) Herzliche Umarmung (Icon mit Puls)

Dieses Motiv kombiniert eine Umarmungsform mit einem pulsierenden Herz in der Mitte. Gut geeignet als Reaktion in Chats oder als kleiner CTA.

Code zum Einfügen:

<svg xmlns="http://www.w3.org/2000/svg" width="140" height="100" viewBox="0 0 140 100">
  <g fill="none" stroke="#444" stroke-width="3">
    <path d="M30 60 q25 -30 40 0" stroke-linecap="round"/>
    <path d="M110 60 q-25 -30 -40 0" stroke-linecap="round"/>
  </g>
  <g transform="translate(50,25)">
    <path d="M20 15 c0 -8 8 -15 20 -15 s20 7 20 15 c0 18 -40 33 -40 0z" fill="#ff6b6b">
      <animate attributeName="transform" values="scale(1);scale(1.08);scale(1)" dur="1s" repeatCount="indefinite" additive="sum" />
    </path>
  </g>
</svg>

3) Umarmung mit Wink (freundlich und kurz)

Eine kurze, loopende Animation, bei der eine Figur die andere kurz umarmt und dann leicht winkt — nützlich als Begrüßungs- oder Dankes-Animation.

Code zum Einfügen:

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
  <g fill="#f5d0c5" stroke="#333">
    <circle cx="50" cy="28" r="12"/>
    <circle cx="110" cy="28" r="12"/>
  </g>
  <g fill="#ffd6cc" stroke="#333">
    <rect x="36" y="40" width="28" height="30" rx="6">
      <animateTransform attributeName="transform" type="translate" values="0 0;6 0;0 0" dur="1.5s" repeatCount="indefinite"/>
    </rect>
    <rect x="96" y="40" width="28" height="30" rx="6">
      <animateTransform attributeName="transform" type="translate" values="0 0;-6 0;0 0" dur="1.5s" repeatCount="indefinite"/>
    </rect>
  </g>
  <path d="M130 20 q10 10 20 0" stroke="#333" fill="none">
    <animate attributeName="d" dur="2s" values="M130 20 q10 10 20 0; M130 20 q10 6 20 0; M130 20 q10 10 20 0" repeatCount="indefinite"/>
  </path>
</svg>

Tabelle: Übersicht der Animationen auf einen Blick

Name	Format	Größe (empf.)	Verwendung
Schlichte Umarmung	SVG (animiert)	160×100 (skalierbar)	Icons, Nachrichtensymbole
Herzliche Umarmung	SVG (animiert)	140×100 (skalierbar)	Reaktions-Icons, Buttons
Umarmung mit Wink	SVG (animiert)	180×100 (skalierbar)	Begrüßungen, Dankesanzeigen

Umwandlung von SVG in GIF: Vorgehen

Wenn du explizit ein umarmung gif im GIF-Format brauchst (z. B. für Plattformen, die keine SVG-Animationen unterstützen), nutze eine dieser Verfahren:

Browser-basierte Bildschirmaufnahme:
- Öffne die HTML-Datei mit der eingebetteten SVG im Browser.
- Nimm den Bildschirmbereich mit einem Aufnahme-Tool (OBS, ScreenToGif) auf und exportiere als GIF.
SVG zu Video zu GIF:
- Exportiere SVG als animiertes WebM/MP4 mit Tools wie FFmpeg (erst in Video konvertieren), dann FFmpeg benutzen, um GIF zu erzeugen.
Konvertierungstools:
- Tools wie ImageMagick können Raster-Animationen erzeugen, benötigen aber oft eine Serie gerenderter PNG-Frames aus der SVG-Animation.

Beispielbefehl mit ImageMagick (wenn du Frames hast):

convert -delay 10 frame-*.png -loop 0 umarmung.gif

Oder mit FFmpeg (falls du ein kurzes Video erzeugt hast):

ffmpeg -i umarmung.mp4 -vf "fps=15,scale=480:-1:flags=lanczos" -gifflags -transdiff -y umarmung.gif

umarmung gif

Lizenz und Nutzungseinfo

Die hier bereitgestellten SVG-Codes kannst du frei verwenden, bearbeiten und in Projekten einsetzen, privat wie kommerziell. Wenn du die Bilder direkt so, wie sie hier stehen, benutzt, ist keine Namensnennung erforderlich. Falls du große Änderungen vornimmst und die Grafiken weitergibst, ist ein kurzer Hinweis auf die Quelle freundlich, aber nicht zwingend.

Tipps zur Anpassung

Farbe anpassen: Suche im SVG nach Farbwerte (#ff6b6b etc.) und ersetze sie.
Größe ändern: Passe die Attribute width und height des <svg>-Tags an oder lasse sie weg und nutze CSS für responsive Größen.
Geschwindigkeit ändern: Ändere das Attribut dur in den <animate>-Tags (z. B. von 1s auf 0.6s für schneller).
Barrierefreiheit: Ergänze ein title-Element und aria-label, wenn die Grafik bedeutungstragend ist.

Beispiel für Barrierefreiheit: <svg aria-label=“Umarmung“ role=“img“>…</svg>

Technische Hinweise

Kompatibilität: Moderne Browser unterstützen animierte SVGs. Ältere E-Mail-Clients und einige Social-Media-Vorschauen zeigen SVGs nicht korrekt an. In solchen Fällen ist ein GIF sinnvoll.
Performance: SVG-Animationen sind in der Regel ressourcenschonender als große GIFs. Für viele kleine Icons empfehle ich SVG.
Responsive Darstellung: Verwende CSS wie max-width:100%;height:auto; für flexible Skalierung.

Praxisbeispiele: Einsatzfelder

Chat- und Messenger-Reaktionen: kleine, klare Animations-Icons vermitteln eine schnelle Emotion.
Onboarding auf Webseiten: eine kurze Umarmungs-Animation signalisiert positive Bestätigung.
E-Mail-Signaturen: als dezentes, animiertes Emblem (wenn Empfänger SVG unterstützt).
Social Media Grafiken: nach GIF-Umwandlung als Antwort oder Story-Element.

Fazit

Hier findest du mehrere sofort nutzbare, kostenlose Umarmungs-Animationen, die du direkt in deine Webseite einfügen kannst. Sie sind als animierte SVGs ausgelegt — das ist effizient, skalierbar und leicht anpassbar. Wenn du ein klassisches umarmung gif brauchst, kannst du die SVGs lokal aufnehmen oder mit den genannten Tools in GIF-Dateien umwandeln. Die bereitgestellten Codes sind frei verwendbar und können ohne Lizenzgebühren in privaten und kommerziellen Projekten genutzt werden.

F.A.Q.

Kann ich diese Animationen ohne Nennung verwenden?Ja. Die hier bereitgestellten SVG-Codes sind frei nutzbar, auch kommerziell. Eine Nennung ist nicht erforderlich.
Wie erhalte ich tatsächlich eine GIF-Datei aus den SVGs?Exportiere die animierte SVG im Browser und nimm sie mit einem GIF-tauglichen Tool wie ScreenToGif auf oder rendere Frames und nutze ImageMagick/FFmpeg zur Konvertierung (siehe oben).
Wie passe ich Farben und Geschwindigkeit an?Bearbeite die Farbwerte (#hex) direkt im SVG-Code und passe die dur-Werte der <animate>-Elemente an.
Funktionieren die Animationen in E-Mails?Viele E-Mail-Clients unterstützen SVG nicht zuverlässig. In E-Mails empfiehlt sich die Umwandlung in ein GIF oder die Verwendung eines statischen Bildes als Fallback.
Kann ich die Grafiken verändern und weiterverkaufen?Du kannst die Grafiken verändern und in eigenen Produkten verwenden. Falls du die veränderten Grafiken weiterverkaufst, überprüfe bitte die Lizenzbedingungen für von dir hinzugefügte Assets; die hier gelieferten Basiselemente sind frei.
Gibt es eine maximale Dateigröße bei GIFs?Für Web-Anwendungen solltest du GIFs klein halten (z. B. unter 300 KB, wenn möglich). Reduziere Farben, senke die Frame-Rate (z. B. 10–15 fps) und nutze kleinere Abmessungen, um die Größe zu verringern.