ACCIONES / OSCILACIÓN

Paperclip ring

Un clip oscila suavemente para archivos adjuntos y documentos de apoyo.

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-paperclip-ring-1d9h6z" 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-paperclip-ring-1d9h6z-title">
  <title id="svg-paperclip-ring-1d9h6z-title">Paperclip 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-paperclip-ring-1d9h6z-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-paperclip-ring-1d9h6z [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-paperclip-ring-1d9h6z-motion-0;animation-duration:1700ms;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-paperclip-ring-1d9h6z [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M8 12l7-7a4 4 0 0 1 6 6l-9 9a6 6 0 0 1-8-8l8-8 M7 15l8-8a1.5 1.5 0 0 1 2 2l-8 8"/>
  </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.

Respuesta a una acción

—

Un pequeño detalle, usado con cuidado.

Añade Adjuntar archivo y muestra los nombres adjuntos y resultados de subida como 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: Acciones
Movimiento: Oscilación
Lienzo: 24 × 24 viewBox
Licencia: CC0-1.0
Fuente: Motive OriginalsIlustración original del proyecto
Autor: Proyecto Motive
Etiquetas: clip, adjunto, adjuntar

Hazlo a tu manera

Tu SVG está listo.

Ejemplo en una interfaz

Respuesta a una acción

Un pequeño detalle, usado con cuidado.

Más iconos que podrían gustarte.

Code draw

Paintbrush draw

Pencil draw

Printer bounce

Scissors draw