SVG Noise

Developer
Chris Wright
Size
2,930 Kb
Views
60,720
  1. SVG Noise Previews
  2. SVG Noise HTML Codes
  3. SVG Noise CSS Codes
  4. SVG Noise JS Codes

How do I make an svg noise?

Testing applying noise to SVG. This is a method for applying noise to an entire complex shape object.. What is a svg noise? How do you make a svg noise? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

SVG Noise Previews
IQ Test

SVG Noise - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Noise</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <svg class="icon-svg icon-svg--bolt" viewBox="0 0 24 24" width="96" height="96" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="the-object"> <path fill="currentColor" d="M 12 3 v 7 h 6 l -6 11 v -7 h -6 l 6 -11"> </path> </clipPath> <filter id="noise"> <feTurbulence type="fractalNoise" baseFrequency="30" result="noisy" /> <feColorMatrix type="saturate" values="0"/> <feBlend in="SourceGraphic" in2="noisy" mode="multiply" /> </filter> </defs> <g> <path filter="url(#noise)" clip-path="url(#the-object)" fill="currentColor" d="M 12 3 v 7 h 6 l -6 11 v -7 h -6 l 6 -11"> </path> </g> </svg>
</div> <script src="js/index.js"></script>
</body>
</html>

SVG Noise - Script Codes CSS Codes

.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 100vh;
}
.icon-svg { width: 384px; height: 384px; display: block;
}
.icon-svg--bolt { color: #5ecf86;
}

SVG Noise - Script Codes JS Codes

//How you apply Noise to an SVG shape
//This is how to apply it to the entire shape.
//Next test will be how you can apply it to only part of the shape.
//How this works:
//1) feTurbulence is what gives you some fractal turbulence, which is sorta cloudy/noisy. Setting the base frequency higher increases the noise.
//2) We use colorMatrix to essentially desaturate the image
//3) Finally you blend it all in together and switch the mode to overlay (so you see it over the top of your object). You can add this noise in any way you might have if you were using Photoshop - Overlay/Screen/Multiply etc.
//4) Then we need to define a clip path in the defs. To do this I just copied my shape into clipPath, and then applied it to my final object with clip-path="url(#the-object)"
SVG Noise - Script Codes
SVG Noise - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3
Size 2,930 Kb
Views 60,720
Do you need developer help for SVG Noise?

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!

Chris Wright (chriswrightdesign) Script Codes
Name
Macbook Air SVG
Typography SVG experiment
Experiments with nth-of-type animation
SVG Noise over gradient Experiment
Background Noisy Radial Gradient
Grid - Auto-fit demo
Form adaptation
Inertia CSS
Reverse cascade
CSS Responsive animated Accordion
Create amazing SEO content 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!