Colección imágenes SVG

Loader Puntos Saltando

¡Copiado!

	
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='200' height='60'>
          <circle cx='40' cy='30' r='8' fill='blue'>
            <animate attributeName='cy' values='30;10;30' dur='0.6s' repeatCount='indefinite'/>
          </circle>
          <circle cx='100' cy='30' r='8' fill='blue'>
            <animate attributeName='cy' values='30;10;30' dur='0.6s' begin='0.2s' repeatCount='indefinite'/>
          </circle>
          <circle cx='160' cy='30' r='8' fill='blue'>
            <animate attributeName='cy' values='30;10;30' dur='0.6s' begin='0.4s' repeatCount='indefinite'/>
          </circle>
        </svg>")

Corazón latiendo

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <filter id='shadow' x='-50%' y='-50%' width='200%' height='200%'>
      <feDropShadow dx='0' dy='2' stdDeviation='4' flood-color='#800000' />
    </filter>
  </defs>
  <g transform='translate(100,100)'>
    <path id='heart' fill='red' stroke='#800000' stroke-width='2' filter='url(#shadow)' d='
      M0,-30
      C-35,-60 -70,-20 0,40
      C70,-20 35,-60 0,-30
      Z'>
      <animateTransform
        attributeName='transform'
        type='scale'
        values='1;1.2;1'
        dur='0.6s'
        repeatCount='indefinite'
      />
    </path>
  </g>
</svg>")

Círculo Pulsante

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
          <circle cx='100' cy='100' r='50' fill='red'>
            <animate attributeName='r' values='40;55;40' dur='2s' repeatCount='indefinite'/>
            <animate attributeName='fill' values='red;orange;yellow;green;blue;purple;red' dur='6s' repeatCount='indefinite'/>
          </circle>
        </svg>")

Loader cuadrado

¡Copiado!

 
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
          <rect x='90' y='40' width='20' height='20' fill='blue'>
            <animateTransform attributeName='transform' type='rotate' from='0 100 100' to='360 100 100' dur='2s' repeatCount='indefinite'/>
          </rect>
        </svg>")

Loader círculo expansivo

¡Copiado!

  
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
          <circle cx='100' cy='100' r='20' stroke='blue' stroke-width='4' fill='none'>
            <animate attributeName='r' values='20;80' dur='2s' repeatCount='indefinite'/>
            <animate attributeName='opacity' values='1;0;1' dur='2s' repeatCount='indefinite'/>
          </circle>
        </svg>")

Hexágono Glow

¡Copiado!

   
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'>
          <polygon points='125,30 220,90 190,190 60,190 30,90'
                   stroke='cyan' stroke-width='5' fill='none'>
            <animateTransform attributeName='transform' type='rotate'
              values='0 125 125;360 125 125' dur='6s' repeatCount='indefinite'/>
            <animate attributeName='stroke' values='cyan;blue;purple;cyan' dur='4s' repeatCount='indefinite'/>
          </polygon>
        </svg>")

Estrella girando

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' 
            width='120' height='120' viewBox='0 0 100 100'>
            <polygon points='50,10 61,39 92,39 67,59 76,90,50,72 24,90 33,59 8,39 39,39' 
                fill='gold' stroke='black' stroke-width='2'>

                <animateTransform attributeName='transform'
                      attributeType='XML' 
                      type='rotate' 
                      from='0 50 50' 
                      to='360 50 50' 
                      dur='5s' 
                      repeatCount='indefinite'/>
            </polygon>
        </svg>")

Estrella girando brillante

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' 
            width='150' height='150' viewBox='0 0 100 100'>
            <!-- Estrella -->
            <polygon points='50,10 61,39 92,39 67,59 76,90 
                    50,72 24,90 33,59 8,39 39,39' 
            stroke='black' stroke-width='2'>
    
            <!-- Animación de rotación -->
            <animateTransform attributeName='transform' 
                      attributeType='XML' 
                      type='rotate' 
                      from='0 50 50' 
                      to='360 50 50' 
                      dur='8s' 
                      repeatCount='indefinite'/>
    
            <!-- Animación de color -->
            <animate attributeName='fill' 
                    values='gold;orange;red;purple;blue;green;gold' 
                    dur='6s' 
                    repeatCount='indefinite'/>
    
            <!-- Animación de 'brillo' (pulso) -->
            <animate attributeName='stroke-width' 
                     values='2;6;2' 
                     dur='2s' 
                     repeatCount='indefinite'/>
    
            <animate attributeName='opacity' 
                     values='1;0.6;1' 
                    dur='2s' 
                    repeatCount='indefinite'/>
            </polygon>
        </svg>")

Loader círculos

¡Copiado!

  
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg fill='hsl(228, 97%, 42%)'  width='150' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><circle cx='12' cy='3' r='1'><animate id='spinner_7Z73' begin='0;spinner_tKsu.end-0.5s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='16.50' cy='4.21' r='1'><animate id='spinner_Wd87' begin='spinner_7Z73.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='7.50' cy='4.21' r='1'><animate id='spinner_tKsu' begin='spinner_9Qlc.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='19.79' cy='7.50' r='1'><animate id='spinner_lMMO' begin='spinner_Wd87.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='4.21' cy='7.50' r='1'><animate id='spinner_9Qlc' begin='spinner_Khxv.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='21.00' cy='12.00' r='1'><animate id='spinner_5L9t' begin='spinner_lMMO.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='3.00' cy='12.00' r='1'><animate id='spinner_Khxv' begin='spinner_ld6P.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='19.79' cy='16.50' r='1'><animate id='spinner_BfTD' begin='spinner_5L9t.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='4.21' cy='16.50' r='1'><animate id='spinner_ld6P' begin='spinner_XyBs.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='16.50' cy='19.79' r='1'><animate id='spinner_7gAK' begin='spinner_BfTD.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='7.50' cy='19.79' r='1'><animate id='spinner_XyBs' begin='spinner_HiSl.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><circle cx='12' cy='21' r='1'><animate id='spinner_HiSl' begin='spinner_7gAK.begin+0.1s' attributeName='r' calcMode='spline' dur='0.6s' values='1;2;1' keySplines='.27,.42,.37,.99;.53,0,.61,.73'/></circle><animateTransform attributeName='transform' type='rotate' dur='6s' values='360 12 12;0 12 12' repeatCount='indefinite'/></g></svg>")

Moneda girando con brillo

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Moneda girando'>
  <defs>
    <radialGradient id='gold' cx='50%' cy='50%' r='50%'>
      <stop offset='0%' stop-color='#FFE07D'/>
      <stop offset='60%' stop-color='#FFC93C'/>
      <stop offset='100%' stop-color='#E0A100'/>
    </radialGradient>
    <linearGradient id='shine' x1='0' y1='0' x2='1' y2='1'>
      <stop offset='0%' stop-color='white' stop-opacity='0.8'/>
      <stop offset='100%' stop-color='white' stop-opacity='0'/>
    </linearGradient>
    <clipPath id='coinClip'>
      <circle cx='70' cy='70' r='46'/>
    </clipPath>
  </defs>

  <!-- Sombra -->
  <ellipse cx='70' cy='112' rx='28' ry='8' fill='#000' opacity='0.15'>
    <animate attributeName='rx' values='24;28;24' dur='1.2s' repeatCount='indefinite'/>
    <animate attributeName='opacity' values='0.12;0.2;0.12' dur='1.2s' repeatCount='indefinite'/>
  </ellipse>

  <!-- Canto -->
  <ellipse cx='70' cy='70' rx='46' ry='46' fill='#C08E2B'>
    <animate attributeName='rx' values='46;20;46' dur='1.2s' repeatCount='indefinite'/>
  </ellipse>

  <!-- Cara de la moneda -->
  <g clip-path='url(#coinClip)'>
    <circle cx='70' cy='70' r='44' fill='url(#gold)'/>
    <!-- Estrella -->
    <g transform='translate(70 70)'>
      <polygon points='0,-22 6,-6 22,0 6,6 0,22 -6,6 -22,0 -6,-6'
               fill='#fff' opacity='0.9'>
        <animateTransform attributeName='transform' type='rotate'
                          values='0;360' dur='3s' repeatCount='indefinite'/>
      </polygon>
    </g>
    <!-- Brillo deslizante -->
    <rect x='-60' y='-60' width='120' height='120' fill='url(#shine)' transform='translate(70 70) rotate(-20)'>
      <animate attributeName='x' values='-120;120' dur='1.8s' repeatCount='indefinite'/>
    </rect>
  </g>
