PFEILE / PULSIEREN

Expand pulse

Vier Eckpfeile pulsieren sanft zum Vergrößern einer Vorschau oder zum Wechsel in den Vollbildmodus.

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-expand-pulse-qwdtlq" 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-expand-pulse-qwdtlq-title">
  <title id="svg-expand-pulse-qwdtlq-title">Expand pulse</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-expand-pulse-qwdtlq-motion-0{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
#svg-expand-pulse-qwdtlq [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-expand-pulse-qwdtlq-motion-0;animation-duration:1500ms;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-expand-pulse-qwdtlq [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M9 3H3v6 M3 3l6 6 M15 3h6v6 M21 3l-6 6 M3 15v6h6 M3 21l6-6 M21 15v6h-6 M21 21l-6-6"/>
  </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.

Schrittnavigation

—

Ein kleines Detail, bewusst eingesetzt.

Beschrifte die Aktion eindeutig und biete eine klare Möglichkeit, die vergrößerte Ansicht zu verlassen.

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: Pfeile
Bewegung: Pulsieren
Zeichenfläche: 24 × 24 viewBox
Lizenz: CC0-1.0
Quelle: Motive OriginalsOriginalgestaltung des Projekts
Urheber: Motive-Projekt
Schlagwörter: Vergrößern, Vollbild, Maximieren

Nach deinen Wünschen

Dein SVG ist bereit.

Beispiel in einer Oberfläche

Schrittnavigation

Ein kleines Detail, bewusst eingesetzt.

Weitere Icons, die dir gefallen könnten.

Arrow down left

Arrow down

Arrow left

Arrow right

Arrow up draw