Colección imágenes SVG 2

Cámara fotográfica

¡Copiado!

    

    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='300' height='150' viewBox='0 0 300 150' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <!-- Patrón de cinta de película -->
    <pattern id='filmstrip' x='0' y='0' width='40' height='20' patternUnits='userSpaceOnUse'>
      <rect width='40' height='20' fill='#fff' />
      <circle cx='5' cy='10' r='2' fill='#000' />
      <circle cx='20' cy='10' r='2' fill='#000' />
      <circle cx='35' cy='10' r='2' fill='#000' />
    </pattern>
  </defs>

  <!-- Cinta animada detrás de la cámara -->
  <g>
    <g>
      <rect x='0' y='60' width='300' height='40' fill='url(#filmstrip)'>
        <animateTransform attributeName='transform' type='translate' from='0 0' to='-40 0' dur='1s' repeatCount='indefinite' />
      </rect>
    </g>
  </g>

  <!-- Cámara fotográfica (sin animación) -->
  <g>
    <!-- Cuerpo de la cámara -->
    <rect x='100' y='40' width='100' height='70' rx='10' fill='#555' stroke='#222' stroke-width='2'/>
    <!-- Lente -->
    <circle cx='150' cy='75' r='20' fill='#222' stroke='#999' stroke-width='4'/>
    <circle cx='150' cy='75' r='10' fill='#666'/>
    <!-- Visor -->
    <rect x='110' y='45' width='20' height='10' fill='#888' rx='2'/>
    <!-- Botón superior -->
    <circle cx='190' cy='35' r='5' fill='#aaa' stroke='#444' stroke-width='1'/>
  </g>
</svg>")