</svg>")

Confeti

¡Copiado!

   
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 360' width='600' height='360' role='img' aria-label='Explosión de confeti animada'>
  <rect width='100%' height='100%' fill='none'/>
  <g transform='translate(300,180)'>
    <!-- generador simple: 8 piezas que salen radialmente -->
    <!-- cada pieza es un rect girado, con trayectorias diferentes -->
    <!-- pieza 1 -->
    <rect x='-6' y='-6' width='12' height='18' rx='2' fill='#ff7ab6' opacity='0.95'>
      <animateTransform attributeName='transform' type='translate' from='0 0' to='-160 -100' dur='1.1s' repeatCount='indefinite' />
      <animate attributeName='opacity' values='1;1;0' keyTimes='0;0.7;1' dur='1.1s' repeatCount='indefinite'/>
      <animateTransform attributeName='transform' type='rotate' from='0' to='720' dur='1.1s' repeatCount='indefinite' additive='sum'/>
    </rect>

    <rect x='-6' y='-6' width='12' height='18' rx='2' fill='#ffd166' opacity='0.95'>
      <animateTransform attributeName='transform' type='translate' from='0 0' to='160 -60' dur='1.3s' repeatCount='indefinite' begin='0.15s'/>
      <animate attributeName='opacity' values='1;1;0' keyTimes='0;0.75;1' dur='1.3s' repeatCount='indefinite' begin='0.15s'/>
      <animateTransform attributeName='transform' type='rotate' from='0' to='-540' dur='1.3s' repeatCount='indefinite' additive='sum' begin='0.15s'/>
    </rect>

    <rect x='-6' y='-6' width='12' height='18' rx='2' fill='#6be7ff' opacity='0.95'>
      <animateTransform attributeName='transform' type='translate' from='0 0' to='-60 150' dur='1.5s' repeatCount='indefinite' begin='0.05s'/>
      <animate attributeName='opacity' values='1;1;0' keyTimes='0;0.8;1' dur='1.5s' repeatCount='indefinite' begin='0.05s'/>
      <animateTransform attributeName='transform' type='rotate' from='0' to='360' dur='1.5s' repeatCount='indefinite' additive='sum' begin='0.05s'/>
    </rect>

    <rect x='-6' y='-6' width='12' height='18' rx='2' fill='#b490ca' opacity='0.95'>
      <animateTransform attributeName='transform' type='translate' from='0 0' to='90 140' dur='1.4s' repeatCount='indefinite' begin='0.08s'/>
      <animate attributeName='opacity' values='1;1;0' keyTimes='0;0.78;1' dur='1.4s' repeatCount='indefinite' begin='0.08s'/>
      <animateTransform attributeName='transform' type='rotate' from='0' to='-420' dur='1.4s' repeatCount='indefinite' additive='sum' begin='0.08s'/>
    </rect>

    <!-- 4 piezas más (variación de tiempos y distancias) -->
    <rect x='-6' y='-6' width='12' height='18' rx='2' fill='#7efc6b' opacity='0.95'>
      <animateTransform attributeName='transform' type='translate' from='0 0' to='220 10' dur='1.6s' repeatCount='indefinite' begin='0.12s'/>
      <animate attributeName='opacity' values='1;1;0' keyTimes='0;0.7;1' dur='1.6s' repeatCount='indefinite' begin='0.12s'/>
      <animateTransform attributeName='transform' type='rotate' from='0' to='480' dur='1.6s' repeatCount='indefinite' additive='sum' begin='0.12s'/>
    </rect>

    <rect x='-6' y='-6' width='12' height='18' rx='2' fill='#ffcf6b' opacity='0.95'>
      <animateTransform attributeName='transform' type='translate' from='0 0' to='-210 40' dur='1.5s' repeatCount='indefinite' begin='0.18s'/>
      <animate attributeName='opacity' values='1;1;0' keyTimes='0;0.72;1' dur='1.5s' repeatCount='indefinite' begin='0.18s'/>
      <animateTransform attributeName='transform' type='rotate' from='0' to='-360' dur='1.5s' repeatCount='indefinite' additive='sum' begin='0.18s'/>
    </rect>

    <rect x='-6' y='-6' width='12' height='18' rx='2' fill='#9ad0ff' opacity='0.95'>
      <animateTransform attributeName='transform' type='translate' from='0 0' to='30 -220' dur='1.7s' repeatCount='indefinite' begin='0.07s'/>
      <animate attributeName='opacity' values='1;1;0' keyTimes='0;0.68;1' dur='1.7s' repeatCount='indefinite' begin='0.07s'/>
      <animateTransform attributeName='transform' type='rotate' from='0' to='600' dur='1.7s' repeatCount='indefinite' additive='sum' begin='0.07s'/>
    </rect>
  </g>
</svg>")

Moneda 2

¡Copiado!

   
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'>
  <defs>
    <linearGradient id='gold' x1='0' x2='1'>
      <stop offset='0%' stop-color='#ffea8a'/>
      <stop offset='50%' stop-color='#ffd24a'/>
      <stop offset='100%' stop-color='#ffb700'/>
    </linearGradient>
    <radialGradient id='shine' cx='30%' cy='25%'>
      <stop offset='0%' stop-color='white' stop-opacity='0.9'/>
      <stop offset='40%' stop-color='white' stop-opacity='0.15'/>
      <stop offset='100%' stop-opacity='0'/>
    </radialGradient>
    <filter id='soft' x='-20%' y='-20%' width='140%' height='140%'>
      <feGaussianBlur stdDeviation='2' result='b'/>
      <feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge>
    </filter>
  </defs>

  <!-- fondo -->
  <rect width='100%' height='100%' rx='20' fill='none'/>

  <!-- moneda -->
  <g transform='translate(100,100)'>
    <!-- sombra -->
    <ellipse cx='0' cy='45' rx='46' ry='12' fill='#000' opacity='0.25'>
      <animate attributeName='opacity' values='0.15;0.35;0.15' dur='2.2s' repeatCount='indefinite'/>
      <animate attributeName='rx' values='44;48;44' dur='2.2s' repeatCount='indefinite'/>
    </ellipse>

    <!-- cabezal rotante -->
    <g id='coin' filter='url(#soft)'>
      <circle r='52' fill='url(#gold)'/>
      <circle r='43' fill='none' stroke='#fff5c7' stroke-width='3' opacity='0.35'/>
      <text x='0' y='10' text-anchor='middle' font-family='Verdana' font-weight='700' font-size='32' fill='#8c5a00'>★</text>

      <!-- brillo radial -->
      <circle r='52' fill='url(#shine)' opacity='0.9'/>
    </g>

    <!-- giro 3D (simulado) -->
    <animateTransform xlink:href='#coin' attributeName='transform' type='rotate'
                      from='0' to='360' dur='2.2s' repeatCount='indefinite' />
    <!-- sutil balanceo -->
    <animateTransform attributeName='transform' type='translate' additive='sum'
                      values='0 0; 0 -4; 0 0; 0 2; 0 0' dur='3.6s' repeatCount='indefinite'/>
  </g>
</svg>")

