STATUS / BALANÇO

Trophy ring

Um troféu balança suavemente para prêmios, desafios concluídos e conquistas.

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-trophy-ring-jasx44" 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-trophy-ring-jasx44-title">
  <title id="svg-trophy-ring-jasx44-title">Trophy 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-trophy-ring-jasx44-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-trophy-ring-jasx44 [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-trophy-ring-jasx44-motion-0;animation-duration:1600ms;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-trophy-ring-jasx44 [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M7 4h10v6a5 5 0 0 1-10 0z M7 6H3v2a4 4 0 0 0 4 4 M17 6h4v2a4 4 0 0 1-4 4 M12 15v5 M8 21h8 M10 20h4"/>
  </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.

Estado da tarefa

—

Um pequeno detalhe, usado com cuidado.

Reproduza uma vez ao conseguir uma conquista e explique o prêmio e seus requisitos em texto.

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: Status
Movimento: Balanço
Área de desenho: 24 × 24 viewBox
Licença: CC0-1.0
Fonte: Motive OriginalsArte original do projeto
Autor: Projeto Motive
Palavras-chave: troféu, prêmio, conquista

Deixe do seu jeito

Seu SVG está pronto.

Exemplo em uma interface

Estado da tarefa

Um pequeno detalhe, usado com cuidado.

Outros ícones que você pode gostar.

Flag draw

Star draw

Candy cane ring

Gift ring

Pine tree draw