ACCIONES / TRAZADO

Minus draw

Un trazo horizontal se dibuja para disminuir un valor.

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-minus-draw-rli5w2" 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-minus-draw-rli5w2-title">
  <title id="svg-minus-draw-rli5w2-title">Minus draw</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-minus-draw-rli5w2-motion-0{0%{stroke-dashoffset:60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
#svg-minus-draw-rli5w2 [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-minus-draw-rli5w2-motion-0;animation-duration:900ms;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-minus-draw-rli5w2 [data-motion]{animation:none}}</style>
  <g data-motion="motion" stroke-dasharray="60" stroke-dashoffset="0">
    <path d="M4 12h16" pathLength="60"/>
  </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.

Identifica el valor que se reduce y muestra el número resultante con texto legible.

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: Trazado
Lienzo: 24 × 24 viewBox
Licencia: CC0-1.0
Fuente: Motive OriginalsIlustración original del proyecto
Autor: Proyecto Motive
Etiquetas: menos, restar, disminuir

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.

Bookmark bounce

Copy bounce

Download bounce

Filter draw

Link draw