Insignia

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='420' height='240' viewBox='0 0 420 240'>
  <defs>
    <linearGradient id='bgrad' x1='0' x2='1'>
      <stop offset='0' stop-color='#6fe7d6'/>
      <stop offset='1' stop-color='#2cb6a1'/>
    </linearGradient>
    <linearGradient id='rgrad' x1='0' x2='1'>
      <stop offset='0' stop-color='#ffd07a'/>
      <stop offset='1' stop-color='#ff8a4b'/>
    </linearGradient>
  </defs>

  <rect width='100%' height='100%' rx='20' fill='none'/>

  <g transform='translate(210,120)'>
    <!-- cinta -->
    <path d='M-110,20 L-70,40 L-70,-40 L-110,-20 Z' fill='#1e9b8e'/>
    <path d='M110,20 L70,40 L70,-40 L110,-20 Z' fill='#1e9b8e'/>

    <!-- medallón -->
    <g id='badge'>
      <circle r='68' fill='url(#bgrad)' stroke='#fff' stroke-opacity='0.12' stroke-width='2'/>
      <circle r='48' fill='url(#rgrad)'/>

      <text x='0' y='8' text-anchor='middle' font-family='Arial' font-weight='800' font-size='36' fill='#fff'>LEVEL</text>
      <text x='0' y='38' text-anchor='middle' font-family='Arial' font-weight='700' font-size='20' fill='#fff'>5</text>
    </g>

    <!-- destellos -->
    <g id='stars'>
      <polygon points='0,-86 4,-96 10,-86 2,-88 0,-100 -2,-88 -10,-86 -4,-96' fill='#fff' opacity='0.9'>
        <animate attributeName='opacity' values='0.0;0.9;0.0' dur='1.8s' repeatCount='indefinite'/>
      </polygon>
      <polygon transform='translate(-55,-40) scale(0.5)' points='0,-86 4,-96 10,-86 2,-88 0,-100 -2,-88 -10,-86 -4,-96' fill='#fff' opacity='0.85'>
        <animate attributeName='opacity' values='0.0;0.85;0.0' dur='1.6s' begin='0.25s' repeatCount='indefinite'/>
      </polygon>
      <polygon transform='translate(58,-50) scale(0.6)' points='0,-86 4,-96 10,-86 2,-88 0,-100 -2,-88 -10,-86 -4,-96' fill='#fff' opacity='0.75'>
        <animate attributeName='opacity' values='0;0.75;0' dur='2s' begin='0.5s' repeatCount='indefinite'/>
      </polygon>
    </g>

    <!-- pulso -->
    <animateTransform xlink:href='#badge' attributeName='transform' type='scale' values='1;1.08;1' dur='1.6s' repeatCount='indefinite'/>
  </g>
</svg>")

Caja de regalo

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240' width='520' height='280'>
  <rect width='100%' height='100%' fill='none' rx='12'/>

  <g transform='translate(180,120)'>
    <!-- sombra -->
    <ellipse rx='70' ry='16' fill='#000' opacity='0.2'>
      <animate attributeName='opacity' values='0.15;0.35;0.15' dur='1.8s' repeatCount='indefinite'/>
      <animate attributeName='rx' values='66;74;66' dur='1.8s' repeatCount='indefinite'/>
    </ellipse>

    <!-- caja -->
    <g id='box'>
      <rect x='-60' y='-40' width='120' height='80' rx='6' fill='#ff7a9a' stroke='#fff' stroke-opacity='0.06'/>
      <!-- cinta -->
      <rect x='-12' y='-45' width='24' height='100' fill='#ffffff' fill-opacity='0.95'/>
      <rect x='-70' y='-6' width='140' height='24' fill='#ffffff' fill-opacity='0.95'/>

      <!-- lazo (animado) -->
      <g id='bow' transform='translate(0,-46)'>
        <path d='M0,0 C-12,-16 -32,-16 -36,0 C-25,-6 -12,-2 0,0 Z' fill='#ff3b6a'>
          <animate attributeName='d' dur='1.2s' values='
            M0,0 C-12,-16 -32,-16 -36,0 C-25,-6 -12,-2 0,0 Z;
            M0,0 C-10,-22 -28,-22 -34,0 C-25,-10 -12,-2 0,0 Z;
            M0,0 C-12,-16 -32,-16 -36,0 C-25,-6 -12,-2 0,0 Z' repeatCount='indefinite'/>
        </path>
        <path d='M0,0 C12,-16 32,-16 36,0 C25,-6 12,-2 0,0 Z' fill='#ff3b6a' opacity='0.95'>
          <animate attributeName='d' dur='1.2s' values='
            M0,0 C12,-16 32,-16 36,0 C25,-6 12,-2 0,0 Z;
            M0,0 C10,-22 28,-22 34,0 C25,-10 12,-2 0,0 Z;
            M0,0 C12,-16 32,-16 36,0 C25,-6 12,-2 0,0 Z' repeatCount='indefinite'/>
        </path>
      </g>
    </g>

    <!-- salto -->
    <animateTransform xlink:href='#box' attributeName='transform' type='translate'
      values='0 0; 0 -18; 0 0; 0 -8; 0 0' dur='1.6s' repeatCount='indefinite'/>

    <!-- confeti -->
    <g id='confetti'>
      <!-- varios trozos con trayectorias aleatorias (simuladas) -->
      <rect x='-6' y='-120' width='6' height='10' transform='rotate(12)' rx='1' fill='#ffd166'>
        <animate attributeName='y' values='-120; -10; 90' dur='1.6s' repeatCount='indefinite'/>
        <animate attributeName='x' values='-6; -26; -12' dur='1.6s' repeatCount='indefinite'/>
        <animate attributeName='opacity' values='0;1;0' dur='1.6s' repeatCount='indefinite'/>
      </rect>

      <rect x='18' y='-110' width='6' height='10' transform='rotate(-20)' rx='1' fill='#6be4ff'>
        <animate attributeName='y' values='-110; -6; 100' dur='1.8s' begin='0.12s' repeatCount='indefinite'/>
        <animate attributeName='x' values='18; 40; 14' dur='1.8s' begin='0.12s' repeatCount='indefinite'/>
        <animate attributeName='opacity' values='0;1;0' dur='1.8s' begin='0.12s' repeatCount='indefinite'/>
      </rect>

      <rect x='-34' y='-90' width='6' height='10' transform='rotate(6)' rx='1' fill='#9aff8a'>
        <animate attributeName='y' values='-90; -5; 110' dur='2s' begin='0.2s' repeatCount='indefinite'/>
        <animate attributeName='x' values='-34; -10; -22' dur='2s' begin='0.2s' repeatCount='indefinite'/>
        <animate attributeName='opacity' values='0;1;0' dur='2s' begin='0.2s' repeatCount='indefinite'/>
      </rect>

      <rect x='32' y='-140' width='6' height='10' transform='rotate(40)' rx='1' fill='#ffd3ff'>
        <animate attributeName='y' values='-140; -20; 120' dur='1.9s' begin='0.03s' repeatCount='indefinite'/>
        <animate attributeName='x' values='32; 14; 36' dur='1.9s' begin='0.03s' repeatCount='indefinite'/>
        <animate attributeName='opacity' values='0;1;0' dur='1.9s' begin='0.03s' repeatCount='indefinite'/>
      </rect>
    </g>

  </g>
</svg>")

Confeti 2

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg viewBox='0 0 360 180' width='520' height='160' xmlns='http://www.w3.org/2000/svg' aria-label='Confetti animation'>
  <defs>
    <style>
      .p { animation-name: fall; animation-duration: 2.8s; animation-iteration-count: infinite; animation-timing-function: linear;}
      .r { animation-name: rotateX; animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: linear;}
      @keyframes fall { 0% { transform: translateY(-40px) translateX(0) } 100% { transform: translateY(220px) translateX(20px) } }
      @keyframes rotateX { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }
    </style>
  </defs>

  <!-- múltiples confetis -->
  <g transform='translate(0,0)'>
    <rect class='p r' x='30' y='-20' width='12' height='18' rx='2' fill='#ff6b6b' style='animation-delay:0s'/>
    <rect class='p' x='80' y='-40' width='10' height='14' rx='2' fill='#ffd166' style='animation-delay:0.2s'/>
    <rect class='p r' x='130' y='-10' width='14' height='12' rx='3' fill='#8ac926' style='animation-delay:0.4s'/>
    <rect class='p' x='180' y='-30' width='10' height='16' rx='2' fill='#4d96ff' style='animation-delay:0.6s'/>
    <rect class='p r' x='230' y='-15' width='12' height='18' rx='2' fill='#a96bff' style='animation-delay:0.8s'/>
    <rect class='p' x='280' y='-25' width='12' height='14' rx='2' fill='#ff9f43' style='animation-delay:1s'/>
    
    <rect class='p r' x='60' y='-40' width='12' height='18' rx='2' fill='#ff9f43' style='animation-delay:0s'/>
    <rect class='p' x='160' y='-80' width='10' height='14' rx='2' fill='#a96bff' style='animation-delay:0.2s'/>
    <rect class='p r' x='260' y='-20' width='14' height='12' rx='3' fill='#8ac926' style='animation-delay:0.4s'/>
    <rect class='p' x='300' y='-10' width='10' height='16' rx='2' fill='#4d96ff' style='animation-delay:0.6s'/>
    <rect class='p r' x='40' y='-25' width='12' height='18' rx='2' fill='#a96bff' style='animation-delay:0.8s'/>
    <rect class='p' x='20' y='-35' width='12' height='14' rx='2' fill='#ff6b6b' style='animation-delay:1s'/>
  </g>

  <!-- pequeño mensaje central -->
  <text x='180' y='100' font-family='Segoe UI, Arial' font-size='18' text-anchor='middle' fill='#222'>¡Aqui tu texto!</text>