Cohete

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='250' height='450' viewBox='0 0 250 450'>
  <defs>
    <!-- Fondo espacio -->
    <linearGradient id='skyGrad' x1='0' y1='450' x2='0' y2='0'>
      <stop offset='0%' stop-color='#061225'/>
      <stop offset='100%' stop-color='#1c3f85'/>
    </linearGradient>

    <!-- Ventanas del cohete -->
    <radialGradient id='windowGrad' cx='50%' cy='50%' r='50%'>
      <stop offset='0%' stop-color='#aee7ff'/>
      <stop offset='100%' stop-color='#1e90ff'/>
    </radialGradient>

    <!-- Fuego -->
    <radialGradient id='flameCore' cx='50%' cy='35%' r='70%'>
      <stop offset='0%' stop-color='#ffffe0'/>
      <stop offset='40%' stop-color='#ffd45a'/>
      <stop offset='70%' stop-color='#ff8a00'/>
      <stop offset='100%' stop-color='#e33a00'/>
    </radialGradient>

    <!-- Humo -->
    <radialGradient id='smokeGrad' cx='50%' cy='50%' r='50%'>
      <stop offset='0%' stop-color='white' stop-opacity='0.8'/>
      <stop offset='100%' stop-color='lightgray' stop-opacity='0'/>
    </radialGradient>

    <!-- Resplandor detrás del cohete -->
    <radialGradient id='glow' cx='50%' cy='0%' r='70%'>
      <stop offset='0%' stop-color='#fffc88' stop-opacity='0.6'/>
      <stop offset='50%' stop-color='#ffbb33' stop-opacity='0.3'/>
      <stop offset='100%' stop-color='#ff8844' stop-opacity='0'/>
    </radialGradient>

    <!-- Luna -->
    <radialGradient id='moonGrad' cx='50%' cy='50%' r='50%'>
      <stop offset='0%' stop-color='#ffffcc'/>
      <stop offset='100%' stop-color='#cccccc'/>
    </radialGradient>

    <!-- Planeta -->
    <radialGradient id='planetGrad' cx='50%' cy='50%' r='50%'>
      <stop offset='0%' stop-color='#ffcc88'/>
      <stop offset='100%' stop-color='#ff8855'/>
    </radialGradient>
  </defs>

  <!-- Cielo -->
  <rect width='250' height='450' fill='url(#skyGrad)'/>

  <!-- Estrellas parpadeando -->
  <g id='stars'>
    <circle cx='40' cy='60' r='1' fill='white'>
      <animate attributeName='opacity' values='1;0.2;1' dur='2s' repeatCount='indefinite'/>
    </circle>
    <circle cx='100' cy='30' r='1.5' fill='white'>
      <animate attributeName='opacity' values='0.2;1;0.2' dur='3s' repeatCount='indefinite'/>
    </circle>
    <circle cx='200' cy='100' r='1.3' fill='white'>
      <animate attributeName='opacity' values='1;0.3;1' dur='2.5s' repeatCount='indefinite'/>
    </circle>
    <circle cx='150' cy='200' r='1' fill='white'>
      <animate attributeName='opacity' values='0.3;1;0.3' dur='4s' repeatCount='indefinite'/>
    </circle>
    <circle cx='50' cy='250' r='1.5' fill='white'>
      <animate attributeName='opacity' values='1;0.1;1' dur='5s' repeatCount='indefinite'/>
    </circle>
  </g>

  <!-- Luna flotante -->
  <g id='moon' transform='translate(200,75)'>
    <animateTransform attributeName='transform' type='translate' dur='6s' repeatCount='indefinite'
      values='200,75; 202,78; 200,75; 198,72; 200,75'/>
    <circle r='25' fill='url(#moonGrad)' stroke='#dddddd' stroke-width='1'/>
    <circle cx='-8' cy='-5' r='4' fill='#cccccc'/>
    <circle cx='10' cy='2' r='3' fill='#bbbbbb'/>
    <circle cx='5' cy='-10' r='2.5' fill='#cccccc'/>
  </g>

  <!-- Planeta flotante -->
  <g id='planet' transform='translate(50,350)'>
    <animateTransform attributeName='transform' type='translate' dur='8s' repeatCount='indefinite'
      values='50,350; 52,355; 50,350; 48,345; 50,350'/>
    <circle r='20' fill='url(#planetGrad)' stroke='#cc6633' stroke-width='2'/>
    <ellipse cx='0' cy='0' rx='30' ry='7' fill='none' stroke='#ffbb66' stroke-width='2'/>
  </g>

  <!-- Cohete caricaturesco -->
  <g id='rocket' transform='translate(125,375)'>
    <!-- Resplandor detrás -->
    <ellipse cx='0' cy='20' rx='40' ry='70' fill='url(#glow)'/>

    <!-- Aletas -->
    <polygon points='-17,-60 -40,0 -17,0' fill='red' stroke='darkred' stroke-width='1.5'/>
    <polygon points='17,-60 40,0 17,0' fill='red' stroke='darkred' stroke-width='1.5'/>

    <!-- Cuerpo -->
    <ellipse cx='0' cy='-80' rx='25' ry='90' fill='#f5f5f5' stroke='#999' stroke-width='2'/>

    <!-- Nariz -->
    <path d='M0,-180 L30,-100 L-30,-100 Z' fill='#ff4747' stroke='darkred' stroke-width='2'/>

    <!-- Ventanas -->
    <circle cx='0' cy='-125' r='11' fill='url(#windowGrad)' stroke='#00aaff' stroke-width='2'/>
    <circle cx='0' cy='-80' r='11' fill='url(#windowGrad)' stroke='#00aaff' stroke-width='2'/>

    <!-- Fuego en la base -->
    <g id='flame' transform='translate(0,0)'>
      <path d='M0,0 C-15,25 -10,60 0,75 C10,60 15,25 0,0Z' fill='url(#flameCore)'>
        <animate attributeName='d' dur='0.6s' repeatCount='indefinite'
          values='M0,0 C-15,25 -10,60 0,75 C10,60 15,25 0,0Z;
                  M0,0 C-12,30 -7,65 0,70 C7,65 12,30 0,0Z;
                  M0,0 C-17,28 -12,62 0,73 C12,62 17,28 0,0Z;
                  M0,0 C-15,25 -10,60 0,75 C10,60 15,25 0,0Z'/>
      </path>
    </g>

    <!-- Humo -->
    <g id='smoke'>
      <circle r='12' cx='-10' cy='50' fill='url(#smokeGrad)'>
        <animate attributeName='r' values='12;20;28' dur='2s' repeatCount='indefinite'/>
        <animate attributeName='opacity' values='0.6;0.3;0' dur='2s' repeatCount='indefinite'/>
      </circle>
      <circle r='10' cx='12' cy='60' fill='url(#smokeGrad)'>
        <animate attributeName='r' values='10;18;25' dur='2s' repeatCount='indefinite'/>
        <animate attributeName='opacity' values='0.5;0.2;0' dur='2s' repeatCount='indefinite'/>
      </circle>
    </g>

    <!-- Ascenso recto -->
    <animateTransform attributeName='transform' attributeType='XML' type='translate'
      from='125,375' to='125,-50' dur='15s' repeatCount='indefinite'/>
  </g>
</svg>")

