Geometric Shapes
Fond animé de formes géométriques pures — triangles, hexagones, carrés et cercles CSS flottent et tournent, distribués aléatoirement par JS.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au chargement, un IIFE JS crée 15 <div> et les injecte dans le conteneur #geometricBg. Il puise dans un tableau de 4 types : geo-triangle, geo-hexagon, geo-square, geo-circle. Chaque div reçoit des styles inline aléatoires : position (left 0–90 %, top 0–80 %), animation-delay 0–15 s, animation-duration 10–20 s et transform: scale() entre 0,5 et 1,5. Ces valeurs inline surchargent les valeurs de la classe CSS, d'où la variété de rythmes à l'écran. Après init, le JS s'arrête — aucune boucle RAF, zéro coût CPU continu.
L'animation est entièrement pilotée par @keyframes geoFloat en CSS pur. La séquence en 4 étapes combine translateY (0 → −30 px → −15 px → −40 px), une rotation cumulative (0° → 90° → 180° → 270°) et une légère respiration d'opacité (0,6 → 0,8 → 0,5 → 0,7). Comme chaque forme possède sa propre animation-duration (inline), elles déphasent naturellement — aucune n'est synchrone avec ses voisines.
Les 4 formes sont 100 % CSS, sans SVG ni canvas. Le triangle exploite le trick des bordures transparentes : largeur et hauteur nulles, border-left/right: 25 px solid transparent, border-bottom: 43 px solid #6366f1. L'hexagone est un rectangle de 40 × 23 px avec deux demi-hexagones en ::before / ::after (bordures 20 px de chaque côté + capuchons de 11 px). Le carré est un div 30 × 30 px pivoté à 45° dans la règle CSS de base, ce qui lui donne la forme d'un losange — la rotation supplémentaire de l'animation le ramène ensuite à l'horizontale. Le cercle est un div 35 × 35 px en border-radius: 50 %, fond transparent, avec uniquement une bordure colorée.
Accessibilité
- prefers-reduced-motion absent : le code ne contient ni
@media (prefers-reduced-motion)ni vérification JS — les formes s'animent en toutes circonstances. Ajout recommandé en CSS :@media (prefers-reduced-motion: reduce) { .geo-shape { animation: none; } }. - Aucun attribut
aria-*dans le HTML de base. Si ce fond accompagne du contenu, enveloppez-le dans undivavecaria-hidden="true"pour le masquer des lecteurs d'écran. - Les formes sont purement décoratives — aucun texte ne leur est associé, donc aucune contrainte de contraste WCAG ne s'applique directement à leur couleur.
- Zéro interaction souris ou clavier : pas de focus, pas d'événement, pas de piège tabulation. L'effet ne perturbe pas la navigation clavier de la page hôte.
- Le
.bg-label« Geometric » présent dans le HTML de démo est décoratif ; retirez-le ou marquez-learia-hidden="true"en production.
Compatibilité navigateur
Nécessite les animations CSS et transform — supportés universellement depuis 2015. Le JS d'init est ES5 compatible.
Sans JS, le conteneur <code>#geometricBg</code> reste vide mais sans erreur — le fond sombre s'affiche, le contenu overlay reste lisible. Sans animations CSS, les formes apparaissent figées à leur position initiale.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-geometric" id="geometricBg">
<!-- Les .geo-shape sont injectées par le script -->
<!-- Optionnel : contenu superposé -->
<div class="geo-overlay">
<h2>Votre message</h2>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| i < 15 (JS) | 15 | Nombre de formes injectées. Réduire à 6–8 pour un fond épuré, monter à 25–30 pour une densité maximale. |
| .geo-shape { opacity } (CSS) | 0.6 | Opacité globale de toutes les formes. 0,3 = très discret, 0,85 = formes bien présentes. |
| .geo-triangle border-bottom (CSS) | #6366f1 | Couleur des triangles (indigo). Changer dans border-bottom: 43px solid #6366f1. |
| .geo-hexagon background (CSS) | #d946ef | Couleur des hexagones (fuchsia). Remplacer #d946ef à 3 endroits : règle principale, ::before et ::after. |
| .geo-square background (CSS) | #06b6d4 | Couleur des carrés/losanges (cyan). Une seule ligne à modifier. |
| .geo-circle border (CSS) | #8b5cf6 | Couleur de la bordure des cercles (violet). Les cercles ont un fond transparent — seule la bordure est colorée. |
| @keyframes geoFloat translateY (CSS) | −30 px / −15 px / −40 px | Amplitude verticale du flottement. Augmenter (ex. −60 px) pour plus de mouvement, réduire (ex. −10 px) pour un effet subtil. |
| (10 + Math.random() * 10) (JS) | 10–20 s | Plage de durées d'animation. Ex. (6 + Math.random() * 6) pour 6–12 s (animation plus vive). |
FAQ
Math.random() pour la position, le délai, la durée et l'échelle — la composition change à chaque chargement. C'est intentionnel : aucun motif fixe, l'animation paraît organique. Pour un résultat reproductible, hardcodez les styles inline des formes comme dans le HTML de démo du code.id="geometricBg". Pour plusieurs instances, extrayez la logique dans une fonction initGeoShapes(containerId, count) et appelez-la avec des ids distincts. Les classes CSS (préfixe geo-) s'appliquent à toutes les instances sans conflit.transform et opacity sont accélérés par le GPU via le compositing layer du navigateur — ils ne déclenchent ni layout ni paint. Avec 15 divs CSS légers (pas d'image, pas de canvas), l'impact est négligeable même sur mobile d'entrée de gamme.
