Animated SVG Turbulence Filter

Developer
Gabi
Size
2,330 Kb
Views
48,576
  1. Animated SVG Turbulence Filter Previews
  2. Animated SVG Turbulence Filter HTML Codes
  3. Animated SVG Turbulence Filter CSS Codes
  4. Animated SVG Turbulence Filter JS Codes

How do I make an animated svg turbulence filter?

Inspired by #Codevember 08 - Animated SVG Turbulence Filter A PEN BY Sean Free. What is a animated svg turbulence filter? How do you make a animated svg turbulence filter? This script and codes were developed by Gabi on 22 August 2022, Monday.

Animated SVG Turbulence Filter Previews
IQ Test

Animated SVG Turbulence Filter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated SVG Turbulence Filter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <svg width="400" height="500" viewBox="0 0 600 750"> <filter id="displacementFilter"> <feTurbulence type="turbulence" baseFrequency="0.01 .1" numOctaves="1" result="turbulence" seed="53"/> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="B"/> </filter>
<image id="blueMoon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/moon.jpg" width="600" height="400"></image> <use xlink:href ="#blueMoon" x="-10" transform="translate(0, 800) scale(1 -1) " filter="url(#displacementFilter)"/>
</svg> <div> <script src="js/index.js"></script>
</body>
</html>

Animated SVG Turbulence Filter - Script Codes CSS Codes

body { background: linear-gradient(-35deg, #2aa4d5, #030633); min-height: 100vh;
}
div { width: 370px; height: 500px; overflow: hidden; box-shadow: 0 0 150px #031f40; margin: 1em auto; margin: calc(50vh - 250px) auto;
}
svg { background: #031f40; position: relative; left: -20px;
}

Animated SVG Turbulence Filter - Script Codes JS Codes

var img = document.querySelector("#displacementFilter feTurbulence");
var frames = 0;
var rad = Math.PI / 180;
function AnimateBaseFrequency() { //baseFrequency="0.01 .1" bfx = 0.01; bfy = .1; frames += .25 bfx += 0.001 * Math.cos(frames * rad); bfy += 0.005 * Math.sin(frames * rad); bf = bfx.toString() + ' ' + bfy.toString(); img.setAttributeNS(null, 'baseFrequency', bf); window.requestAnimationFrame(AnimateBaseFrequency);
}
window.requestAnimationFrame(AnimateBaseFrequency);
Animated SVG Turbulence Filter - Script Codes
Animated SVG Turbulence Filter - Script Codes
Home Page Home
Developer Gabi
Username enxaneta
Uploaded August 22, 2022
Rating 4.5
Size 2,330 Kb
Views 48,576
Do you need developer help for Animated SVG Turbulence Filter?

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!

Gabi (enxaneta) Script Codes
Name
Sphere Within Sphere
Fat worm
Holy Cow Mandala
Rift
Circle-Circle Intersection
CSS Filters
Wave
SVG gauge
Broken English
Cube
Create amazing sales emails 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!