MEDIEN / ZEICHNEN

Shuffle draw

Zwei gekreuzte Pfeile werden für das Mischen und die zufällige Wiedergabe gezeichnet.

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-shuffle-draw-1hrsjwl" 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-shuffle-draw-1hrsjwl-title">
  <title id="svg-shuffle-draw-1hrsjwl-title">Shuffle draw</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-shuffle-draw-1hrsjwl-motion-0{0%{stroke-dashoffset:60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
#svg-shuffle-draw-1hrsjwl [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-shuffle-draw-1hrsjwl-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-shuffle-draw-1hrsjwl [data-motion]{animation:none}}</style>
  <g data-motion="motion" stroke-dasharray="60" stroke-dashoffset="0">
    <path d="M3 6h3l12 12h3 M17 14l4 4-4 4 M3 18h3L18 6h3 M17 2l4 4-4 4" pathLength="60"/>
  </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.

Mediensteuerung

—

Ein kleines Detail, bewusst eingesetzt.

Ergänze Zufallswiedergabe und zeige an, ob die zufällige Reihenfolge aktiviert ist.

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: Medien
Bewegung: Zeichnen
Zeichenfläche: 24 × 24 viewBox
Lizenz: CC0-1.0
Quelle: Motive OriginalsOriginalgestaltung des Projekts
Urheber: Motive-Projekt
Schlagwörter: Zufallswiedergabe, Zufällig, Wiedergabeliste

Nach deinen Wünschen

Dein SVG ist bereit.

Beispiel in einer Oberfläche

Mediensteuerung

Ein kleines Detail, bewusst eingesetzt.

Weitere Icons, die dir gefallen könnten.

Camera pulse

Film draw

Gamepad ring

Headphones ring

Image draw