Comment créer un effet vague en CSS et SVG ?

Réponses rédigées par Antoine
Dernière mise à jour : 2020-11-20 14:48:17
Thèmes : webmaster - html - css - svg
Question

Bonjour, je cherche à créer un haut de page HTML avec un effet vague, merci de votre aide.

Réponse

Vous pouvez utiliser CSS pour positionner l'effet vague, et SVG pour la "dessiner" et définir sa forme.

C'est l'attribut d= qui permet de spécifier la forme de la vague. Vous trouverez d'avantage d'explication sur les valeurs utilisées ainsi que sur la signification des lettres, via cette page du site de Mozilla.

Voici un exemple pour créer un effet vague avec CSS et SVG :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Comment créer un effet vague en CSS et SVG ?</title>
<style>
svg { 
display: inline-block; 
position: absolute; 
top: 0; 
left: 0; 
z-index: -1; 
} 
.vague { 
display: inline-block; 
position: absolute; 
width: 100%; 
top: 0; 
left: 0; 
} 
</style>
</head>
<body>
<h1>1FORMATIK.com</h1> 
<div class="vague"> 
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">  
<path d="M0, 100 C120, 100 150, 0 500, 100 L500, 00 L0, 0 Z" style="stroke:none; fill:grey;"></path> 
</svg> 
</div> 
</body>
</html>