</svg>")

Burbujas flotantes

¡Copiado!

    
    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180' width='640' height='360' aria-label='Floating bubbles'>
  <defs>
    <radialGradient id='bg' cx='50%' cy='20%' r='70%'>
      <stop offset='0%' stop-color='#f0f9ff'/>
      <stop offset='100%' stop-color='#e6f7ff'/>
    </radialGradient>
    <style>
      .float1 { animation: float1 6s ease-in-out infinite; }
      .float2 { animation: float2 5s ease-in-out infinite; }
      .float3 { animation: float3 7s ease-in-out infinite; }
      .float4 { animation: float3 7s ease-in-out infinite; }
      @keyframes float1 { 0% { transform: translateY(0) translateX(0) } 50% { transform: translateY(-12px) translateX(6px) } 100% { transform: translateY(0) translateX(0) } }
      @keyframes float2 { 0% { transform: translateY(0) } 50% { transform: translateY(-20px) } 100% { transform: translateY(0) } }
      @keyframes float3 { 0% { transform: translateY(0) } 50% { transform: translateY(-8px) translateX(-8px) } 100% { transform: translateY(0) } }
      @keyframes float4 { 0% { transform: translateY(0) } 50% { transform: translateY(-10px) } 100% { transform: translateY(0) } }
    </style>
  </defs>

  <rect width='100%' height='100%' fill='url(#bg)'/>

  <g opacity='0.95'>
    <circle class='float1' cx='60' cy='120' r='28' fill='#bdeaff' opacity='0.95'/>
    <circle class='float2' cx='170' cy='50' r='36' fill='#c7f0ff' opacity='0.9'/>
    <circle class='float3' cx='250' cy='110' r='20' fill='#bdeaff' opacity='0.95'/>
    <circle class='float4' cx='140' cy='150' r='16' fill='#c7f0ff' opacity='0.9'/>
    <!-- lentes / blanco -->
    <ellipse cx='170' cy='42' rx='12' ry='6' fill='#ffffff' opacity='0.35'/>
  </g>

  <!-- pequeña card -->
  <g transform='translate(28,18)'>
    <rect width='180' height='76' rx='12' fill='#ffffff' opacity='0.9'/>
    <text x='18' y='30' font-family='Segoe UI, Arial' font-size='16' fill='#0b3b66'>Aquí tu texto</text>
    <text x='18' y='54' font-family='Segoe UI, Arial' font-size='22' fill='#0b3b66' font-weight='700'>100%</text>
  </g>
</svg>")

Persona con billete

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'>
  <!-- Fondo -->
  <rect width='100%' height='100%' fill='none'/>

  <!-- Persona estilo avatar -->
  <circle cx='150' cy='120' r='40' fill='#4a90e2' /> <!-- Cabeza -->
  <rect x='110' y='160' width='80' height='100' rx='40' fill='#2c3e50'/> <!-- Cuerpo -->
  <rect x='120' y='240' width='20' height='40' rx='8' fill='#34495e'/> <!-- Pierna izquierda -->
  <rect x='160' y='240' width='20' height='40' rx='8' fill='#34495e'/> <!-- Pierna derecha -->

  <!-- Sombra del personaje -->
  <ellipse cx='150' cy='285' rx='60' ry='10' fill='rgba(0,0,0,0.15)'/>

  <!-- Billete flotante -->
  <g>
    <rect x='110' y='30' width='80' height='40' rx='6' ry='6' fill='#27ae60' stroke='#145a32' stroke-width='3'/>
    <circle cx='150' cy='50' r='10' fill='#145a32' />
    <text x='150' y='55' font-size='14' font-family='Arial, sans-serif' text-anchor='middle' fill='white'>$</text>

    <!-- Animación de flotación -->
    <animateTransform 
      attributeName='transform' 
      type='translate' 
      values='0,-10; 0,10; 0,-10' 
      dur='3s' 
      repeatCount='indefinite'/>
  </g>
</svg>")

Persona con varios billetes

¡Copiado!

   
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='300' height='350' viewBox='0 0 300 350'>
  <!-- Fondo -->
  <rect width='100%' height='100%' fill='none'/>

  <!-- Persona estilo avatar -->
  <circle cx='150' cy='140' r='40' fill='#4a90e2' /> <!-- Cabeza -->
  <rect x='110' y='180' width='80' height='100' rx='40' fill='#2c3e50'/> <!-- Cuerpo -->
  <rect x='120' y='280' width='20' height='40' rx='8' fill='#34495e'/> <!-- Pierna izquierda -->
  <rect x='160' y='280' width='20' height='40' rx='8' fill='#34495e'/> <!-- Pierna derecha -->

  <!-- Sombra del personaje -->
  <ellipse cx='150' cy='330' rx='60' ry='12' fill='rgba(0,0,0,0.15)'/>

  <!-- Grupo de billetes animados -->
  <g>
    <!-- Billete 1 -->
    <g>
      <rect x='50' y='20' width='60' height='30' rx='5' ry='5' fill='#27ae60' stroke='#145a32' stroke-width='2'/>
      <circle cx='80' cy='35' r='8' fill='#145a32' />
      <text x='80' y='40' font-size='10' font-family='Arial' text-anchor='middle' fill='white'>$</text>
      <animateTransform attributeName='transform' type='translate'
        values='0,0; 0,250' dur='6s' repeatCount='indefinite'/>
    </g>

    <!-- Billete 2 -->
    <g>
      <rect x='200' y='0' width='70' height='35' rx='5' ry='5' fill='#27ae60' stroke='#145a32' stroke-width='2'/>
      <circle cx='235' cy='18' r='9' fill='#145a32' />
      <text x='235' y='22' font-size='12' font-family='Arial' text-anchor='middle' fill='white'>$</text>
      <animateTransform attributeName='transform' type='translate'
        values='0,0; 0,300' dur='7s' begin='2s' repeatCount='indefinite'/>
    </g>

    <!-- Billete 3 -->
    <g>
      <rect x='120' y='10' width='60' height='30' rx='5' ry='5' fill='#27ae60' stroke='#145a32' stroke-width='2'/>
      <circle cx='150' cy='25' r='8' fill='#145a32' />
      <text x='150' y='30' font-size='10' font-family='Arial' text-anchor='middle' fill='white'>$</text>
      <animateTransform attributeName='transform' type='translate'
        values='0,0; 0,280' dur='5s' begin='1s' repeatCount='indefinite'/>
    </g>
  </g>
</svg>")

Check 1 (círculo con movimiento y check flotando)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Círculo dibujándose -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#4CAF50'
          stroke-width='6'
          stroke-dasharray='251'
          stroke-dashoffset='251'>
    <!-- Animación del trazo del círculo -->
    <animate attributeName='stroke-dashoffset'
             from='251' to='0'
             dur='1s' fill='freeze'/>
  </circle>

  <!-- Círculo con brillo pulsante (aparece después de dibujarse) -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#4CAF50'
          stroke-width='6'
          opacity='0'>
    <animate attributeName='opacity'
             values='0;1;0.4;1;0.4'
             dur='2s'
             begin='1s'
             repeatCount='indefinite'/>
  </circle>

  <!-- Check animado -->
  <path d='M30 50 L45 65 L70 35'
        fill='none'
        stroke='#4CAF50'
        stroke-width='6'
        stroke-linecap='round'
        stroke-linejoin='round'
        stroke-dasharray='60'
        stroke-dashoffset='60'>
    <!-- Animación de trazo del check (comienza después del círculo) -->
    <animate attributeName='stroke-dashoffset'
             from='60' to='0'
             dur='0.8s'
             begin='1s'
             fill='freeze'/>
    <!-- Flotación del check -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.8s'
                      repeatCount='indefinite'
                      additive='sum'/>
  </path>
</svg>")

