syntaxis/assets/logos/animated/syntaxis-logo-icon-ambient.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <!-- SYNTAXIS Icon - Ambient Breathing Animation (Fixed) -->
  <defs>
    <style>
      @keyframes breathe-outer {
        0%, 100% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.03);
          opacity: 0.9;
        }
      }
      
      @keyframes breathe-mid {
        0%, 100% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.04);
          opacity: 0.88;
        }
      }
      
      @keyframes breathe-inner {
        0%, 100% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.05);
          opacity: 0.85;
        }
      }
      
      @keyframes float {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-3px);
        }
      }
      
      .outer-layer {
        animation: breathe-outer 4s ease-in-out infinite;
        transform-origin: center;
        transform-box: fill-box;
      }
      
      .mid-layer {
        animation: breathe-mid 4s ease-in-out infinite;
        animation-delay: 0.2s;
        transform-origin: center;
        transform-box: fill-box;
      }
      
      .inner-layer {
        animation: breathe-inner 4s ease-in-out infinite;
        animation-delay: 0.4s;
        transform-origin: center;
        transform-box: fill-box;
      }
      
      .center-float {
        animation: float 6s ease-in-out infinite;
        transform-origin: center;
        transform-box: fill-box;
      }
    </style>
  </defs>
  
  <!-- Outer layer -->
  <g class="outer-layer">
    <!-- Top diamond -->
    <path d="M 100 20 L 110 30 L 100 40 L 90 30 Z" fill="#2C5F8E"/>
    <!-- Bottom diamond -->
    <path d="M 100 140 L 110 150 L 100 160 L 90 150 Z" fill="#2C5F8E"/>
  </g>
  
  <!-- Mid layer -->
  <g class="mid-layer">
    <!-- Second row -->
    <path d="M 70 50 L 80 60 L 70 70 L 60 60 Z" fill="#2C5F8E"/>
    <rect x="90" y="50" width="20" height="20" fill="#6B7280"/>
    <path d="M 130 50 L 140 60 L 130 70 L 120 60 Z" fill="#2C5F8E"/>
    
    <!-- Fourth row -->
    <path d="M 70 110 L 80 120 L 70 130 L 60 120 Z" fill="#2C5F8E"/>
    <rect x="90" y="110" width="20" height="20" fill="#6B7280"/>
    <path d="M 130 110 L 140 120 L 130 130 L 120 120 Z" fill="#2C5F8E"/>
  </g>
  
  <!-- Inner layer -->
  <g class="inner-layer">
    <!-- Third row (outer) -->
    <path d="M 40 80 L 50 90 L 40 100 L 30 90 Z" fill="#2C5F8E"/>
    <rect x="60" y="80" width="20" height="20" fill="#6B7280"/>
    <rect x="120" y="80" width="20" height="20" fill="#6B7280"/>
    <path d="M 160 80 L 170 90 L 160 100 L 150 90 Z" fill="#2C5F8E"/>
  </g>
  
  <!-- Center triangle with float -->
  <g class="center-float">
    <path d="M 100 80 L 115 105 L 85 105 Z" fill="#D97706"/>
  </g>
</svg>