SVG Shadows

Developer
Chris Wright
Size
3,657 Kb
Views
50,600
  1. SVG Shadows Previews
  2. SVG Shadows HTML Codes
  3. SVG Shadows CSS Codes
  4. SVG Shadows JS Codes

How do I make an svg shadows?

Testing applying different kinds of shadow to an object with SVG, recorded some of my thoughts while getting a better understanding of SVG filters.. What is a svg shadows? How do you make a svg shadows? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

SVG Shadows Previews
IQ Test

SVG Shadows - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Shadows</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> <filter id="color-shadow" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="0.4" dy="0.4" /> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.4 0 0 0 0 0 0.4 0 0 0 0 0 0.4 0 0 0 0 0 0.7 0" /> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="0.2" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> <filter id="drop-shadow" width="150%" height ="150%"> <feOffset result="offOut" in="SourceAlpha" dx="0.4" dy="0.4"/> <feGaussianBlur result="blurOut" in ="offOut" stdDeviation="0.1"/> <feComponentTransfer in="blurOut" result="opacityShadow"> <feFuncA type="linear" slope="0.2"/> </feComponentTransfer> <feBlend in="SourceGraphic" in2= "opacityShadow" mode="normal"/> </filter> <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer in="SourceAlpha"> <feFuncA type="table" tableValues="1 0" /> </feComponentTransfer> <feGaussianBlur stdDeviation="3"/> <feOffset dx="5" dy="5" result="offsetblur"/> <feFlood flood-color="rgb(20, 0, 0)" result="color"/> <feComposite in2="offsetblur" operator="in"/> <feComposite in2="SourceAlpha" operator="in" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge> </filter> </defs> <!-- change the filter here to: #drop-shadow, #color-shadow, or #inset-shadow --> <g filter="url(#drop-shadow)"> <path 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 Shadows - 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: 96px; height: 96px; display: block;
}
.icon-svg--bolt { color: #5ecf86;
}

SVG Shadows - Script Codes JS Codes

//1) you could pass all sorts of shadows into your filter definition if you liked
//2) here's one with inset-shadow
//3) applying drop shadow is slightly more complicated
//4) One way of doing it is duplicating your object and passing a filter through that
//5) In theory feMergeNode allows you to do it without having to duplicate the object. Although if the intensity is too much you don't have a lot of control yet
//6) if the gaussian blur stdDeviation is too high - the shadow will blur to the edge of it's SVG, it needs room to create the shadow - otherwise your result will be a box, and like me, you'll think it's not working properly.
//7) you'll find once you've applied the shadow that the intensity is too much. We can manage this with component transfer.
//but simply adding component transfer in won't save you, since it will apply to the entire SVG, and not just the shadow. I'm fairly certain you can feed in just the shadow.
//8) To feed in just the shadow you need add feComponentTransfer take in the blurOut (result we set in the feGaussianBlur) and output a result. That result then gets fed into the feBlend whihc will only blend that result with the initial source graphic of the filter.
//9) The last one I played around with was the color shadow - the matrix controls the color of the shadow output. The closer to 0 each of the RGB values, the closer to black. The gaussian blur stdDeviation controls how much the shadow is blurred. The feOffset controls how far away the shadow is from the original position
//10) The awesome thing about SVG filters is by using 'in' and 'result' you can pass any of the filter effects (feWhatever) into each other, and finally merge the result.
//11) The next test is how well this works with an SVG Icon system where symbol is instanciated and if it works the same. I'd assume it would, but you can't really get away with assuming.
SVG Shadows - Script Codes
SVG Shadows - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3
Size 3,657 Kb
Views 50,600
Do you need developer help for SVG Shadows?

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
Bouncing ball arc horizontal
Typography SVG experiment
Inverted shadow with fade
Grid - Row with minmax
Macbook Air SVG
SVG animate hamburger to cross
SVG Reflection
Inline SVG hamburger animation
Form adaptation
Reverse cascade
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!