TelemetryOS Logo - SVG + CSS Demo

Basic Usage - Animated SVG (Simplest)

Use the self-contained animated SVG with inline styles (no CSS file needed):

<!-- Simple: Just use the animated SVG -->
<img src="telemetryos-logo-animated.svg" alt="TelemetryOS" style="width: 200px;" />

<!-- Or with object tag for better control -->
<object data="telemetryos-logo-animated.svg" type="image/svg+xml" style="width: 200px;"></object>

Animated SVG (200px)

telemetryos-logo-animated.svg

          
<svg viewBox="0 0 295 291.62" xmlns="http://www.w3.org/2000/svg">
<style>
  /* Animate the logo elements */
  .logo-part {
    transform-origin: center;
  }

  /* Main T vertical stroke - pulses and scales */
  .main-t {
    animation: mainTPulse 2s ease-in-out infinite;
    animation-delay: 0s;
  }

  /* Top left dot - bounces and scales */
  .dot-top {
    animation: dotBounce 2s ease-in-out infinite;
    animation-delay: 0.25s;
  }

  /* Bottom left dot - bounces and scales */
  .dot-bottom {
    animation: dotBounce 2s ease-in-out infinite;
    animation-delay: 0.5s;
  }

  /* Main T pulse animation */
  @keyframes mainTPulse {
    0%, 100% {
      transform: scale(1);
      opacity: 0.75;
    }
    15% {
      transform: scale(1.15);
      opacity: 1;
    }
    30% {
      transform: scale(0.95);
      opacity: 0.85;
    }
    45% {
      transform: scale(1);
      opacity: 0.75;
    }
  }

  /* Dot bounce animation */
  @keyframes dotBounce {
    0%, 100% {
      transform: scale(1) translateY(0);
      opacity: 0.7;
    }
    15% {
      transform: scale(1.25) translateY(-8px);
      opacity: 1;
    }
    30% {
      transform: scale(0.9) translateY(3px);
      opacity: 0.8;
    }
    45% {
      transform: scale(1) translateY(0);
      opacity: 0.7;
    }
  }
</style>

<!-- Main T vertical stroke with top bar -->
<path
  class="logo-part main-t"
  d="M245.1,107.09l6.77-25.27c1.05-3.92-1.9-7.77-5.96-7.77H112.48c-4.19,0-7.86,2.82-8.95,6.86l-6.77,25.27c-1.05,3.92,1.9,7.77,5.96,7.77h37.54c4.06,0,7.01,3.85,5.96,7.77l-23.6,88.07c-1.05,3.92,1.9,7.77,5.96,7.77h26.16c4.19,0,7.86-2.82,8.95-6.86l24.09-89.89c1.08-4.05,4.75-6.86,8.95-6.86h39.42c4.19,0,7.86-2.82,8.95-6.86Z"
  fill="#f7b434"
/>

<!-- Top left dot -->
<path
  class="logo-part dot-top"
  d="M84.19,107.09l6.77-25.27c1.05-3.92-1.9-7.77-5.96-7.77h-26.16c-4.19,0-7.86,2.82-8.95,6.86l-6.77,25.27c-1.05,3.92,1.9,7.77,5.96,7.77h26.16c4.19,0,7.86-2.82,8.95-6.86Z"
  fill="#f7b434"
/>

<!-- Bottom left dot -->
<path
  class="logo-part dot-bottom"
  d="M124.75,125.86h-26.16c-4.19,0-7.86,2.82-8.95,6.86l-6.77,25.27c-1.05,3.92,1.9,7.77,5.96,7.77h26.16c4.19,0,7.86-2.82,8.95-6.86l6.77-25.27c1.05-3.92-1.9-7.77-5.96-7.77Z"
  fill="#f7b434"
/>
</svg>

        

Advanced Usage - SVG + External CSS

For more control over animation speed and sizes, use the base SVG with external CSS:

<link rel="stylesheet" href="telemetryos-logo.css">
<!-- Must use inline SVG or object tag for external CSS to work -->
<div class="telemetry-logo-lg">
  <!-- Paste SVG code here -->
</div>

Size Variants - Responsive Scaling

The animated SVG scales perfectly at any size using inline styles:

Small (64px)

Medium (128px)

Large (200px)

Extra Large (300px)

Animation Speed & Advanced Control

The animated SVG has a fixed 2-second animation. For variable speeds or glow effects, you can:

Edit the @keyframes duration in the SVG file itself
Use the React component with animationDuration prop
Inline the SVG in HTML and apply external CSS classes

Standard Animation (2s)

Inline Usage Example

Loading your data

Processing request...

Custom Size with Inline Styles

The animated SVG scales perfectly to any size:

<img src="telemetryos-logo-animated.svg" alt="TelemetryOS" style="width: 150px;" />

Custom 80px

Custom 150px

Custom 250px

Files Needed

telemetryos-logo.svg - The logo graphic
telemetryos-logo.css - Animation styles

Quick Start

<!-- In your HTML head -->
<link rel="stylesheet" href="telemetryos-logo.css">

<!-- In your HTML body -->
<object data="telemetryos-logo.svg" type="image/svg+xml" class="telemetry-logo-lg"></object>

<!-- With glow effect -->
<div class="telemetry-logo-container">
  <object data="telemetryos-logo.svg" type="image/svg+xml" class="telemetry-logo-lg"></object>
</div>