SVG sine wave

Developer
Gregor Adams
Size
2,988 Kb
Views
62,744
  1. SVG sine wave Previews
  2. SVG sine wave HTML Codes
  3. SVG sine wave CSS Codes
  4. SVG sine wave JS Codes

How do I make an svg sine wave?

Animating points of a polygon with sine wave movement. What is a svg sine wave? How do you make a svg sine wave? This script and codes were developed by Gregor Adams on 25 October 2022, Tuesday.

SVG sine wave Previews
IQ Test

SVG sine wave - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG sine wave</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg height="200" width="400"> <polygon/>
</svg> <script src="js/index.js"></script>
</body>
</html>

SVG sine wave - Script Codes CSS Codes

svg { display: inline-block; stroke-width: 4; fill: none; padding: 10px;
}
body { background: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0;
}

SVG sine wave - Script Codes JS Codes

'use strict';
function move(amplitude, frequency, length, i) { var points = [0, amplitude * 2]; var width = length; var x = 0, y; while (x++ <= width) { y = Math.sin(x * frequency + i); points.push([x, y * amplitude / 2 + amplitude / 2].join(' ')); } points.push([length, amplitude * 2].join(' ')); points.push([0, amplitude * 2].join(' ')); return points;
}
var svg = document.querySelector('svg');
var polygon = svg.querySelector('polygon');
var counter = 0;
var width = svg.getAttribute('width');
var height = svg.getAttribute('height') / 2;
function draw() { var c = ++counter / 20; polygon.setAttribute('points', move(height, .01, width, c)); svg.setAttribute('stroke', 'hsl(' + c * 10 + ',100%,50%)'); requestAnimationFrame(draw);
}
draw();
SVG sine wave - Script Codes
SVG sine wave - Script Codes
Home Page Home
Developer Gregor Adams
Username pixelass
Uploaded October 25, 2022
Rating 4
Size 2,988 Kb
Views 62,744
Do you need developer help for SVG sine wave?

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!

Gregor Adams (pixelass) Script Codes
Name
Diagonal scroll
Text stroke helpers for SCSS
Fractal curve generator
Google dots animation
Flat webpage concept
Material button pure CSS
Netfix logo animation CSS
Pure CSS marching ants border
3D Particle Heart
RubiCSS cube
Create amazing Facebook ads 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!