Check 2 (Circulo fijo con brillo y check flotando)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Círculo base -->
  <circle cx='50' cy='50' r='40' fill='none' stroke='#4CAF50' stroke-width='6' opacity='0.5'/>

  <!-- Círculo con brillo pulsante -->
  <circle cx='50' cy='50' r='40' fill='none' stroke='#4CAF50' stroke-width='6' opacity='0.8'>
    <animate attributeName='opacity' values='0.4;1;0.4' dur='2s' repeatCount='indefinite'/>
  </circle>

  <!-- Check animado -->
  <path d='M30 50 L45 65 L70 35'
        fill='none'
        stroke='#4CAF50'
        stroke-width='6'
        stroke-linecap='round'
        stroke-linejoin='round'
        stroke-dasharray='60'
        stroke-dashoffset='60'>
    <!-- Animación de trazo -->
    <animate attributeName='stroke-dashoffset'
             from='60' to='0'
             dur='0.8s' fill='freeze'/>
    <!-- Animación de flotación -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      repeatCount='indefinite'
                      additive='sum'
                      begin='0.8s'/>
  </path>
</svg>")

Check 3 (círculo y check con movimiento)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Círculo dibujándose -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#4CAF50'
          stroke-width='6'
          stroke-dasharray='251'
          stroke-dashoffset='251'>
    <!-- Animación del trazo del círculo -->
    <animate attributeName='stroke-dashoffset'
             from='251' to='0'
             dur='1s' fill='freeze'/>
  </circle>

  <!-- Círculo con brillo pulsante (aparece después de dibujarse) -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#4CAF50'
          stroke-width='6'
          opacity='0'>
    <animate attributeName='opacity'
             values='0;1;0.4;1;0.4'
             dur='2s'
             begin='1s'
             repeatCount='indefinite'/>
  </circle>

  <!-- Check animado -->
  <path d='M30 50 L45 65 L70 35'
        fill='none'
        stroke='#4CAF50'
        stroke-width='6'
        stroke-linecap='round'
        stroke-linejoin='round'
        stroke-dasharray='60'
        stroke-dashoffset='60'>
    <!-- Animación de trazo del check -->
    <animate attributeName='stroke-dashoffset'
             from='60' to='0'
             dur='0.8s'
             begin='1s'
             fill='freeze'/>
    <!-- Efecto de pulso (escala) -->
    <animateTransform attributeName='transform'
                      type='scale'
                      values='1;1.15;1'
                      dur='1.2s'
                      begin='1.8s'
                      repeatCount='indefinite'/>
    <!-- Brillo (cambia opacidad) -->
    <animate attributeName='stroke-opacity'
             values='1;0.6;1'
             dur='1.2s'
             begin='1.8s'
             repeatCount='indefinite'/>
  </path>
</svg>")

Check 4 (círculo y check brillantes con movimiento)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <!-- Filtro de resplandor -->
    <filter id='glow' x='-50%' y='-50%' width='200%' height='200%'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='4' result='blur'/>
      <feMerge>
        <feMergeNode in='blur'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>

  <!-- Círculo dibujándose -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#4CAF50'
          stroke-width='6'
          stroke-dasharray='251'
          stroke-dashoffset='251'
          filter='url(#glow)'>
    <animate attributeName='stroke-dashoffset'
             from='251' to='0'
             dur='1s' fill='freeze'/>
  </circle>

  <!-- Círculo con brillo pulsante -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#4CAF50'
          stroke-width='6'
          opacity='0'
          filter='url(#glow)'>
    <animate attributeName='opacity'
             values='0;1;0.4;1;0.4'
             dur='2s'
             begin='1s'
             repeatCount='indefinite'/>
  </circle>

  <!-- Check animado -->
  <path d='M30 50 L45 65 L70 35'
        fill='none'
        stroke='#4CAF50'
        stroke-width='6'
        stroke-linecap='round'
        stroke-linejoin='round'
        stroke-dasharray='60'
        stroke-dashoffset='60'
        filter='url(#glow)'>
    <!-- Animación de trazo -->
    <animate attributeName='stroke-dashoffset'
             from='60' to='0'
             dur='0.8s'
             begin='1s'
             fill='freeze'/>
    <!-- Pulso continuo (escala) -->
    <animateTransform attributeName='transform'
                      type='scale'
                      values='1;1.15;1'
                      dur='1.2s'
                      begin='1.8s'
                      repeatCount='indefinite'/>
    <!-- Pulso continuo (brillo) -->
    <animate attributeName='stroke-opacity'
             values='1;0.6;1'
             dur='1.2s'
             begin='1.8s'
             repeatCount='indefinite'/>
  </path>
</svg>")

Check 4 (círculo brillando y check flotando)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <!-- Filtro de resplandor suave -->
    <filter id='softGlow' x='-50%' y='-50%' width='200%' height='200%'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='2.2' result='blur'/>
      <feMerge>
        <feMergeNode in='blur'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>

  <!-- Círculo con brillo pulsante -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#4CAF50'
          stroke-width='6'
          opacity='0.7'
          filter='url(#softGlow)'>
    <animate attributeName='opacity'
             values='0.4;0.9;0.4'
             dur='2s'
             repeatCount='indefinite'/>
  </circle>

  <!-- Check animado -->
  <path d='M30 50 L45 65 L70 35'
        fill='none'
        stroke='#4CAF50'
        stroke-width='6'
        stroke-linecap='round'
        stroke-linejoin='round'
        stroke-dasharray='60'
        stroke-dashoffset='60'
        filter='url(#softGlow)'>
    <!-- Animación de trazo -->
    <animate attributeName='stroke-dashoffset'
             from='60' to='0'
             dur='0.8s'
             fill='freeze'/>
    <!-- Flotación continua -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='0.8s'
                      repeatCount='indefinite'/>
  </path>
</svg>")

Cancelar 1 (círculo brillando y X flotando)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <!-- Filtro de resplandor rojo suave -->
    <filter id='softGlowRed' x='-50%' y='-50%' width='200%' height='200%'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='2.2' result='blur'/>
      <feMerge>
        <feMergeNode in='blur'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>

  <!-- Círculo con brillo pulsante -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          opacity='0.7'
          filter='url(#softGlowRed)'>
    <animate attributeName='opacity'
             values='0.4;0.9;0.4'
             dur='2s'
             repeatCount='indefinite'/>
  </circle>

  <!-- X animada (dos líneas cruzadas) -->
  <path d='M35 35 L65 65'
        fill='none'
        stroke='#F44336'
        stroke-width='6'
        stroke-linecap='round'
        stroke-dasharray='42'
        stroke-dashoffset='42'
        filter='url(#softGlowRed)'>
    <!-- Animación de trazo -->
    <animate attributeName='stroke-dashoffset'
             from='42' to='0'
             dur='0.6s'
             fill='freeze'/>
    <!-- Flotación -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='0.6s'
                      repeatCount='indefinite'/>
  </path>

  <path d='M65 35 L35 65'
        fill='none'
        stroke='#F44336'
        stroke-width='6'
        stroke-linecap='round'
        stroke-dasharray='42'
        stroke-dashoffset='42'
        filter='url(#softGlowRed)'>
    <!-- Animación de trazo con leve retraso -->
    <animate attributeName='stroke-dashoffset'
             from='42' to='0'
             dur='0.6s'
             begin='0.3s'
             fill='freeze'/>
    <!-- Flotación -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='0.9s'
                      repeatCount='indefinite'/>
  </path>
</svg>")

