readme.svg

<svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>
				@import url(//fonts.googleapis.com/css?family=Lato:300:400);
				body {
				  
				}
				h1 {
				  font-family: 'Lato', sans-serif;
				  font-weight:300;
				  font-size:48px;
				}
				p {
				  font-family: 'Lato', sans-serif;
				  letter-spacing: 1px;
				  font-size:14px;
				  color: #333333;
				}
				text {
				  font-family: 'Lato', sans-serif;
				  letter-spacing: 1px;
				  font-size:64px;
				  color: #fff;
				  vertical-align: -32px;
				}
				.header {
				  position:relative;
				  text-align:center;
				  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
				  color:white;
				}
				.logo {
				  width:30px;
				  display:inline-block;
				  vertical-align: middle;
				  padding-top: 85px;
				}
				.inner-header {
				  height:65vh;
				  width:100%;
				  margin: 0;
				  padding: 0;
				}
				.flex { /*Flexbox for containers*/
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  text-align: center;
				}
				.waves {
				  position:relative;
				  width: 100%;
				  height:15vh;
				  margin-bottom:-7px; /*Fix for safari gap*/
				  min-height:100px;
				  max-height:150px;
				}
				.content {
				  position:relative;
				  height:20vh;
				  text-align:center;
				  background-color: white;
				}
				/* Animation */
				.parallax > use {
				  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
				}
				.parallax > use:nth-child(1) {
				  animation-delay: -2s;
				  animation-duration: 7s;
				}
				.parallax > use:nth-child(2) {
				  animation-delay: -3s;
				  animation-duration: 10s;
				}
				.parallax > use:nth-child(3) {
				  animation-delay: -4s;
				  animation-duration: 13s;
				}
				.parallax > use:nth-child(4) {
				  animation-delay: -5s;
				  animation-duration: 20s;
				}
				@keyframes move-forever {
				  0% {
				   transform: translate3d(-90px,0,0);
				  }
				  100% { 
				    transform: translate3d(85px,0,0);
				  }
				}
				/*Shrinking for mobile*/
				@media (max-width: 768px) {
				  .waves {
				    height:30%;
				    min-height:30%;
				  }
				  .content {
				    height:30vh;
				  }
				  h1 {
				    font-size:24px;
				  }
				}
				.lds-dual-ring {
				  display: inline-block;
				  width: 64px;
				  height: 126px;
				}
				.lds-dual-ring:after {
				  content: " ";
				  display: block;
				  width: 40px;
				  height: 40px;
				  margin: 8px;
				  border-radius: 50%;
				  border: 6px solid #fff;
				  border-color: #fff transparent #fff transparent;
				  animation: lds-dual-ring 1.2s linear infinite;
				}
				@keyframes lds-dual-ring {
				  0% {
				    transform: rotate(0deg);
				  }
				  100% {
				    transform: rotate(360deg);
				  }
				}
			</style>
			<!--Hey! This is the original version of Simple CSS Waves made by: add attribution later-->

			<div class="header">

			<!--Content before waves-->
			<div class="" title="5" style="padding-top:9px">

				<text>NE</text><div class="lds-dual-ring logo"></div><text>SCOTCH</text>
			</div>

			<!--Waves Container-->
			<div>
			<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
			<defs>
			<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
			</defs>
			<g class="parallax">
			<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
			<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
			<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
			<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
			</g>
			</svg>
			</div>
			<!--Waves end-->

			</div>
			<!--Header ends-->

			<!--Content starts-->
			<div class="content flex">
				<p>
					<h1></h1>
				</p>
			</div>
			<!--Content ends-->
		</div>	
	</foreignObject>
</svg>