Animations/Grid Pattern Background

Grid Pattern Background

Grille SVG repeatable avec effet de profondeur. Certaines cellules highlights.

autoSVGbackgroundpatterndecoration

Trigger: Statique (decoration)

CSS requis: Non

Difficulte: easy

Preview live

Code

<svg width="100%" height="100%">
  <defs>
    <pattern id="grid" width={40} height={40} patternUnits="userSpaceOnUse">
      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth={1} />
    </pattern>
  </defs>

  <rect width="100%" height="100%" fill="url(#grid)" />

  {/* Cellules highlights (optionnel) */}
  <rect x={120} y={80} width={40} height={40} fill="rgba(225,255,108,0.08)" />

  {/* Masque radial pour fade aux bords */}
  <radialGradient id="fade">
    <stop offset="0%" stopColor="white" />
    <stop offset="100%" stopColor="black" />
  </radialGradient>
  <mask id="radial-mask">
    <rect width="100%" height="100%" fill="url(#fade)" />
  </mask>
</svg>

Instructions

Pattern SVG repeatable. Ajustez la taille des cellules (40x40), la couleur/epaisseur des lignes. Le masque radial cree un fade aux bords. Position absolute derriere le contenu.