Avión

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='500' height='300' viewBox='0 0 500 300'>
  <defs>
    <!-- Gradiente cielo -->
    <linearGradient id='skyGrad' x1='0' y1='0' x2='0' y2='300'>
      <stop offset='0%' stop-color='#87CEEB'/>
      <stop offset='100%' stop-color='#b0e0e6'/>
    </linearGradient>

    <!-- Sol -->
    <radialGradient id='sunGrad' cx='50%' cy='50%' r='50%'>
      <stop offset='0%' stop-color='#FFFACD'/>
      <stop offset='100%' stop-color='#FFD700' stop-opacity='0'/>
    </radialGradient>

    <!-- Nube -->
    <radialGradient id='cloudGrad' cx='50%' cy='50%' r='50%'>
      <stop offset='0%' stop-color='white'/>
      <stop offset='100%' stop-color='#cccccc'/>
    </radialGradient>

    <!-- Reflejo nube -->
    <radialGradient id='cloudLight' cx='30%' cy='30%' r='50%'>
      <stop offset='0%' stop-color='white' stop-opacity='0.4'/>
      <stop offset='100%' stop-color='white' stop-opacity='0'/>
    </radialGradient>

    <!-- Avión gradiente fuselaje -->
    <linearGradient id='planeBodyGrad' x1='0%' y1='0%' x2='100%' y2='0%'>
      <stop offset='0%' stop-color='#FF6347'/>
      <stop offset='100%' stop-color='#FF7F50'/>
    </linearGradient>

    <!-- Reflejo fuselaje -->
    <radialGradient id='planeReflect' cx='30%' cy='30%' r='70%'>
      <stop offset='0%' stop-color='white' stop-opacity='0.3'/>
      <stop offset='100%' stop-color='black' stop-opacity='0.05'/>
    </radialGradient>

    <!-- Ala -->
    <linearGradient id='wingGrad' x1='0%' y1='0%' x2='0%' y2='100%'>
      <stop offset='0%' stop-color='#FF4500'/>
      <stop offset='100%' stop-color='#CC3300'/>
    </linearGradient>

    <!-- Estrella -->
    <radialGradient id='starGrad' cx='50%' cy='50%' r='50%'>
      <stop offset='0%' stop-color='white' stop-opacity='1'/>
      <stop offset='100%' stop-color='white' stop-opacity='0'/>
    </radialGradient>
  </defs>

  <!-- Fondo cielo -->
  <rect width='500' height='300' fill='url(#skyGrad)'/>

  <!-- Sol en esquina -->
  <circle cx='450' cy='50' r='40' fill='url(#sunGrad)'/>

  <!-- Estrellas parpadeantes -->
  <g id='stars'>
    <circle cx='50' cy='30' r='2' fill='url(#starGrad)'>
      <animate attributeName='opacity' values='0;1;0' dur='2s' repeatCount='indefinite'/>
    </circle>
    <circle cx='120' cy='80' r='1.5' fill='url(#starGrad)'>
      <animate attributeName='opacity' values='0;1;0' dur='3s' repeatCount='indefinite'/>
    </circle>
    <circle cx='300' cy='40' r='2' fill='url(#starGrad)'>
      <animate attributeName='opacity' values='0;1;0' dur='2.5s' repeatCount='indefinite'/>
    </circle>
    <circle cx='400' cy='120' r='1.8' fill='url(#starGrad)'>
      <animate attributeName='opacity' values='0;1;0' dur='3.2s' repeatCount='indefinite'/>
    </circle>
    <circle cx='200' cy='60' r='1.5' fill='url(#starGrad)'>
      <animate attributeName='opacity' values='0;1;0' dur='2.8s' repeatCount='indefinite'/>
    </circle>
  </g>

  <!-- Nubes animadas con reflejos -->
  <g id='clouds'>
    <g>
      <ellipse cx='550' cy='50' rx='60' ry='30' fill='url(#cloudGrad)' opacity='0.9'>
        <animate attributeName='cx' from='550' to='-120' dur='20s' repeatCount='indefinite'/>
      </ellipse>
      <ellipse cx='550' cy='50' rx='60' ry='30' fill='url(#cloudLight)' opacity='0.6'>
        <animate attributeName='cx' from='550' to='-120' dur='20s' repeatCount='indefinite'/>
      </ellipse>
      <ellipse cx='580' cy='60' rx='40' ry='20' fill='url(#cloudGrad)' opacity='0.8'>
        <animate attributeName='cx' from='580' to='-100' dur='18s' repeatCount='indefinite'/>
      </ellipse>
    </g>
    <g>
      <ellipse cx='600' cy='130' rx='50' ry='25' fill='url(#cloudGrad)' opacity='0.85'>
        <animate attributeName='cx' from='600' to='-120' dur='25s' repeatCount='indefinite'/>
      </ellipse>
      <ellipse cx='600' cy='130' rx='50' ry='25' fill='url(#cloudLight)' opacity='0.5'>
        <animate attributeName='cx' from='600' to='-120' dur='25s' repeatCount='indefinite'/>
      </ellipse>
      <ellipse cx='630' cy='140' rx='35' ry='18' fill='url(#cloudGrad)' opacity='0.75'>
        <animate attributeName='cx' from='630' to='-100' dur='22s' repeatCount='indefinite'/>
      </ellipse>
    </g>
    <g>
      <ellipse cx='500' cy='220' rx='70' ry='35' fill='url(#cloudGrad)' opacity='0.9'>
        <animate attributeName='cx' from='500' to='-150' dur='30s' repeatCount='indefinite'/>
      </ellipse>
      <ellipse cx='500' cy='220' rx='70' ry='35' fill='url(#cloudLight)' opacity='0.5'>
        <animate attributeName='cx' from='500' to='-150' dur='30s' repeatCount='indefinite'/>
      </ellipse>
      <ellipse cx='540' cy='230' rx='50' ry='25' fill='url(#cloudGrad)' opacity='0.8'>
        <animate attributeName='cx' from='540' to='-120' dur='28s' repeatCount='indefinite'/>
      </ellipse>
    </g>
  </g>

  <!-- Avión realista cinematográfico -->
  <g id='airplane' transform='translate(250,150)'>
    <animateTransform attributeName='transform' type='translate' dur='3s' repeatCount='indefinite'
      values='250,150; 250,145; 250,150; 250,155; 250,150'/>

    <!-- Fuselaje con reflejos -->
    <ellipse cx='0' cy='0' rx='60' ry='18' fill='url(#planeBodyGrad)' stroke='#CC0000' stroke-width='2'/>
    <ellipse cx='0' cy='0' rx='60' ry='18' fill='url(#planeReflect)'/>

    <!-- Cabina frontal -->
    <ellipse cx='30' cy='-3' rx='15' ry='10' fill='#FFB07C' stroke='#555' stroke-width='1.5'/>

    <!-- Alas -->
    <path d='M-20,-8 Q0,-135 20,-8 Z' fill='url(#wingGrad)'/>
    <path d='M-20,8 Q0,135 20,8 Z' fill='url(#wingGrad)'/>

    <!-- Cola y estabilizadores -->
    <polygon points='-60,0 -75,-10 -75,10' fill='#FF4500'/>
    <polygon points='-55,-5 -70,-12 -155,-12' fill='#FF4500'/>
    <polygon points='-55,5 -70,12 -155,12' fill='#FF4500'/>

    <!-- Hélice frontal -->
    <g id='propeller' transform='translate(60,0)'>
      <rect x='-3' y='-15' width='6' height='30' fill='#333'>
        <animateTransform attributeName='transform' type='rotate' from='0 0 0' to='360 0 0' dur='0.25s' repeatCount='indefinite'/>
      </rect>
      <rect x='-15' y='-3' width='30' height='6' fill='#333'>
        <animateTransform attributeName='transform' type='rotate' from='0 0 0' to='360 0 0' dur='0.25s' repeatCount='indefinite'/>
      </rect>
    </g>
  </g>
