I'm trying to do the Mapbox design. There is a fog on the globe in Mapbox. I use "box shadow inset" for the same effect. But because I give high value, there are various fluctuations.
My Try;
enter image description here
The effect I use to give the fog;
<svg>
<defs>
<filter id="shadow">
<feFlood flood-color="gray" />
<feComposite operator="out" in2="SourceGraphic" />
<feMorphology operator="dilate" radius="20" />
<feGaussianBlur stdDeviation="50" />
<feComposite operator="atop" in2="SourceGraphic" />
</filter>
</defs>
</svg>
What I Want To Do (Mapbox, hollow of fog cloud);
enter image description here
Related
Hello I'm trying to apply this svg inset shadow filter to my div. Is working fine in Chrome but not in Safari.
Here's the svg filter:
<filter id="inset" primitiveUnits="objectBoundingBox" x="0%" y="0%">
<feOffset dx="0.00" dy="0.00"></feOffset>
<feGaussianBlur stdDeviation="0.1" result="offset-blur"></feGaussianBlur>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite>
<feFlood flood-color="black" flood-opacity="0.8" result="color"></feFlood>
<feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite>
<feComposite operator="over" in="shadow" in2="SourceGraphic" result="inset-shadow"></feComposite>
<feGaussianBlur in="SourceAlpha" stdDeviation="0.0012"></feGaussianBlur>
<feOffset dx="0.013" dy="0.013" result="offsetblur"></feOffset>
<feFlood flood-color="black"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode in="inset-shadow"></feMergeNode>
</feMerge>
</filter>
Where's the problem?
Note: The child where I' trying to applying this filter has a clip-path polygon property
Chrome result
Safari result
Safari does not support certain SVG filter primitives when they're used via a CSS filter. feComposite/out is one of them.
I'm try make a two inset shadow in svg element, but it doesn't work. First shadow is overlaying on second.
This is a filter code:
<filter id="shadow-r-l" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="50" dy="50" result="offset2"/>
<feGaussianBlur stdDeviation="8" in="offset2" result="offset-blur2"/>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur2" result="inverse2" />
<feFlood flood-color="black" flood-opacity="0.5" result="color2" />
<feComposite operator="in" in="color2" in2="inverse2" result="shadow2" />
<feComposite operator="over" in="shadow2" in2="SourceGraphic" result="inset-shadow2" />
<feOffset dx="20" dy="20" result="offset"/>
<feGaussianBlur stdDeviation="8" in="offset" result="offset-blur"/>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" />
<feFlood flood-color="white" flood-opacity="0.5" result="color" />
<feComposite operator="in" in="color" in2="inverse" result="shadow" />
<feComposite operator="over" in="shadow" in2="SourceGraphic" result="inset-shadow" />
<feMerge>
<feMergeNode/>
<feMergeNode in="inset-shadow2" />
<feMergeNode in="inset-shadow" />
</feMerge>
</filter>
The code is creating "inset-shadow2" result which is the source image with the upper left edge darked. The code is then creating the "inset-shadow" result which is the source image with the upper left edge lighten. The code is then using feMerge to paint "inset-shadow" result over the "inset-shadow2" result. Since the "inset-shadow" and "inset-shadow2" results take up the same space, the "inset-shadow" result will completely over write the "inset-shadow2" result. I assume you intended to combine the light and dark effects over the source image. If so, you can replace the feMerge element with multiple feComposite elements.
The code is not specifying the in attribute on the feOffset elements. This could cause problems for the second feOffset element which I assume was intended to use SourceGraphic for input.
Making these changes yields the following code...
<filter id="shadow-r-l" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="50" dy="50" in="SourceGraphic" result="offset2"/>
<feGaussianBlur stdDeviation="8" in="offset2" result="offset-blur2"/>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur2" result="inverse2" />
<feFlood flood-color="black" flood-opacity="0.5" result="color2" />
<feComposite operator="in" in="color2" in2="inverse2" result="shadow2" />
<feOffset dx="20" dy="20" in="SourceGraphic" result="offset"/>
<feGaussianBlur stdDeviation="8" in="offset" result="offset-blur"/>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" />
<feFlood flood-color="white" flood-opacity="0.5" result="color" />
<feComposite operator="in" in="color" in2="inverse" result="shadow" />
<feComposite operator="over" in="shadow2" in2="SourceGraphic" result="inset-shadow2" />
<feComposite operator="over" in="shadow" in2="inset-shadow2" result="inset-shadow2-shadow" />
</filter>
I've been attempting to apply a drop shadow to my SVG Path. I googled across the filter option which when applied to path by applying: -webkit-filter: drop-shadow( -5px -5px 10px #000 ); which didn't seem to get applied.
Here's a fiddle with my SVG path demonstrating the problem
Within your JSFiddle, I deleted your CSS and added a filter definition. It seems to work:
<svg width="100%" height="300px">
<defs>
<filter id="filter1" x="0" y="0">
<feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<path stroke-linejoin="round" stroke-linecap="round" stroke="red" stroke-opacity="1" stroke-width="5" fill="none" class="leaflet-clickable" d="M1063 458L1055 428L1034 433L1030 421L1017 423L911 452L895 455L885 441L859 424L809 410L788 394L774 377L744 309L730 313L727 304L669 319L599 341L596 331L491 364L488 357L498 343L490 343L450 352L417 256L371 270L366 253L355 256L351 242L217 282L194 210L191 196L166 113L45 147L44 140L13 150" filter="url(#filter1)"></path>
</svg>
Maybe a few tweaks to the dx, dy, and stdDeviation values will get it just the way you want.
The SVG path usually looks like a solid line:
Is it possible to implement a hand-drawing (crayon) style for SVG path?
You can try something like this using svg's filter
<svg width="1000" height="500">
<defs>
<filter id="filter" height="2" width="2">
<feTurbulence baseFrequency="0.2" numOctaves="3" type="fractalNoise" />
<feDisplacementMap scale="80" xChannelSelector="R" in="SourceGraphic" />
</filter>
</defs>
<path d="m 100 100 l 200 10" stroke="black" stroke-width="20" style="filter:url(#filter)"/>
If you don't want the edges clipped and want a more solid stroke, then you can tweak Akshay's settings by setting filterUnits in userSpace and reducing the displacement scale like so:
<svg width="1000" height="500">
<defs>
<filter id="filter" filterUnits="userSpaceOnUse" x="-5" y="-5" height="200" width="2000">
<feTurbulence baseFrequency="0.2" numOctaves="3" type="fractalNoise" />
<feDisplacementMap scale="8" xChannelSelector="R" in="SourceGraphic" />
</filter>
</defs>
<path d="m 100 100 l 200 10" stroke="black" stroke-width="20" style="filter:url(#filter)"/>
I need to make a box with an inset drop shadow, in the same way that CSS3 has inset box-shadows. What I've found so far is a filter with feGaussianBlur, but the problem with that is that it also adds a drop shadow outside the box, which I don't want. Here's the code I've got so far:
<svg>
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="5" />
<feGaussianBlur in="SourceAlpha" result="blur2" stdDeviation="10" />
<feGaussianBlur in="SourceAlpha" result="blur3" stdDeviation="15" />
<feMerge>
<feMergeNode in="blur" mode="normal"/>
<feMergeNode in="blur2" mode="normal"/>
<feMergeNode in="blur3" mode="normal"/>
<feMergeNode in="SourceGraphic" mode="normal"/>
</feMerge>
</filter>
</defs>
<rect x="10" y="10" width="100" height="100"
stroke="black" stroke-width="4" fill="transparent" filter="url(#drop-shadow)"/>
</svg>
I've made a demo that also compares this code with the desired CSS-made result. The filter should not just work on rectangles, but also on trapezoids and more complicated polygons.
I've already tried using radialGradient, but since that makes the gradient circular, that's not good either.
If you had a solid fill, you could just add
<feComposite operator="in" in2="SourceGraphic"/>
to the end of your filter and it would clip the blur to the shape of the SourceGraphic. Since your shape is transparent, you'll have to do a little more work. What I'd suggest is using a semi-transparent fill on the original graphic in order to get the right selection for compositing and using an feFuncA to zero out the fill for the final operation. This turns out to be surprisingly complicated. But here is a solution that will work for any solid-stroke shape
<filter id="inset-shadow" >
<!-- dial up the opacity on the shape fill to "1" to select the full shape-->
<feComponentTransfer in="SourceAlpha" result="inset-selection">
<feFuncA type="discrete" tableValues="0 1 1 1 1 1"/>
</feComponentTransfer>
<!-- dial down the opacity on the shape fill to "0" to get rid of it -->
<feComponentTransfer in="SourceGraphic" result="original-no-fill">
<feFuncA type="discrete" tableValues="0 0 1"/>
</feComponentTransfer>
<!-- since you can't use the built in SourceAlpha generate your own -->
<feColorMatrix type="matrix" in="original-no-fill" result="new-source-alpha" values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"
/>
<feGaussianBlur in="new-source-alpha" result="blur" stdDeviation="5" />
<feGaussianBlur in="new-source-alpha" result="blur2" stdDeviation="10" />
<feGaussianBlur in="new-source-alpha" result="blur3" stdDeviation="15" />
<feMerge result="blur">
<feMergeNode in="blur" mode="normal"/>
<feMergeNode in="blur2" mode="normal"/>
<feMergeNode in="blur3" mode="normal"/>
</feMerge>
<!-- select the portion of the blur that overlaps with your shape -->
<feComposite operator="in" in="inset-selection" in2="blur" result="inset-blur"/>
<!-- composite the blur on top of the original with the fill removed -->
<feComposite operator="over" in="original-no-fill" in2="inset-blur"/>
</filter>
here is my fork of your fiddle: http://jsfiddle.net/kkPM4/
largely based on an experiment that I found, here's what I've come up with:
<defs><filter id="inset-shadow">
<feOffset dx="10" dy="10"/> <!-- Shadow Offset -->
<feGaussianBlur stdDeviation="10" result="offset-blur"/> <!-- Shadow Blur -->
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
<feFlood flood-color="black" flood-opacity="1" result="color"/> <!-- Color & Opacity -->
<feComposite operator="in" in="color" in2="inverse" result="shadow"/> <!-- Clip color inside shadow -->
<feComponentTransfer in="shadow" result="shadow"> <!-- Shadow Opacity -->
<feFuncA type="linear" slope=".75"/>
</feComponentTransfer>
<!--<feComposite operator="over" in="shadow" in2="SourceGraphic"/>--> <!-- Put shadow over original object -->
</filter></defs>
<rect width="100" height="100" fill="yellow" filter="url(#inset-shadow)"/>
If you want the fill to be seen, uncomment the last <feComposite>. Unfortunately, fill="transparent" will not give the filter an alpha to work with and will produce no shadow.