Cancelar 2 (círculo brillando y X flotando)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <!-- Filtro de resplandor rojo suave -->
    <filter id='softGlowRed' x='-50%' y='-50%' width='200%' height='200%'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='2.2' result='blur'/>
      <feMerge>
        <feMergeNode in='blur'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>

  <!-- Círculo con brillo pulsante -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          opacity='0.7'
          filter='url(#softGlowRed)'>
    <animate attributeName='opacity'
             values='0.4;0.9;0.4'
             dur='2s'
             repeatCount='indefinite'/>
  </circle>

  <!-- Grupo de la X para aplicar golpe y flotación -->
  <g filter='url(#softGlowRed)'>
    <!-- Línea 1 -->
    <path d='M35 35 L65 65'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          stroke-linecap='round'
          stroke-dasharray='42'
          stroke-dashoffset='42'>
      <animate attributeName='stroke-dashoffset'
               from='42' to='0'
               dur='0.6s'
               fill='freeze'/>
    </path>

    <!-- Línea 2 -->
    <path d='M65 35 L35 65'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          stroke-linecap='round'
          stroke-dasharray='42'
          stroke-dashoffset='42'>
      <animate attributeName='stroke-dashoffset'
               from='42' to='0'
               dur='0.6s'
               begin='0.3s'
               fill='freeze'/>
    </path>

    <!-- Golpe (scale con rebote) -->
    <animateTransform attributeName='transform'
                      type='scale'
                      values='1;1.2;0.9;1'
                      begin='0.9s'
                      dur='0.5s'
                      fill='freeze'/>

    <!-- Flotación continua -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.4s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Cancelar 3 (círculo brillando y X flotando)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <!-- Filtro de resplandor rojo suave -->
    <filter id='softGlowRed' x='-50%' y='-50%' width='200%' height='200%'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='2.2' result='blur'/>
      <feMerge>
        <feMergeNode in='blur'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>

  <!-- Grupo círculo + X para aplicar golpe en conjunto -->
  <g filter='url(#softGlowRed)'>
    <!-- Círculo con brillo pulsante -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#F44336'
            stroke-width='6'
            opacity='0.7'>
      <!-- Pulso infinito -->
      <animate attributeName='opacity'
               values='0.4;0.9;0.4'
               dur='2s'
               repeatCount='indefinite'/>
    </circle>

    <!-- X -->
    <path d='M35 35 L65 65'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          stroke-linecap='round'
          stroke-dasharray='42'
          stroke-dashoffset='42'>
      <animate attributeName='stroke-dashoffset'
               from='42' to='0'
               dur='0.6s'
               fill='freeze'/>
    </path>

    <path d='M65 35 L35 65'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          stroke-linecap='round'
          stroke-dasharray='42'
          stroke-dashoffset='42'>
      <animate attributeName='stroke-dashoffset'
               from='42' to='0'
               dur='0.6s'
               begin='0.3s'
               fill='freeze'/>
    </path>

    <!-- Golpe sincronizado (círculo + X) -->
    <animateTransform attributeName='transform'
                      type='scale'
                      values='1;1.2;0.9;1'
                      begin='0.9s'
                      dur='0.5s'
                      additive='replace'
                      fill='freeze'/>

    <!-- Flotación continua -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.4s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Cancelar 3 (círculo brillando y X flotando)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <!-- Filtro de resplandor rojo -->
    <filter id='softGlowRed' x='-50%' y='-50%' width='200%' height='200%'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='2.2' result='blur'/>
      <feMerge>
        <feMergeNode in='blur'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>

  <!-- Onda expansiva (se activa al golpe) -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#F44336'
          stroke-width='3'
          opacity='0'>
    <animate attributeName='r'
             from='40' to='70'
             begin='0.9s'
             dur='0.6s'
             fill='freeze'/>
    <animate attributeName='opacity'
             values='0.6;0'
             begin='0.9s'
             dur='0.6s'
             fill='freeze'/>
  </circle>

  <!-- Grupo círculo + X -->
  <g filter='url(#softGlowRed)'>
    <!-- Círculo principal con pulso -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#F44336'
            stroke-width='6'
            opacity='0.7'>
      <animate attributeName='opacity'
               values='0.4;0.9;0.4'
               dur='2s'
               repeatCount='indefinite'/>
    </circle>

    <!-- X línea 1 -->
    <path d='M35 35 L65 65'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          stroke-linecap='round'
          stroke-dasharray='42'
          stroke-dashoffset='42'>
      <animate attributeName='stroke-dashoffset'
               from='42' to='0'
               dur='0.6s'
               fill='freeze'/>
    </path>

    <!-- X línea 2 -->
    <path d='M65 35 L35 65'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          stroke-linecap='round'
          stroke-dasharray='42'
          stroke-dashoffset='42'>
      <animate attributeName='stroke-dashoffset'
               from='42' to='0'
               dur='0.6s'
               begin='0.3s'
               fill='freeze'/>
    </path>

    <!-- Golpe sincronizado -->
    <animateTransform attributeName='transform'
                      type='scale'
                      values='1;1.2;0.9;1'
                      begin='0.9s'
                      dur='0.5s'
                      additive='replace'
                      fill='freeze'/>

    <!-- Flotación continua -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.4s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Cancelar 4 (círculo y X flotando)

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + X -->
  <g>
    <!-- Círculo principal estático -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#F44336'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- X línea 1 -->
    <path d='M35 35 L65 65'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          stroke-linecap='round'
          stroke-dasharray='42'
          stroke-dashoffset='42'>
      <animate attributeName='stroke-dashoffset'
               from='42' to='0'
               dur='0.6s'
               fill='freeze'/>
    </path>

    <!-- X línea 2 -->
    <path d='M65 35 L35 65'
          fill='none'
          stroke='#F44336'
          stroke-width='6'
          stroke-linecap='round'
          stroke-dasharray='42'
          stroke-dashoffset='42'>
      <animate attributeName='stroke-dashoffset'
               from='42' to='0'
               dur='0.6s'
               begin='0.3s'
               fill='freeze'/>
    </path>

    <!-- Flotación continua -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='0.9s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Interrogativo 1

¡Copiado!

   
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + ? -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#42A5F5'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Signo de interrogación -->
    <text x='50' y='60'
          text-anchor='middle'
          font-size='50'
          font-family='Arial, sans-serif'
          fill='none'
          stroke='#42A5F5'
          stroke-width='3'
          stroke-dasharray='200'
          stroke-dashoffset='200'>
      ?
      <animate attributeName='stroke-dashoffset'
               from='200' to='0'
               dur='1s'
               fill='freeze'/>
      <animate attributeName='fill'
               values='none;#42A5F5'
               begin='1s'
               dur='0.5s'
               fill='freeze'/>
    </text>

    <!-- Flotación continua -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.5s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Exclamativo 1

