MULTIMEDIA / TRAZADO

Film draw

Una tira de película con dos fotogramas se dibuja para películas y vídeos.

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-film-draw-cj8xrn" 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-film-draw-cj8xrn-title">
  <title id="svg-film-draw-cj8xrn-title">Film 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-film-draw-cj8xrn-motion-0{0%{stroke-dashoffset:60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
#svg-film-draw-cj8xrn [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-film-draw-cj8xrn-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-film-draw-cj8xrn [data-motion]{animation:none}}</style>
  <g data-motion="motion" stroke-dasharray="60" stroke-dashoffset="0">
    <rect x="4" y="3" width="16" height="18" rx="1" pathLength="60"/>
    <path d="M8 3v18 M16 3v18 M4 8h4 M4 16h4 M16 8h4 M16 16h4 M8 12h8" 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.

Controles multimedia

—

Un pequeño detalle, usado con cuidado.

Añade el título o tipo de contenido y proporciona controles de reproducción accesibles aparte.

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: Multimedia
Movimiento: Trazado
Lienzo: 24 × 24 viewBox
Licencia: CC0-1.0
Fuente: Motive OriginalsIlustración original del proyecto
Autor: Proyecto Motive
Etiquetas: película, vídeo, película

Hazlo a tu manera

Tu SVG está listo.

Ejemplo en una interfaz

Controles multimedia

Un pequeño detalle, usado con cuidado.

Más iconos que podrían gustarte.

Camera pulse

Gamepad ring

Headphones ring

Image draw

Microphone bounce