SETAS / PULSAÇÃO

Expand pulse

Quatro setas nos cantos pulsam para ampliar uma prévia ou entrar em tela cheia.

Uso gratuito · CC0-1.0 ↗Criar uma animação com este ícone ↗

96 × 96 PX · SVG

Deixe do seu jeito

01 / ANIMAÇÃO

Duração (ms)Atraso (ms)

Curva de velocidadeRepetiçãoDireçãoIntensidade do movimento1.0×

02 / APARÊNCIACor#253E35Tamanho (px)Espessura do traço1.7 px

Suas alterações ficam salvas neste navegador. Sem conta nem etapas extras.

Seu SVG está pronto.

INDEPENDENTE · SVG + CSS

Formato do código

<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>

Inclui animação CSS e suporte a movimento reduzido. Não requer JavaScript nem arquivos externos.

GIF: fundo branco com espaço para o movimento. Inclui as configurações de cor, tamanho, duração e repetição.

Exemplo em uma interface

Clique para repetir o ícone e ver a resposta da interface. Demonstração local que respeita a preferência por movimento reduzido.

Navegação por etapas

—

Um pequeno detalhe, usado com cuidado.

Adicione um rótulo de ampliação e ofereça uma forma clara de sair da vista ampliada.

O movimento deve acompanhar a interface. Limite as repetições para confirmar ações e mostre as informações importantes em texto. O SVG baixado respeita a preferência de movimento reduzido dos visitantes.

Como usar seu SVG ↗

Categoria: Setas
Movimento: Pulsação
Área de desenho: 24 × 24 viewBox
Licença: CC0-1.0
Fonte: Motive OriginalsArte original do projeto
Autor: Projeto Motive
Palavras-chave: ampliar, tela cheia, maximizar

Deixe do seu jeito

Seu SVG está pronto.

Exemplo em uma interface

Navegação por etapas

Um pequeno detalhe, usado com cuidado.

Outros ícones que você pode gostar.

Arrow down left

Arrow down

Arrow left

Arrow right

Arrow up draw