</svg>")

Móvil 1

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 320' width='300' height='400'>
  <style>
    /* Animación del móvil */
    .phone {
      transform-origin: center;
      animation: bob 2.5s ease-in-out infinite;
    }
    @keyframes bob {
      0%,100% { transform: translateY(0); }
      50%     { transform: translateY(-6px); }
    }

    /* Círculos de “play” */
    .pulse {
      fill: none;
      stroke: #ffffff;
      stroke-width: 2;
      opacity: 0;
      animation: pulseAnim 2s infinite;
    }
    .pulse.p2 { animation-delay: 0.6s; }
    .pulse.p3 { animation-delay: 1.2s; }
    @keyframes pulseAnim {
      0%   { r: 8; opacity: 0.8; }
      100% { r: 40; opacity: 0; }
    }

    /* Notas musicales (animación flotante) */
    .note {
      opacity: 0;
      animation: float 4s linear infinite;
    }
    .n2 { animation-delay: 0.5s; }
    .n3 { animation-delay: 1s; }
    .n4 { animation-delay: 1.5s; }
    .n5 { animation-delay: 2s; }

    @keyframes float {
      0%   { transform: translate(0,0) scale(0.8); opacity: 0; }
      10%  { opacity: 1; }
      60%  { transform: translate(50px,-80px) scale(1); opacity: 0.9; }
      100% { transform: translate(90px,-160px) scale(0.6); opacity: 0; }
    }
  </style>

  <!-- Móvil -->
  <g class='phone' transform='translate(70,40)'>
    <rect x='0' y='0' rx='20' ry='20' width='120' height='240' fill='#0d0d0d' stroke='#222' stroke-width='3'/>
    <!-- Pantalla -->
    <rect x='10' y='20' rx='12' ry='12' width='100' height='180' fill='#1e40af'/>
    <!-- Botón -->
    <circle cx='60' cy='215' r='6' fill='#444'/>
    <!-- Pulsos de play -->
    <circle class='pulse p1' cx='60' cy='110' r='8'/>
    <circle class='pulse p2' cx='60' cy='110' r='8'/>
    <circle class='pulse p3' cx='60' cy='110' r='8'/>
  </g>

  <!-- Notas musicales diferentes -->
  <g transform='translate(160,100)'>
    <!-- Do (corchea simple, azul) -->
    <path class='note n1' fill='#3b82f6' d='M0 0 v30 a6 6 0 1 0 6 0 v-25 h12'/>
    <!-- Re (doble corchea, amarillo) -->
    <path class='note n2' fill='#facc15' d='M0 0 v30 a6 6 0 1 0 6 0 v-25 h10 v25 a6 6 0 1 0 6 0 v-30z'/>
    <!-- Mi (corchea con plica invertida, rosa) -->
    <path class='note n3' fill='#ec4899' d='M20 0 v-30 a6 6 0 1 0 -6 0 v25 h-12'/>
    <!-- Sol (semicorchea, verde) -->
    <path class='note n4' fill='#22c55e' d='M0 0 v30 a6 6 0 1 0 6 0 v-25 h10 v25 a6 6 0 1 0 6 0 v-20 h10'/>
    <!-- La (nota redonda, púrpura) -->
    <ellipse class='note n5' cx='20' cy='0' rx='8' ry='6' fill='#8b5cf6'/>
  </g>
</svg>")

