Create wave Animation using SVG and CSS

This tutorial blog to learn how to create Wave Animation using SVG and CSS.

Video tutorial of Create wave Animation using SVG and CSS

This tutorial video to learn how to create Wave Animation using SVG and CSS.

Create wave Animation using SVG and CSS [Source Codes]

This source code can help you to create Create wave Animation using SVG and CSS.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<svg viewBox="0 0 1320 500">
	<path fill-opacity="0.7" d="
	M0,192
	C220,100,440,100,660,192
	C880,290,1100,290,1320,192
	L1320 500
	L0 500
	" fill="#000"/>
	<path fill-opacity="0.7" d="
	M0,192
	C220,100,440,100,660,192
	C880,290,1100,290,1320,192
	L1320 500
	L0 500
	" fill="#fff"/>
	<path fill-opacity="0.7" d="
	M0,192
	C220,100,440,100,660,192
	C880,290,1100,290,1320,192
	L1320 500
	L0 500
	" fill="#ee5253"/>
	<path fill-opacity="0.7" d="
	M0,192
	C220,100,440,100,660,192
	C880,290,1100,290,1320,192
	L1320 500
	L0 500
	" fill="#00d2d3"/>
</svg>




</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #054d77;
}

svg path{
	animation:pathAnim 7s; 
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
svg path:nth-child(2){
	animation-delay: 1s
}
svg path:nth-child(3){
	animation-delay: 3s
}
svg path:nth-child(4){
	animation-play-state: paused;
}

@keyframes pathAnim{
	0%{
		d: path("M0,192	C220,100,440,100,660,192 C880,290,1100,290,1320,192	L1320 500 L0 500");
	}
	25%{
		d: path("M0,100	C220,100,440,292,660,292 C880,292,1100,100,1320,100	L1320 500 L0 500");
	}
	50%{
		d: path("M0,192	C220,290,440,290,660,192 C880,100,1100,100,1320,192	L1320 500 L0 500");
	}
	75%{
		d: path("M0,292	C220,292,440,100,660,100 C880,100,1100,292,1320,292	L1320 500 L0 500");
	}
	100%{
		d: path("M0,192	C220,100,440,100,660,192 C880,290,1100,290,1320,192	L1320 500 L0 500");
	}

}

Create wave Animation using SVG and CSS

Video tutorial of Create wave Animation using SVG and CSS

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Text Animation Effect using HTML and CSS