60fps animated SVG waves hero

Developer
Nick Nikolov
Size
3,268 Kb
Views
6,072
  1. 60fps animated SVG waves hero Previews
  2. 60fps animated SVG waves hero HTML Codes
  3. 60fps animated SVG waves hero CSS Codes

How do I make an 60fps animated svg waves hero?

A quick example of wave animation. Uses transform to guarantee performance.. What is a 60fps animated svg waves hero? How do you make a 60fps animated svg waves hero? This script and codes were developed by Nick Nikolov on 07 January 2023, Saturday.

60fps animated SVG waves hero Previews
IQ Test

60fps animated SVG waves hero - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>60fps animated SVG waves hero</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { margin: 0; padding: 0;
}
section { padding: 10vh 0;
}
.hero-waves { background: tomato; color: white;
}
.hero-waves .hero-title { padding: 15vh 0 5vh 0;
}
.hero-waves svg { display: block; height: 20vh; width: 100%;
}
.hero-waves svg .layer1 { animation: movewave 23s infinite alternate ease-in-out;
}
.hero-waves svg .layer2 { animation: movewave 19s infinite alternate-reverse ease-in-out;
}
.hero-waves svg .layer3 { animation: movewave 17s infinite alternate ease-in-out;
}
.hero-waves svg .layer4 { animation: movewave 13s infinite alternate-reverse ease-in-out;
}
.hero-waves svg .layer5 { animation: movewave 11s infinite alternate ease-in-out;
}
@keyframes movewave { from { transform: translate(30%, 0); } to { transform: translate(-30%, 0); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="hero hero-waves"> <div class="hero-title text-center"> <h1>Waves</h1> </div> <svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30" version="1.1" preserveAspectRatio="none" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">	<path id="path6" d="m-100 1.041s61.625-4.5064 99.75 5.2333 70.594 15.391 124.5 16.312c55.25 0.9437 75.75-8.8513 75.75-8.8513v16.266h-300v-28.959z" style="fill:#fff;fill-opacity:.2" class="layer5"/>	<path id="path8" d="m-100 30h300v-6.6791s-16.526 2.7112-62.25 2.3702c-58.5-0.436-97.875-12.245-153.75-15.599-55.875-3.3549-84-0.2745-84-0.2745v20.182z" style="fill:#fff;fill-opacity:.2" class="layer4"/>	<path id="path10" d="m200 16.232s-24.625-5.6378-84.5-3.7495c-59.875 1.8882-74.962 15.943-144 16.562-50.75 0.455-71.5-3.7697-71.5-3.7697v4.7252h300v-13.768z" style="fill:#fff;fill-opacity:.2" class="layer3"/>	<path id="path12" d="m200 1.041s-61.625-4.5064-99.75 5.2333-70.594 15.391-124.5 16.311c-55.25 0.9437-75.75-8.8513-75.75-8.8513v16.266h300v-28.959z" style="fill:#fff;fill-opacity:.2" class="layer2"/>	<path id="path14" d="m-100 17.511s29.006-2.6495 75-0.6876c60.25 2.5701 81.25 11.545 150.25 11.912 55.721 0.2965 74.75-5.6414 74.75-5.6414v6.906h-300v-12.489z" style="fill:#fff" class="layer1"/>
</svg>
</div>
<section>
<div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</section>
</body>
</html>

60fps animated SVG waves hero - Script Codes CSS Codes

html { margin: 0; padding: 0;
}
section { padding: 10vh 0;
}
.hero-waves { background: tomato; color: white;
}
.hero-waves .hero-title { padding: 15vh 0 5vh 0;
}
.hero-waves svg { display: block; height: 20vh; width: 100%;
}
.hero-waves svg .layer1 { animation: movewave 23s infinite alternate ease-in-out;
}
.hero-waves svg .layer2 { animation: movewave 19s infinite alternate-reverse ease-in-out;
}
.hero-waves svg .layer3 { animation: movewave 17s infinite alternate ease-in-out;
}
.hero-waves svg .layer4 { animation: movewave 13s infinite alternate-reverse ease-in-out;
}
.hero-waves svg .layer5 { animation: movewave 11s infinite alternate ease-in-out;
}
@keyframes movewave { from { transform: translate(30%, 0); } to { transform: translate(-30%, 0); }
}
60fps animated SVG waves hero - Script Codes
60fps animated SVG waves hero - Script Codes
Home Page Home
Developer Nick Nikolov
Username necks
Uploaded January 07, 2023
Rating 3
Size 3,268 Kb
Views 6,072
Do you need developer help for 60fps animated SVG waves hero?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Nikolov (necks) Script Codes
Name
CSS Animated Weather icons
Progress bars with colour change.
Simple grid layout
Subtle site navigation with description
Moblie friendly top navbar
Simple fluid navigation with 4 hover effects
A Pen by Nick Nikolov
Page header bar toggle on scroll
Heart Rating
Range bar with indicator
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!