Móvil 2

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 320' width='320' height='400'>
  <style>
    /* Animación del móvil */
    .phone {
      transform-origin: center;
      animation: bob 2.5s ease-in-out infinite;
    }
    @keyframes bob {
      0%,100% { transform: translateY(0); }
      50%     { transform: translateY(-6px); }
    }

    /* Círculos de “play” */
    .pulse {
      fill: none;
      stroke: #ffffff;
      stroke-width: 2;
      opacity: 0;
      animation: pulseAnim 2s infinite;
    }
    .pulse.p2 { animation-delay: 0.6s; }
    .pulse.p3 { animation-delay: 1.2s; }
    @keyframes pulseAnim {
      0%   { r: 8; opacity: 0.8; }
      100% { r: 40; opacity: 0; }
    }

    /* Notas musicales (animación flotante) */
    .note {
      opacity: 0;
      animation: float 4s linear infinite;
    }
    .n2 { animation-delay: 0.5s; }
    .n3 { animation-delay: 1s; }
    .n4 { animation-delay: 1.5s; }
    .n5 { animation-delay: 2s; }

    @keyframes float {
      0%   { transform: translate(0,0) scale(0.8); opacity: 0; }
      10%  { opacity: 1; }
      60%  { transform: translate(50px,-80px) scale(1); opacity: 0.9; }
      100% { transform: translate(90px,-160px) scale(0.6); opacity: 0; }
    }
  </style>

  <!-- Móvil -->
  <g class='phone' transform='translate(70,40)'>
    <rect x='0' y='0' rx='20' ry='20' width='120' height='240' fill='#0d0d0d' stroke='#222' stroke-width='3'/>
    <!-- Pantalla -->
    <rect x='10' y='20' rx='12' ry='12' width='100' height='180' fill='#1e40af'/>
    <!-- Botón -->
    <circle cx='60' cy='215' r='6' fill='#444'/>
    <!-- Pulsos de play -->
    <circle class='pulse p1' cx='60' cy='110' r='8'/>
    <circle class='pulse p2' cx='60' cy='110' r='8'/>
    <circle class='pulse p3' cx='60' cy='110' r='8'/>
  </g>

  <!-- Notas musicales diferentes (separadas) -->
  <g transform='translate(160,100)'>
    <!-- Do (corchea simple) -->
    <path class='note n1' fill='#3b82f6' d='M0 0 v30 a6 6 0 1 0 6 0 v-25 h12'/>
  </g>

  <g transform='translate(190,100)'>
    <!-- Re (doble corchea) -->
    <path class='note n2' fill='#facc15' d='M0 0 v30 a6 6 0 1 0 6 0 v-25 h10 v25 a6 6 0 1 0 6 0 v-30z'/>
  </g>

  <g transform='translate(220,100)'>
    <!-- Mi (corchea invertida) -->
    <path class='note n3' fill='#ec4899' d='M20 0 v-30 a6 6 0 1 0 -6 0 v25 h-12'/>
  </g>

  <g transform='translate(250,100)'>
    <!-- Sol (semicorchea) -->
    <path class='note n4' fill='#22c55e' d='M0 0 v30 a6 6 0 1 0 6 0 v-25 h10 v25 a6 6 0 1 0 6 0 v-20 h10'/>
  </g>

  <g transform='translate(280,100)'>
    <!-- La (nota redonda) -->
    <ellipse class='note n5' cx='20' cy='0' rx='8' ry='6' fill='#8b5cf6'/>
  </g>
</svg>")

