INTERFAZ / REBOTE

Christmas cracker bounce

Motivo navideño: cracker navideño, con animación de rebote ligero para tarjetas y decoraciones.

Uso gratuito · CC0-1.0 ↗Crear una animación con este icono ↗

96 × 96 PX · SVG

Hazlo a tu manera

01 / ANIMACIÓN

Duración (ms)Retraso (ms)

Curva de velocidadRepeticiónDirecciónIntensidad del movimiento1.0×

02 / APARIENCIAColor#253E35Tamaño (px)Grosor del trazo1.7 px

Tus ajustes se guardan en este navegador. Sin cuenta ni pasos adicionales.

Tu SVG está listo.

AUTÓNOMO · SVG + CSS

Formato de código

<svg xmlns="http://www.w3.org/2000/svg" id="svg-christmas-cracker-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-cracker-bounce-1xs7pm0-title">
  <title id="svg-christmas-cracker-bounce-1xs7pm0-title">Christmas cracker 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-cracker-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-cracker-bounce-1xs7pm0 [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-christmas-cracker-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-cracker-bounce-1xs7pm0 [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M7 8h10v8H7Z M7 10 2 7l1 5-1 5 5-3 M17 10l5-3-1 5 1 5-5-3 M12 9l.8 1.7 1.9.3-1.4 1.3.3 1.9-1.6-.9-1.6.9.3-1.9L9.3 11l1.9-.3Z M8 3l1 2 M15 3l-1 2 M9 19l-1 2 M14 19l1 2"/>
  </g>
</svg>

Incluye animación CSS y compatibilidad con movimiento reducido. No requiere JavaScript ni archivos externos.

GIF: fondo blanco con espacio para el movimiento. Incluye los ajustes de color, tamaño, duración y repetición.

Ejemplo en una interfaz

Pulsa para repetir el icono y ver la respuesta de la interfaz. Demostración local que respeta la preferencia de movimiento reducido.

Control de interfaz

—

Un pequeño detalle, usado con cuidado.

Úsalo junto a un saludo navideño, el título de un evento o una colección de regalos y muestra los detalles importantes en texto.

El movimiento debe acompañar la interfaz. Limita las repeticiones para confirmar acciones y muestra la información importante como texto. El SVG descargado respeta la preferencia de movimiento reducido de tus visitantes.

Cómo usar tu SVG ↗

Categoría: Interfaz
Movimiento: Rebote
Lienzo: 24 × 24 viewBox
Licencia: CC0-1.0
Fuente: Motive OriginalsIlustración original del proyecto
Autor: Proyecto Motive
Etiquetas: Navidad, fiestas de fin de año, cracker navideño

Hazlo a tu manera

Tu SVG está listo.

Ejemplo en una interfaz

Control de interfaz

Un pequeño detalle, usado con cuidado.

Más iconos que podrían gustarte.

Advent calendar draw

Bauble ring

Christmas bells ring

Chimney draw

Christmas candle pulse