🎨 SYNTAXIS Logo Animado

Systematic Orchestration, Perfectly Arranged

Colección completa de logos animados para SYNTAXIS. Cada animación está diseñada para comunicar organización sistemática, precisión y orquestación perfecta. Todos los archivos SVG están optimizados para web y son completamente escalables.

✨ Características de las Animaciones

🎯 Propósito Claro

Cada animación está diseñada para un caso de uso específico: carga, hover, introducción, etc.

⚡ Alto Rendimiento

Animaciones CSS optimizadas que no afectan el rendimiento de tu sitio web.

📱 Responsive

Funcionan perfectamente en todos los dispositivos y tamaños de pantalla.

🎨 Personalizables

Fácil de modificar colores, duración y efectos mediante CSS.

🚀 Animaciones de Entrada

Perfectas para presentaciones, páginas de carga o cuando el logo aparece por primera vez.

Ensamblaje Secuencial Popular

Las piezas geométricas aparecen en secuencia, ensamblándose desde los bordes hacia el centro con rotación. El triángulo dorado aparece al final como punto focal.

Mejor para:

Página de inicio / Hero section
Splash screens de aplicaciones
Presentaciones corporativas

Descargar SVG

Construcción Sistemática

Las piezas se deslizan desde todas las direcciones (arriba, abajo, izquierda, derecha) hacia sus posiciones finales, creando un efecto de construcción organizada.

Mejor para:

Videos de producto
Animaciones de intro
Secciones "Cómo funciona"

Descargar SVG

Logo Horizontal Completo Recomendado

El icono se ensambla primero, seguido por el deslizamiento del texto "SYNTAXIS" y finalmente aparece el tagline. Secuencia completa de branding.

Mejor para:

Headers de sitio web
Intro de videos corporativos
Presentaciones de marca

Descargar SVG

♾️ Animaciones Continuas

Loops sutiles perfectos para elementos de UI que necesitan indicar actividad o vida.

Pulso Focal

El triángulo central pulsa suavemente con un efecto de brillo, atrayendo la atención hacia el núcleo del sistema sin ser intrusivo.

Mejor para:

Indicadores de estado activo
Call-to-action buttons
Dashboard headers

Descargar SVG

Loading Spinner Funcional

Los diamantes orbitan alrededor del triángulo central mientras los cuadrados rotan, creando un indicador de carga elegante y distintivo.

Mejor para:

Spinners de carga
Procesamiento de tareas
Estados "thinking"

Descargar SVG

Respiración Ambiental

Animación muy sutil de "respiración" donde las capas del logo se expanden y contraen suavemente, creando un efecto orgánico y vivo.

Mejor para:

Elementos decorativos
Headers de sección
Fondos animados sutiles

Descargar SVG

🖱️ Animaciones Interactivas

Responden a la interacción del usuario, perfectas para elementos clickeables o navegación.

Efectos Hover Interactivo

Al pasar el mouse, cada forma geométrica crece y cambia ligeramente de color. El triángulo tiene un efecto especial con sombra brillante.

Mejor para:

Logos en navbar clickeables
Botones de acción
Links de navegación

Descargar SVG

🎬 Guía de Implementación

Ejemplos de código para integrar las animaciones en tu proyecto.

Implementación HTML Simple

<!-- Animación de entrada -->
<img src="syntaxis-logo-icon-animated.svg" 
     alt="SYNTAXIS" 
     width="200">

<!-- Logo con hover -->
<a href="/">
  <img src="syntaxis-logo-icon-hover.svg">
</a>

<!-- Loading spinner -->
<div class="loading">
  <img src="syntaxis-logo-loading.svg">
</div>

React Component

import Logo from './syntaxis-logo-icon-animated.svg';

function Header() {
  return (
    <header>
      <img 
        src={Logo} 
        alt="SYNTAXIS"
        className="logo"
      />
    </header>
  );
}

CSS Personalización

/* Ajustar velocidad de animación */
.logo svg {
  animation-duration: 2s !important; /* Más lento */
}

/* Pausar animación en hover */
.logo:hover svg * {
  animation-play-state: paused;
}

/* Cambiar colores */
.logo svg path[fill="#2C5F8E"] {
  fill: #yourCustomColor;
}

📦 Descargar Todos los Archivos

Descarga la colección completa de logos animados y estáticos

Ensamblaje Secuencial Construcción Sistemática Pulso Focal Loading Spinner Respiración Ambiental Efectos Hover Logo Horizontal

syntaxis.dev | Systematic Orchestration, Perfectly Arranged
Todos los logos © 2024 SYNTAXIS | Archivos SVG optimizados para producción