Móvil 3

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 320' width='320' height='400'>
  <style>
    /* Animación del móvil */
    .phone {
      transform-origin: center;
      animation: bob 2.5s ease-in-out infinite;
    }
    @keyframes bob {
      0%,100% { transform: translateY(0); }
      50%     { transform: translateY(-6px); }
    }

    /* Círculos de “play” */
    .pulse {
      fill: none;
      stroke: #ffffff;
      stroke-width: 2;
      opacity: 0;
      animation: pulseAnim 2s infinite;
    }
    .pulse.p2 { animation-delay: 0.6s; }
    .pulse.p3 { animation-delay: 1.2s; }
    @keyframes pulseAnim {
      0%   { r: 8; opacity: 0.8; }
      100% { r: 40; opacity: 0; }
    }

    /* Animación de notas musicales */
    .note {
      opacity: 0;
      transform-origin: center;
    }

    /* Trayectorias diferentes */
    .n1 { animation: float1 4s linear infinite; }
    .n2 { animation: float2 4s linear infinite; animation-delay:0.5s; }
    .n3 { animation: float3 4s linear infinite; animation-delay:1s; }
    .n4 { animation: float4 4s linear infinite; animation-delay:1.5s; }
    .n5 { animation: float5 4s linear infinite; animation-delay:2s; }

    @keyframes float1 {
      0%   { transform: translate(0,0) scale(0.8) rotate(0deg); opacity:0; }
      10%  { opacity:1; }
      60%  { transform: translate(30px,-70px) scale(1) rotate(15deg); opacity:0.9; }
      100% { transform: translate(60px,-150px) scale(0.6) rotate(-15deg); opacity:0; }
    }
    @keyframes float2 {
      0%   { transform: translate(0,0) scale(0.8) rotate(0deg); opacity:0; }
      10%  { opacity:1; }
      60%  { transform: translate(25px,-80px) scale(1) rotate(-20deg); opacity:0.9; }
      100% { transform: translate(55px,-160px) scale(0.6) rotate(10deg); opacity:0; }
    }
    @keyframes float3 {
      0%   { transform: translate(0,0) scale(0.8) rotate(0deg); opacity:0; }
      10%  { opacity:1; }
      60%  { transform: translate(35px,-75px) scale(1) rotate(10deg); opacity:0.9; }
      100% { transform: translate(65px,-155px) scale(0.6) rotate(-10deg); opacity:0; }
    }
    @keyframes float4 {
      0%   { transform: translate(0,0) scale(0.8) rotate(0deg); opacity:0; }
      10%  { opacity:1; }
      60%  { transform: translate(40px,-70px) scale(1) rotate(-15deg); opacity:0.9; }
      100% { transform: translate(70px,-145px) scale(0.6) rotate(20deg); opacity:0; }
    }
    @keyframes float5 {
      0%   { transform: translate(0,0) scale(0.8) rotate(0deg); opacity:0; }
      10%  { opacity:1; }
      60%  { transform: translate(30px,-85px) scale(1) rotate(5deg); opacity:0.9; }
      100% { transform: translate(60px,-165px) scale(0.6) rotate(-5deg); opacity:0; }
    }
  </style>

  <!-- Móvil -->
  <g class='phone' transform='translate(70,40)'>
    <rect x='0' y='0' rx='20' ry='20' width='120' height='240' fill='#0d0d0d' stroke='#222' stroke-width='3'/>
    <rect x='10' y='20' rx='12' ry='12' width='100' height='180' fill='#1e40af'/>
    <circle cx='60' cy='215' r='6' fill='#444'/>
    <circle class='pulse p1' cx='60' cy='110' r='8'/>
    <circle class='pulse p2' cx='60' cy='110' r='8'/>
    <circle class='pulse p3' cx='60' cy='110' r='8'/>
  </g>

  <!-- Notas musicales separadas y diferentes -->
  <g transform='translate(160,100)'>
    <!-- Do (azul, corchea simple) -->
    <path class='note n1' fill='#3b82f6' d='M0 0 v30 a6 6 0 1 0 6 0 v-25 h12'/>
  </g>

  <g transform='translate(190,100)'>
    <!-- Re (amarilla, doble corchea) -->
    <path class='note n2' fill='#facc15' d='M0 0 v30 a6 6 0 1 0 6 0 v-25 h10 v25 a6 6 0 1 0 6 0 v-30z'/>
  </g>

  <g transform='translate(220,100)'>
    <!-- Mi (rosa, corchea invertida) -->
    <path class='note n3' fill='#ec4899' d='M20 0 v-30 a6 6 0 1 0 -6 0 v25 h-12'/>
  </g>

  <g transform='translate(250,100)'>
    <!-- Sol (verde, semicorchea) -->
    <path class='note n4' fill='#22c55e' d='M0 0 v30 a6 6 0 1 0 6 0 v-25 h10 v25 a6 6 0 1 0 6 0 v-20 h10'/>
  </g>

  <g transform='translate(280,100)'>
    <!-- La (púrpura, nota redonda) -->
    <ellipse class='note n5' cx='20' cy='0' rx='8' ry='6' fill='#8b5cf6'/>
  </g>
</svg>")

En construcción

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<!-- En Construcción - SVG Animado en tonos de obra -->
<svg viewBox='0 0 800 300' width='800' height='300' xmlns='http://www.w3.org/2000/svg'>
  <!-- Fondo -->
  <rect width='800' height='300' fill='#111'/>

  <!-- Cinta de precaución superior -->
  <rect x='-200' y='30' width='1200' height='40' fill='url(#stripes)'>
    <animate attributeName='x' from='-200' to='0' dur='2s' repeatCount='indefinite'/>
  </rect>

  <!-- Cinta de precaución inferior -->
  <rect x='-200' y='230' width='1200' height='40' fill='url(#stripes)'>
    <animate attributeName='x' from='0' to='-200' dur='2s' repeatCount='indefinite'/>
  </rect>

  <!-- Definiciones -->
  <defs>
    <!-- Patrón amarillo/negro -->
    <pattern id='stripes' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='rotate(45)'>
      <rect width='40' height='40' fill='#000'/>
      <rect width='40' height='20' y='0' fill='#FFD600'/>
    </pattern>
  </defs>

  <!-- Cono de obra con rebote -->
  <g transform='translate(140,220)'>
    <g>
      <animateTransform attributeName='transform' type='translate'
                        values='0,0; 0,-10; 0,0' dur='2s' repeatCount='indefinite'/>
      <polygon points='0,0 40,0 25,-80 15,-80' fill='#FF9800'/>
      <rect x='10' y='-65' width='20' height='8' fill='#fff'/>
      <rect x='5' y='-40' width='30' height='8' fill='#fff'/>
      <rect x='0' y='0' width='40' height='12' fill='#e65100'/>
    </g>
  </g>

  <!-- Texto principal con animación de escritura + parpadeo -->
  <text x='50%' y='150' text-anchor='middle' font-family='monospace'
        font-size='48' font-weight='bold' fill='none' stroke='#FFD600' stroke-width='2'
        stroke-dasharray='600' stroke-dashoffset='600'>
    EN CONSTRUCCIÓN
    <!-- Animación de escritura -->
    <animate attributeName='stroke-dashoffset' from='600' to='0' dur='4s' fill='freeze'/>
    <!-- Parpadeo después de escribirse -->
    <animate attributeName='opacity' values='1;0;1' begin='4s' dur='1s' repeatCount='indefinite'/>
  </text>