¡Copiado!

 
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + ! -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#FFC107'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Signo de exclamación -->
    <text x='50' y='60'
          text-anchor='middle'
          font-size='55'
          font-family='Arial, sans-serif'
          fill='none'
          stroke='#FFC107'
          stroke-width='3'
          stroke-dasharray='200'
          stroke-dashoffset='200'>
      !
      <!-- Animación del trazo -->
      <animate attributeName='stroke-dashoffset'
               from='200' to='0'
               dur='1s'
               fill='freeze'/>
      <!-- Animación de relleno -->
      <animate attributeName='fill'
               values='none;#FFC107'
               begin='1s'
               dur='0.5s'
               fill='freeze'/>
    </text>

    <!-- Flotación continua -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.5s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Exclamativo 2

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + ! -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#FFC107'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Signo de exclamación -->
    <text x='50' y='60'
          text-anchor='middle'
          font-size='55'
          font-family='Arial, sans-serif'
          fill='none'
          stroke='#FFC107'
          stroke-width='3'
          stroke-dasharray='200'
          stroke-dashoffset='200'>
      !
      <!-- Animación del trazo -->
      <animate attributeName='stroke-dashoffset'
               from='200' to='0'
               dur='1s'
               fill='freeze'/>
      <!-- Animación de relleno -->
      <animate attributeName='fill'
               values='none;#FFC107'
               begin='1s'
               dur='0.5s'
               fill='freeze'/>
      <!-- Efecto de rebote lateral (temblor) -->
      <animateTransform attributeName='transform'
                        type='translate'
                        values='0 0; -2 0; 2 0; -2 0; 2 0; 0 0'
                        begin='1.5s'
                        dur='0.8s'
                        repeatCount='indefinite'/>
    </text>

    <!-- Flotación continua -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.5s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Exclamativo 3

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + ! -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#FFC107'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Signo de exclamación -->
    <text x='50' y='60'
          text-anchor='middle'
          font-size='55'
          font-family='Arial, sans-serif'
          fill='none'
          stroke='#FFC107'
          stroke-width='3'
          stroke-dasharray='200'
          stroke-dashoffset='200'>
      !
      <!-- Animación del trazo -->
      <animate attributeName='stroke-dashoffset'
               from='200' to='0'
               dur='1s'
               fill='freeze'/>
      <!-- Animación de relleno -->
      <animate attributeName='fill'
               values='none;#FFC107'
               begin='1s'
               dur='0.5s'
               fill='freeze'/>
      <!-- Temblor lateral + giro -->
      <animateTransform attributeName='transform'
                        type='rotate'
                        values='0 -50 60; 5 -50 60; -5 -50 60; 5 -50 60; -5 -50 60; 0 -50 60'
                        begin='1.5s'
                        dur='0.8s'
                        repeatCount='indefinite'/>
      <animateTransform attributeName='transform'
                        type='translate'
                        values='0 0; -2 0; 2 0; -2 0; 2 0; 0 0'
                        begin='1.5s'
                        dur='0.8s'
                        repeatCount='indefinite'
                        additive='sum'/>
    </text>

    <!-- Flotación continua del grupo -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.5s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Interrogación 2

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + ? -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#42A5F5'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Signo de interrogación -->
    <text x='50' y='60'
          text-anchor='middle'
          font-size='55'
          font-family='Arial, sans-serif'
          fill='none'
          stroke='#42A5F5'
          stroke-width='3'
          stroke-dasharray='200'
          stroke-dashoffset='200'>
      ?
      <!-- Animación del trazo -->
      <animate attributeName='stroke-dashoffset'
               from='200' to='0'
               dur='1s'
               fill='freeze'/>
      <!-- Animación de relleno -->
      <animate attributeName='fill'
               values='none;#42A5F5'
               begin='1s'
               dur='0.5s'
               fill='freeze'/>
      <!-- Efecto de latido (pulse) -->
      <animateTransform attributeName='transform'
                        type='scale'
                        values='1;1.2;1'
                        begin='1.5s'
                        dur='1s'
                        repeatCount='indefinite'/>
    </text>

    <!-- Flotación continua -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.5s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Interrogación 3

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + ? -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#42A5F5'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Signo de interrogación -->
    <text x='50' y='60'
          text-anchor='middle'
          font-size='55'
          font-family='Arial, sans-serif'
          fill='none'
          stroke='#42A5F5'
          stroke-width='3'
          stroke-dasharray='200'
          stroke-dashoffset='200'>
      ?
      <!-- Animación del trazo -->
      <animate attributeName='stroke-dashoffset'
               from='200' to='0'
               dur='1s'
               fill='freeze'/>
      <!-- Animación de relleno -->
      <animate attributeName='fill'
               values='none;#42A5F5'
               begin='1s'
               dur='0.5s'
               fill='freeze'/>
      <!-- Temblor lateral + giro -->
      <animateTransform attributeName='transform'
                        type='rotate'
                        values='0 50 60; 5 50 60; -5 50 60; 5 50 60; -5 50 60; 0 50 60'
                        begin='1.5s'
                        dur='0.8s'
                        repeatCount='indefinite'/>
      <animateTransform attributeName='transform'
                        type='translate'
                        values='0 0; -2 0; 2 0; -2 0; 2 0; 0 0'
                        begin='1.5s'
                        dur='0.8s'
                        repeatCount='indefinite'
                        additive='sum'/>
    </text>

    <!-- Flotación continua del grupo -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='1.5s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Email 1

¡Copiado!

  
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + email -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#42A5F5'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Ícono de email -->
    <g fill='none' stroke='#42A5F5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'>
      <!-- Sobre -->
      <rect x='25' y='35' width='50' height='30' rx='3' ry='3'/>
      <!-- Solapa del sobre -->
      <path d='M25 35 L50 55 L75 35'/>
    </g>

    <!-- Flotación continua del grupo -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Email 2

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + email -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#42A5F5'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Ícono de email -->
    <g fill='none' stroke='#42A5F5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'>
      <!-- Sobre -->
      <rect x='25' y='35' width='50' height='30' rx='3' ry='3'/>
      <!-- Solapa del sobre -->
      <path d='M25 35 L50 55 L75 35'/>
      <!-- Efecto de rebote al aparecer -->
      <animateTransform attributeName='transform'
                        type='scale'
                        values='0.5;1.2;0.9;1'
                        dur='0.6s'
                        fill='freeze'/>
    </g>

    <!-- Flotación continua del grupo -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='0.6s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Email 3

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + email -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#42A5F5'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Ícono de email -->
    <g fill='none' stroke='#42A5F5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'>
      <!-- Sobre -->
      <rect x='25' y='35' width='50' height='30' rx='3' ry='3'/>
      <!-- Solapa del sobre -->
      <path d='M25 35 L50 55 L75 35'/>
      <!-- Rebote inicial -->
      <animateTransform attributeName='transform'
                        type='scale'
                        values='0.5;1.2;0.9;1'
                        dur='0.6s'
                        fill='freeze'/>
      <!-- Temblor lateral + ligero giro -->
      <animateTransform attributeName='transform'
                        type='rotate'
                        values='0 50 50; 3 50 50; -3 50 50; 3 50 50; -3 50 50; 0 50 50'
                        begin='0.6s'
                        dur='1s'
                        repeatCount='indefinite'/>
      <animateTransform attributeName='transform'
                        type='translate'
                        values='0 0; -2 0; 2 0; -2 0; 2 0; 0 0'
                        begin='0.6s'
                        dur='1s'
                        repeatCount='indefinite'
                        additive='sum'/>
    </g>

    <!-- Flotación continua del grupo -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='0.6s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Email 4

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + email -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#42A5F5'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Ícono de email -->
    <g fill='none' stroke='#42A5F5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'>
      <!-- Sobre -->
      <rect x='25' y='35' width='50' height='30' rx='3' ry='3'/>
      <!-- Solapa del sobre -->
      <path d='M25 35 L50 55 L75 35'/>
      
      <!-- Rebote inicial -->
      <animateTransform attributeName='transform'
                        type='scale'
                        values='0.5;1.2;0.9;1'
                        dur='0.6s'
                        fill='freeze'/>
      
      <!-- Temblor lateral + giro -->
      <animateTransform attributeName='transform'
                        type='rotate'
                        values='0 50 50; 3 50 50; -3 50 50; 3 50 50; -3 50 50; 0 50 50'
                        begin='0.6s'
                        dur='1s'
                        repeatCount='indefinite'/>
      <animateTransform attributeName='transform'
                        type='translate'
                        values='0 0; -2 0; 2 0; -2 0; 2 0; 0 0'
                        begin='0.6s'
                        dur='1s'
                        repeatCount='indefinite'
                        additive='sum'/>
      
      <!-- Brillo pulsante -->
      <animate attributeName='stroke-width'
               values='4;6;4'
               begin='0.6s'
               dur='1s'
               repeatCount='indefinite'/>
      <animate attributeName='stroke-opacity'
               values='1;0.7;1'
               begin='0.6s'
               dur='1s'
               repeatCount='indefinite'/>
    </g>

    <!-- Flotación continua del grupo -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='0.6s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Laptop 1

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + laptop -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#42A5F5'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Ícono de laptop -->
    <g fill='none' stroke='#42A5F5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'>
      <!-- Pantalla -->
      <rect x='30' y='30' width='40' height='25' rx='2' ry='2'/>
      <!-- Base/teclado -->
      <rect x='25' y='55' width='50' height='5' rx='1' ry='1'/>
      <!-- Línea de bisel -->
      <line x1='30' y1='30' x2='70' y2='30'/>
    </g>

    <!-- Flotación continua del grupo -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Laptop 2

¡Copiado!

    
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Grupo círculo + laptop -->
  <g>
    <!-- Círculo principal -->
    <circle cx='50' cy='50' r='40'
            fill='none'
            stroke='#42A5F5'
            stroke-width='6'
            opacity='0.9'/>
    
    <!-- Ícono de laptop -->
    <g fill='none' stroke='#42A5F5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'>
      <!-- Pantalla -->
      <rect x='30' y='30' width='40' height='25' rx='2' ry='2'/>
      <!-- Base/teclado -->
      <rect x='25' y='55' width='50' height='5' rx='1' ry='1'/>
      <!-- Línea de bisel -->
      <line x1='30' y1='30' x2='70' y2='30'/>
      
      <!-- Rebote inicial -->
      <animateTransform attributeName='transform'
                        type='scale'
                        values='0.5;1.2;0.9;1'
                        dur='0.6s'
                        fill='freeze'/>
      
      <!-- Temblor lateral + giro ligero -->
      <animateTransform attributeName='transform'
                        type='rotate'
                        values='0 50 50; 3 50 50; -3 50 50; 3 50 50; -3 50 50; 0 50 50'
                        begin='0.6s'
                        dur='1s'
                        repeatCount='indefinite'/>
      <animateTransform attributeName='transform'
                        type='translate'
                        values='0 0; -2 0; 2 0; -2 0; 2 0; 0 0'
                        begin='0.6s'
                        dur='1s'
                        repeatCount='indefinite'
                        additive='sum'/>
    </g>

    <!-- Flotación continua del grupo -->
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; 0 -4; 0 0; 0 4; 0 0'
                      dur='3s'
                      begin='0.6s'
                      repeatCount='indefinite'/>
  </g>
