OBERFLÄCHE / SCHWINGEN

Christmas bells ring

Weihnachtsmotiv: Weihnachtsglocken. Die Animation zeigt sanftes Schwingen für Grußkarten und Dekorationen.

Kostenlos nutzbar · CC0-1.0 ↗Animation mit diesem Icon erstellen ↗

96 × 96 PX · SVG

Nach deinen Wünschen

01 / ANIMATION

Dauer (ms)Verzögerung (ms)

BeschleunigungWiederholungRichtungBewegungsstärke1.0×

02 / DARSTELLUNGFarbe#253E35Größe (px)Linienstärke1.7 px

Deine Einstellungen werden in diesem Browser gespeichert. Ohne Konto oder weitere Schritte.

Dein SVG ist bereit.

EIGENSTÄNDIG · SVG + CSS

Codeformat

<svg xmlns="http://www.w3.org/2000/svg" id="svg-christmas-bells-ring-1bnq51y" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="#253e35" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" role="img" aria-labelledby="svg-christmas-bells-ring-1bnq51y-title">
  <title id="svg-christmas-bells-ring-1bnq51y-title">Christmas bells ring</title>
  <!-- Source: Motive Originals
Author: Motive project
Source page: /sources/original/
License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
Original project artwork, CC0-1.0. No attribution required. -->
  <style>@keyframes svg-christmas-bells-ring-1bnq51y-motion-0{0%{transform:rotate(0deg)}20%{transform:rotate(-18deg)}40%{transform:rotate(15deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}100%{transform:rotate(0deg)}}
#svg-christmas-bells-ring-1bnq51y [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-christmas-bells-ring-1bnq51y-motion-0;animation-duration:1400ms;animation-delay:0ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:both}
@media(prefers-reduced-motion:reduce){#svg-christmas-bells-ring-1bnq51y [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M12 5C7 0 5 4 8 5h8c3-1 1-5-4 0 M7 7c-3 1-2 5-5 8l8 3c0-5 3-8 0-10Z M17 7c3 1 2 5 5 8l-8 3c0-5-3-8 0-10Z M5 17a2 2 0 0 0 4 2 M19 17a2 2 0 0 1-4 2 M12 5l-2 2 M12 5l2 2"/>
  </g>
</svg>

Enthält CSS-Animationen und Unterstützung für reduzierte Bewegung. JavaScript und externe Dateien sind nicht erforderlich.

GIF: weißer Hintergrund mit Platz für Bewegung. Farbe, Größe, Timing und Wiederholung werden übernommen.

Beispiel in einer Oberfläche

Klicke, um das Icon erneut abzuspielen und die Reaktion zu sehen. Lokale Demo, die reduzierte Bewegung berücksichtigt.

Bedienelement

—

Ein kleines Detail, bewusst eingesetzt.

Nutze das Motiv neben einem Weihnachtsgruß, einem Festtitel oder einer Geschenkesammlung und zeige wichtige Angaben als Text.

Bewegung soll die Oberfläche unterstützen. Begrenze Wiederholungen für Rückmeldungen und zeige wichtige Informationen auch als Text. Das heruntergeladene SVG berücksichtigt den Wunsch deiner Besucher nach reduzierter Bewegung.

So verwendest du dein SVG ↗

Kategorie: Oberfläche
Bewegung: Schwingen
Zeichenfläche: 24 × 24 viewBox
Lizenz: CC0-1.0
Quelle: Motive OriginalsOriginalgestaltung des Projekts
Urheber: Motive-Projekt
Schlagwörter: Weihnachten, Feiertage, Weihnachtsglocken

Nach deinen Wünschen

Dein SVG ist bereit.

Beispiel in einer Oberfläche

Bedienelement

Ein kleines Detail, bewusst eingesetzt.

Weitere Icons, die dir gefallen könnten.

Advent calendar draw

Bauble ring

Chimney draw

Christmas candle pulse

Christmas card draw