INTERFACE / SALTO

Christmas choir bounce

Motivo de Natal: coral de Natal, com animação de salto leve para coleções sazonais.

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-christmas-choir-bounce-1xs7pm0" 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-choir-bounce-1xs7pm0-title">
  <title id="svg-christmas-choir-bounce-1xs7pm0-title">Christmas choir bounce</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-choir-bounce-1xs7pm0-motion-0{0%{transform:translateY(0px)}25%{transform:translateY(-4px)}50%{transform:translateY(0px)}75%{transform:translateY(-1.5px)}100%{transform:translateY(0px)}}
#svg-christmas-choir-bounce-1xs7pm0 [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-christmas-choir-bounce-1xs7pm0-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-choir-bounce-1xs7pm0 [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <circle cx="6" cy="7" r="2.5"/>
    <circle cx="18" cy="7" r="2.5"/>
    <circle cx="12" cy="4" r="2"/>
    <path d="M3 11v9h6 M21 11v9h-6 M9 9V8 M15 9V8 M3 12l3 1 3-1 3 1 3-1 3 1 3-1 M3 12v5l3 1 3-1 3 1 3-1 3 1 3-1v-5 M9 12v9h6v-9 M6 13v5 M18 13v5 M12 13v5"/>
  </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.

Controle de interface

—

Um pequeno detalhe, usado com cuidado.

Use ao lado de uma mensagem sazonal, atividade ou produto e apresente datas e detalhes importantes em texto legível.

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: Interface
Movimento: Salto
Área de desenho: 24 × 24 viewBox
Licença: CC0-1.0
Fonte: Motive OriginalsArte original do projeto
Autor: Projeto Motive
Palavras-chave: Natal, festas de fim de ano, coral de Natal

Deixe do seu jeito

Seu SVG está pronto.

Exemplo em uma interface

Controle de interface

Um pequeno detalhe, usado com cuidado.

Outros ícones que você pode gostar.

Advent calendar draw

Bauble ring

Christmas bells ring

Chimney draw

Christmas candle pulse