</svg>")

Lápiz

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 250' width='1000' height='250'>
  <defs>
    <!-- Ruta de escritura -->
    <path id='writePath' d='M50 180 
                             C200 120, 400 220, 600 150 
                             C750 100, 900 200, 1000 140' 
          fill='none' stroke='none'/>
    <!-- Sombra suave -->
    <filter id='shadow' x='-50%' y='-50%' width='200%' height='200%'>
      <feDropShadow dx='0' dy='4' stdDeviation='4' flood-opacity='0.2'/>
    </filter>
  </defs>

  <!-- Fondo -->
  <rect width='100%' height='100%' fill='white'/>

  <!-- Trazo que se dibuja -->
  <path d='M50 180 
           C200 120, 400 220, 600 150 
           C750 100, 900 200, 1000 140'
        fill='none' stroke='#222' stroke-width='3.5'
        stroke-linecap='round' stroke-linejoin='round'
        stroke-dasharray='1800' stroke-dashoffset='1800'>
    <animate attributeName='stroke-dashoffset'
             from='1800' to='0'
             dur='6s'
             begin='0s'
             repeatCount='indefinite'/>
  </path>

  <!-- Lápiz -->
  <g id='pencil' filter='url(#shadow)' transform='scale(1.2)'>
    <!-- Cuerpo amarillo -->
    <rect x='-60' y='-8' width='160' height='16' rx='3' ry='3'
          fill='#ffcc33' stroke='#b8860b' stroke-width='1'/>

    <!-- Franjas negras del lápiz -->
    <rect x='-60' y='-8' width='8' height='16' fill='#222'/>
    <rect x='-40' y='-8' width='8' height='16' fill='#222'/>
    <rect x='-20' y='-8' width='8' height='16' fill='#222'/>

    <!-- Punta de madera -->
    <polygon points='100,-8 120,0 100,8' fill='#e0b07a' stroke='#a06a2d' stroke-width='1'/>

    <!-- Grafito -->
    <polygon points='120,0 128,-4 128,4' fill='#333'/>

    <!-- Anillo metálico -->
    <rect x='-72' y='-10' width='12' height='20' rx='2' ry='2'
          fill='#c0c0c0' stroke='#888' stroke-width='0.8'/>

    <!-- Goma -->
    <rect x='-92' y='-6' width='20' height='12' rx='2' ry='2'
          fill='#ff7b7b' stroke='#c85a5a' stroke-width='0.8'/>
  </g>

  <!-- Animación del lápiz a lo largo del trazo -->
  <animateMotion xlink:href='#pencil'
                 dur='6s'
                 begin='0s'
                 rotate='auto'
                 repeatCount='indefinite'>
    <mpath xlink:href='#writePath'/>
  </animateMotion>
</svg>")

