Logo Sirdata

Utiliser les fichiers officiels sans modifier leurs proportions, leurs couleurs ou leur composition.

Brand

Sirdata

Asset: logo
Layout: horizontal
Colorway: fullColor
Background: onLight

Télécharger SVG

Brand

Sirdata

Asset: logo
Layout: horizontal
Colorway: fullColor
Background: onDark

Télécharger SVG

Animated

Brand

Sirdata

Asset: logo
Layout: horizontal
Colorway: animated
Background: onLight

Télécharger SVG CSS JavaScript

Brand

Sirdata

Asset: symbol
Layout: symbol
Colorway: fullColor
Background: onLight

Télécharger SVG

Brand

Sirdata

Asset: symbol
Layout: symbol
Colorway: fullColor
Background: onDark

Télécharger SVG

Installer le logo animé

La version animée utilise un SVG inline, une feuille de styles, un module JavaScript et GSAP. Un simple élément <img> affiche uniquement la version statique.

1. Télécharger les fichiers

2. Installer GSAP

npm install gsap

3. Intégrer dans Astro

Placer les trois fichiers dans le code source de l’application afin que Vite puisse résoudre l’import gsap.

---
import svgMarkup from '../assets/sirdata-animated-logo.svg?raw';
import '../assets/sirdata-animated-logo.css';
---

<div
  class="sirdata-animated-logo"
  data-sirdata-animated-logo
  tabindex="0"
  set:html={svgMarkup}
></div>

<script>
  import { initAllSirdataAnimatedLogos } from '../assets/sirdata-animated-logo.js';
  initAllSirdataAnimatedLogos();
</script>

Comportement

L’animation démarre au survol ou au focus clavier.
Elle revient à son état initial à la sortie.
prefers-reduced-motion désactive automatiquement le mouvement.
--sirdata-logo-width et --sirdata-logo-color permettent d’adapter taille et couleur.