</svg>")

Usuario 1

¡Copiado!

   
    
    "data:image/svg+xml;utf8,"&EncodeUrl(" <svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Círculo principal -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#42A5F5'
          stroke-width='6'
          opacity='0.9'/>
  
  <!-- Ícono de usuario pulido -->
  <g fill='none' stroke='#42A5F5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'>
    <!-- Cabeza -->
    <circle cx='50' cy='35' r='9'/>
    <!-- Torso y hombros más equilibrados -->
    <path d='M36,60 Q50,48 64,60 Q50,78 36,60'/>
  </g>

  <!-- Flotación suave -->
  <animateTransform attributeName='transform'
                    type='translate'
                    values='0 0; 0 -4; 0 0; 0 4; 0 0'
                    dur='3s'
                    repeatCount='indefinite'/>
</svg>")

Usuario 2

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Círculo principal -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#42A5F5'
          stroke-width='6'
          opacity='0.9'/>

  <!-- Ícono de usuario con animación -->
  <g fill='none' stroke='#42A5F5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'>
    <!-- Cabeza -->
    <circle cx='50' cy='35' r='9'/>
    <!-- Torso y hombros -->
    <path d='M36,60 Q50,48 64,60 Q50,78 36,60'/>

    <!-- Rebote inicial -->
    <animateTransform attributeName='transform'
                      type='scale'
                      values='0.5;1.2;0.9;1'
                      dur='0.6s'
                      fill='freeze'/>
    
    <!-- Temblor lateral + giro ligero -->
    <animateTransform attributeName='transform'
                      type='rotate'
                      values='0 50 50; 2 50 50; -2 50 50; 2 50 50; -2 50 50; 0 50 50'
                      begin='0.6s'
                      dur='1s'
                      repeatCount='indefinite'/>
    <animateTransform attributeName='transform'
                      type='translate'
                      values='0 0; -1 0; 1 0; -1 0; 1 0; 0 0'
                      begin='0.6s'
                      dur='1s'
                      repeatCount='indefinite'
                      additive='sum'/>
  </g>

  <!-- Flotación continua -->
  <animateTransform attributeName='transform'
                    type='translate'
                    values='0 0; 0 -4; 0 0; 0 4; 0 0'
                    dur='3s'
                    begin='0.6s'
                    repeatCount='indefinite'/>
</svg>")

Engrane 1

¡Copiado!

  
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Círculo principal -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#42A5F5'
          stroke-width='5'
          opacity='0.9'/>

  <!-- Engranaje profesional -->
  <g fill='none' stroke='#42A5F5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'>
    <!-- Dientes del engranaje -->
    <circle cx='50' cy='50' r='25'/>
    <g>
      <line x1='50' y1='25' x2='50' y2='20'/>
      <line x1='65' y1='35' x2='70' y2='30'/>
      <line x1='75' y1='50' x2='80' y2='50'/>
      <line x1='65' y1='65' x2='70' y2='70'/>
      <line x1='50' y1='75' x2='50' y2='80'/>
      <line x1='35' y1='65' x2='30' y2='70'/>
      <line x1='25' y1='50' x2='20' y2='50'/>
      <line x1='35' y1='35' x2='30' y2='30'/>
    </g>
    <!-- Círculo central -->
    <circle cx='50' cy='50' r='10'/>
  </g>

  <!-- Flotación suave -->
  <animateTransform attributeName='transform'
                    type='translate'
                    values='0 0; 0 -4; 0 0; 0 4; 0 0'
                    dur='3s'
                    repeatCount='indefinite'/>
</svg>")

Engrane 2

¡Copiado!

 
    
    "data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Círculo principal -->
  <circle cx='50' cy='50' r='40'
          fill='none'
          stroke='#42A5F5'
          stroke-width='5'
          opacity='0.9'/>

  <!-- Engranaje profesional -->
  <g fill='none' stroke='#42A5F5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'>
    <!-- Dientes del engranaje -->
    <circle cx='50' cy='50' r='25'/>
    <g>
      <line x1='50' y1='25' x2='50' y2='20'/>
      <line x1='65' y1='35' x2='70' y2='30'/>
      <line x1='75' y1='50' x2='80' y2='50'/>
      <line x1='65' y1='65' x2='70' y2='70'/>
      <line x1='50' y1='75' x2='50' y2='80'/>
      <line x1='35' y1='65' x2='30' y2='70'/>
      <line x1='25' y1='50' x2='20' y2='50'/>
      <line x1='35' y1='35' x2='30' y2='30'/>
    </g>
    <!-- Círculo central -->
    <circle cx='50' cy='50' r='10'/>
    
    <!-- Rotación continua -->
    <animateTransform attributeName='transform'
                      type='rotate'
                      from='0 50 50'
                      to='360 50 50'
                      dur='4s'
                      repeatCount='indefinite'/>
  </g>

  <!-- Flotación suave del grupo completo -->
  <animateTransform attributeName='transform'
                    type='translate'
                    values='0 0; 0 -4; 0 0; 0 4; 0 0'
                    dur='3s'
                    repeatCount='indefinite'/>
</svg>")

Indicador hacia la derecha

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='400' height='100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Línea recta -->
  <line x1='20' y1='50' x2='380' y2='50' stroke='black' stroke-width='2' />

  <!-- Triángulo indicador -->
  <polygon id='indicator' points='0,0 20,10 0,20' fill='red'>
    <animateTransform attributeName='transform'
                      type='translate'
                      from='20,40'
                      to='380,40'
                      dur='2s'
                      repeatCount='indefinite'
                      additive='replace'
                      fill='freeze' />
  </polygon>
</svg>")

Indicador hacia la izquierda

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='400' height='100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Línea recta -->
  <line x1='20' y1='50' x2='380' y2='50' stroke='black' stroke-width='2' />

  <polygon id='indicator' points='20,0 0,10 20,20' fill='red'>
    <animateTransform attributeName='transform'
                      type='translate'
                      from='380,40'
                      to='20,40'
                      dur='2s'
                      repeatCount='indefinite' />
  </polygon>
</svg>")

Indicador hacia abajo

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='100' height='400' xmlns='http://www.w3.org/2000/svg'>
  <!-- Línea vertical -->
  <line x1='50' y1='20' x2='50' y2='380' stroke='black' stroke-width='2' />

  <polygon id='indicator' points='0,0 20,0 10,20' fill='red'>
    <animateTransform attributeName='transform'
                      type='translate'
                      from='40,20'
                      to='40,380'
                      dur='2s'
                      repeatCount='indefinite' />
  </polygon>
</svg>")

Indicador hacia arriba

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='100' height='400' xmlns='http://www.w3.org/2000/svg'>
  <!-- Línea vertical -->
  <line x1='50' y1='20' x2='50' y2='380' stroke='black' stroke-width='2' />

  <polygon id='indicator' points='10,0 0,20 20,20' fill='red'>
    <animateTransform attributeName='transform'
                      type='translate'
                      from='40,380'
                      to='40,20'
                      dur='2s'
                      repeatCount='indefinite' />
  </polygon>
</svg>")

Flecha izquierda

¡Copiado!

    

  	"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <!-- Círculo azul de fondo -->
  <circle cx='50' cy='50' r='45' fill='#007BFF' />

  <!-- Flecha hacia la izquierda más grande -->
  <polygon id='arrow' points='65,30 35,50 65,70' fill='white'>
    <animateTransform 
      attributeName='transform'
      type='translate'
      values='0 0; -6 0; 0 0'
      dur='0.8s'
      repeatCount='indefinite'
    />
  </polygon>
</svg>")

...

¡Copiado!

    

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

...

¡Copiado!

    

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

Colección imágenes SVG

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