Libro

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' width='600' height='400' aria-label='Libro animado abriéndose y cerrándose'>
  <defs>
    <!-- Degradado para páginas -->
    <linearGradient id='pageGrad' x1='0' x2='1'>
      <stop offset='0' stop-color='#ffffff'/>
      <stop offset='1' stop-color='#f3f3f3'/>
    </linearGradient>

    <!-- Sombra -->
    <filter id='softShadow' x='-50%' y='-50%' width='200%' height='200%'>
      <feDropShadow dx='0' dy='8' stdDeviation='10' flood-color='#000' flood-opacity='0.25'/>
    </filter>
  </defs>

  <!-- Fondo opcional -->
  <rect width='100%' height='100%' fill='#f0f4f8'/>

  <!-- Grupo libro centrado -->
  <g transform='translate(150,120)'>
    <!-- Sombra bajo el libro -->
    <ellipse cx='150' cy='190' rx='150' ry='28' fill='#000' opacity='0.08' />

    <!-- Páginas (grupo central) -->
    <g id='pages' transform='translate(140,20)' >
      <!-- varias capas de páginas para dar espesor -->
      <rect x='0' y='0' width='120' height='160' rx='2' fill='url(#pageGrad)' stroke='#e0e0e0'/>
      <g id='page-lines' opacity='0.9'>
        <!-- líneas de texto simuladas -->
        <g fill='#e8e8e8' transform='translate(10,12)'>
          <rect x='0' y='0' width='90' height='6' rx='3'/>
          <rect x='0' y='14' width='86' height='6' rx='3'/>
          <rect x='0' y='28' width='80' height='6' rx='3'/>
          <rect x='0' y='42' width='92' height='6' rx='3'/>
          <rect x='0' y='56' width='68' height='6' rx='3'/>
        </g>
      </g>

      <!-- animación sutil de las páginas (pequeño 'flip' interior) -->
      <g id='inner-flip' transform-origin='60 80'>
        <rect x='5' y='6' width='110' height='148' rx='2' fill='none' />
        <animateTransform attributeName='transform'
                          attributeType='XML'
                          type='rotate'
                          from='0 60 80'
                          to='-6 60 80'
                          dur='1.2s'
                          begin='0s'
                          repeatCount='indefinite'
                          values='0 60 80; -6 60 80; 0 60 80; 0 60 80'
                          keyTimes='0;0.35;0.7;1'
                          calcMode='spline'
                          keySplines='0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1'/>
      </g>
    </g>

    <!-- Tapa izquierda (se anima abriendo hacia la izquierda) -->
    <g id='left-cover' transform='translate(20,20)'>
      <!-- cubierta exterior -->
      <rect x='0' y='0' width='160' height='160' rx='3' fill='#2b6cb0' stroke='#1f4f86' filter='url(#softShadow)'/>
      <!-- detalle del lomo -->
      <rect x='150' y='0' width='10' height='160' fill='#1f4f86'/>
      <!-- pequeño adorno -->
      <rect x='18' y='18' width='56' height='18' rx='3' fill='#88b0e6' opacity='0.85'/>
      <!-- animación: rota alrededor de su borde izquierdo (pivot en x=0, y=80) -->
      <animateTransform attributeName='transform'
                        attributeType='XML'
                        type='rotate'
                        from='0 0 80'
                        to='-120 0 80'
                        dur='3s'
                        begin='0s'
                        repeatCount='indefinite'
                        values='0 0 80; -120 0 80; -120 0 80; 0 0 80'
                        keyTimes='0;0.33;0.66;1'
                        calcMode='spline'
                        keySplines='0.4 0 0.2 1; 0.2 0 0.8 1; 0.4 0 0.2 1'/>
    </g>

    <!-- Tapa derecha (ligero movimiento complementario) -->
    <g id='right-cover' transform='translate(240,20)'>
      <rect x='0' y='0' width='160' height='160' rx='3' fill='#234e7a' stroke='#183a5a' filter='url(#softShadow)'/>
      <rect x='-10' y='0' width='10' height='160' fill='#183a5a'/>
      <!-- animación: pequeño ajuste mientras la tapa izquierda abre -->
      <animateTransform attributeName='transform'
                        attributeType='XML'
                        type='rotate'
                        from='0 160 80'
                        to='4 160 80'
                        dur='3s'
                        begin='0s'
                        repeatCount='indefinite'
                        values='0 160 80; 4 160 80; 4 160 80; 0 160 80'
                        keyTimes='0;0.33;0.66;1'
                        calcMode='spline'
                        keySplines='0.4 0 0.2 1; 0.2 0 0.8 1; 0.4 0 0.2 1'/>
    </g>

    <!-- Lomo / centro visible (entre tapas) para dar profundidad -->
    <g transform='translate(200,20)'>
      <rect x='0' y='0' width='40' height='160' fill='#cfcfcf' rx='1' />
      <rect x='6' y='6' width='28' height='148' fill='#f8f8f8' rx='1' />
    </g>
  </g>

  <!-- Nota: SMIL animations (animateTransform) son soportadas en la mayoría de navegadores modernos.
       Si necesitas control por hover o click, puedo pasar esto a CSS/JS. -->
</svg>")

Engrane

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='200' height='200'>
  <circle cx='40' cy='40' r='30' fill='none' stroke='#666' stroke-width='10' stroke-dasharray='15 5'>
    <animateTransform attributeName='transform' type='rotate' values='0 40 40;360 40 40' dur='3s' repeatCount='indefinite'/>
  </circle>
</svg>")

Ola animada

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' width='200' height='50'>
  <path d='M0 25 Q50 0 100 25 T200 25' fill='none' stroke='#00f' stroke-width='4'>
    <animate attributeName='d' dur='2s' repeatCount='indefinite'
             values='M0 25 Q50 0 100 25 T200 25; M0 25 Q50 50 100 25 T200 25; M0 25 Q50 0 100 25 T200 25'/>
  </path>
</svg>")

Botón verde parpadeando

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'>
  <circle cx='40' cy='40' r='30' fill='#222'/>
  <circle cx='40' cy='40' r='20' fill='#0f0' opacity='0.6'>
    <animate attributeName='r' values='20;24;20' dur='1s' repeatCount='indefinite'/>
    <animate attributeName='opacity' values='0.6;0.2;0.6' dur='1s' repeatCount='indefinite'/>
  </circle>
</svg>")

...

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl(" ")

...

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl(" ")

...

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl(" ")

Colección imágenes SVG 2

Publicar un comentario

¿Qué es mejor utilizar, Dropdown o Combobox?

Categorias

Publicaciones populares

Exportar a Excel con flujo de Power Automate

Crear archivo .PDF, guardarlo y descargarlo

Utilizar la camara, guarda imagen, firma y mostrar la imagen captura

Formulario de contacto