How could I create a rect with blurred stroke in svg using d3.js?
Or at least an ordinary svg markup.
I was not able to find such an example or a solution to the problem. If you will tell me that it is a duplicate and provide a similar question I will gladly delete this one. But I am pretty sure that it is not a duplicate.
You might want to look at this article "Adding a subtle touch of glow to your d3.js visualizations"
If you want to do it manually, you can use the feGaussianBlur filter, more infos here : feGaussianBlur
From Mozilla Developer :
<svg width="230" height="120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green"
filter="url(#blurMe)" />
</svg>
Related
Note: I can't use JavaScript, because this is for a CSS Zen Garden sort of challenge. Please do not suggest a JS library.
I have 2 ideas that I'm not making headway on:
Use a SVG filter to just pixelate the dang image; I've been playing with <feMorphology operator="erode"/> and punching the contrast up after, but it looks bad.
Filter the image to be smaller, then scale it up using CSS and image-rendering to be all blocky. The hard part is Step A; I can't find any filter operations that scale the input.
Am I missing something? How can I get a "pixelated" effect using an SVG filter?
You can pixelate images if you have the right "magic" displacementMap. Feel free to use the one referenced below (courtesy of Zoltan Fegyver).
Update: Changed the sample code to inline the displacementmap image as a data: URI (thanks for the code IllidanS4.)
The original answer had the displacementMap image hosted on a different domain. This used to work - but browsers implemented the new Filters security measures that disallow this. For production code today, you need the displacement map image served from the same domain as the source graphic's file or you need to inline the displacementMap.
Update 2:
You may have to tweak the size of feImage and feGaussianBlur to avoid bugs in feTile that adds artifacts. For example - this seems to work better:
<feGaussianBlur stdDeviation="8" in="SourceGraphic" result="smoothed" />
<feImage width="15.4" height="15.4"
<svg x="0px" y="0px" width="810px" height="600px" viewBox="0 0 810 600" color-interpolation-filters="sRGB">
<defs>
<filter id="pixelate" x="0%" y="0%" width="100%" height="100%">
<!--Thanks to Zoltan Fegyver for figuring out pixelation and producing the awesome pixelation map. -->
<feGaussianBlur stdDeviation="2" in="SourceGraphic" result="smoothed" />
<feImage width="15" height="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVAgdY1ywgOEDAwKxgJhIgFQ+AP/vCNK2s+8LAAAAAElFTkSuQmCC" result="displacement-map" />
<feTile in="displacement-map" result="pixelate-map" />
<feDisplacementMap in="smoothed" in2="pixelate-map" xChannelSelector="R" yChannelSelector="G" scale="50" result="pre-final"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image filter="url(#pixelate)" width="810" height="600" preserveAspectRatio="xMidYMid meet" xlink:href="http://uploads2.wikiart.org/images/vincent-van-gogh/the-starry-night-1889(1).jpg"/>
</svg>
The filter in Michael Mullany's answer didn't work for me, instead I found this filter by Taylor Hunt:
<svg>
<filter id="pixelate" x="0" y="0">
<feFlood x="4" y="4" height="2" width="2"/>
<feComposite width="10" height="10"/>
<feTile result="a"/>
<feComposite in="SourceGraphic" in2="a" operator="in"/>
<feMorphology operator="dilate" radius="5"/>
</filter>
</svg>
(use it in the same way as the other filter: By giving an image the attribute filter="url(#pixelate)")
In action in this CodePen: https://codepen.io/tigt/pen/aZYqrg
However, both these filters seem unable to handle SVGs where the drawing doesn't take up the entire viewBox.
Here is pen
I want to apply drop shadow effect on rect, when rect is hidden using one of the following technique:
opacity:0 // or
fill:rgba(1,1,1,0) // or
fill-opacity:0 // or
display:none
when I trying to apply filter on such elements, shadow not appearing at all...
Is it possible to apply drop shadow on hidden Svg paths? How?
The simplest way is by using a mask.
In the demo below we have added a drop shadow to a circle. Then we construct the mask so that it hides the circle itself, but keeps the area outside the circle (ie the shadow). Revealing the red rectangle behind it.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
<mask id="invisible">
<rect width="100%" height="100%" fill="white"/>
<circle cx="50%" cy="50%" r="80" fill="black"/>
</mask>
</defs>
<rect x="40" y="60" width="150" height="80" fill="red"/>
<circle cx="50%" cy="50%" r="80"
style="fill:blue; filter:url(#shadow); mask: url(#invisible);"/>
</svg>
If you're just looking for a drop shadow with no rect, setting the fill to the background color will work:
.square{
fill:#fff;
width:100px;
height:100px;
filter:url('#drop-shadow');
}
If you've got multiple elements under the rect, you could try hiding just the filled in area with a clip-path or mask.
This below code works fine in chrome and filter is applied but fails in firefox. An extra space is also added by direct inclusion of svg definition in the html(This is present in all browsers). Not sure why its happening like this. Can someone let me know the issue, I am new to svg
Here is the codepen link: http://codepen.io/susheel61/pen/wJYgwr
<svg version="1.1" id="ThemeSvg">
<defs>
<g>
<!--/* Polygon definitions for overlay shape */-->
<rect id="red-poly" x="0%" y="0%" width="53%" height="100%" fill="#b5121b" transform="skewX(-10)"></rect>
<rect id="rect-fade-out" x="0%" y="0%" width="53%" height="100%" fill="url(#fade-out)" transform="skewX(-10)"></rect>
</g>
<g>
<filter id="red-angled-overlay" x="0%" y="0%" width="100%" height="100%">
<!--/* Bring in the mask for fading the image out */-->
<feImage xlink:href="#rect-fade-out" result="red-overlay" x="0" y="0"></feImage>
<!--/* Create composite of image and fade mask */-->
<feComposite in="SourceGraphic" in2="red-overlay" operator="out" result="composite"></feComposite>
<!--/* Bring in the colored polygon for the overlay */-->
<feImage xlink:href="#red-poly" result="overlay" x="0" y="0"></feImage>
<!--/* Blend the overlay with the faded image */-->
<feBlend in="composite" in2="overlay" mode="multiply"></feBlend>
</filter>
</g>
</defs>
</svg>
<svg version="1.1" viewBox="0 0 840 474" preserveAspectRatio="xMaxYMin slice">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://wowslider.com/sliders/demo-10/data/images/autumn_leaves.jpg" width="100%" height="100%" filter="url(#red-angled-overlay)" class="svg-black-overlay"></image>
</svg>
Firefox does not support feImage filters where the image is a fragment. It only supports feImage where the image is a complete standalone image or a data URI of a complete SVG document.
You'd have to create two additional standalone SVG images one with each polygon definition in and point the feImage elements at the complete image document in each case.
I am studying some basic image manipulations with SVG and trying to find optimal approach for the following challenge:
We have one SVG file which has various SVG elements (circles, rectangle, triangle). They all are overlapping each other creating new "areas" of different forms (see pic).
So filling actual Elements - no problem there. But what if I want to fill with color only specific intersect area?
My current thinking was:
Consider drawing all elements as Paths, then see if I can treat overall composition as One large path and then play with fill-rule.
Consider calculating the area shape and drawing a new shape on top of it, then fill it.
Consider something else?
Michael's filter method is cool and tricky, but perhaps a little hard to understand.
You can also do it with masks.
<svg width="391" height="400">
<defs>
<!-- define the shapes in the image, which we will use for the outlines
and for creating intersection masks -->
<rect id="square" x="92" y="48" width="218" height="218"/>
<polygon id="triangle" points="54,366 277,366 165,142"/>
<circle id="circle" cx="256" cy="264" r="85"/>
<!-- the masks -->
<!-- white parts are visible, black parts are invisible -->
<mask id="square-minus-triangle">
<!-- square with triangle cut out of it -->
<use xlink:href="#square" fill="white"/>
<use xlink:href="#triangle" fill="black"/>
</mask>
<mask id="triangle-minus-square">
<!-- triangle with square cut out of it -->
<use xlink:href="#triangle" fill="white"/>
<use xlink:href="#square" fill="black"/>
</mask>
</defs>
<!-- background -->
<rect width="100%" height="100%" fill="#e5e4da"/>
<!-- the intersection shapes (yellow) -->
<!-- first draw the circle, but use the square-minus-triangle mask.-->
<use xlink:href="#circle" fill="#e4e400" mask="url(#square-minus-triangle)"/>
<!-- draw the circle again, but use the triangle-minus-square mask.-->
<use xlink:href="#circle" fill="#e4e400" mask="url(#triangle-minus-square)"/>
<!-- draw the outlined shapes -->
<g fill="none" stroke="black" stroke-width="6">
<use xlink:href="#square"/>
<use xlink:href="#triangle"/>
<use xlink:href="#circle"/>
</g>
</svg>
You can do this with filters. An easy way to do is to use near transparent fill and then use a filter to dial the non-overlapping areas to fully transparent and the overlapping areas to fully opaque. It makes the stroke a little crispy though.
<svg height="600px" width="800px">
<defs>
<filter id="opacitychange">
<feComponentTransfer>
<feFuncA type="linear" intercept="-.05"/>
</feComponentTransfer>
<feComponentTransfer>
<feFuncA type="gamma" amplitude="4" exponent=".4"/>
</feComponentTransfer>
</filter>
</defs>
<g filter="url(#opacitychange)">
<circle stroke="black" fill="blue" fill-opacity="0.05" cx="150" cy="150" r="100"/>
<rect stroke="black" x="200" y="100" width="100" height="300" fill="blue" fill-opacity="0.05"/>
<polygon stroke="black" points="50,50 50,400 300,400" fill="blue" fill-opacity="0.05"/>
</g>
</svg>
Here's a storyboard of the CSS/JS/SVG animation I'm trying to accomplish. Two triangle masks enter from either side, then intersect resulting in a negative mask:
The point where the triangles intersect is where it gets tricky. When I export the mask for panel 4 to SVG, it looks like this:
<svg width="416px" height="289px" viewBox="0 0 416 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M211.503681,65.6626347 L507.009604,-138.787586 L507.009604,425.787586 L211.507182,221.339788 L-84,425.792431 L-84,-138.787586 L211.503681,65.6626347 Z M211.503681,65.6626347 L99,143.5 L211.507182,221.339788 L324.01001,143.502422 L211.503681,65.6626347 Z" id="path-1"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-1-Copy-3" fill="#F6A623" x="0" y="0" width="416" height="289"></rect>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Combined-Shape" fill="#000000" xlink:href="#path-1"></use>
<rect id="Rectangle-1-Copy-2" fill="#4990E2" mask="url(#mask-2)" x="0" y="0" width="416" height="289"></rect>
</g>
</svg>
It looks like it's basically drawing two shapes, the negative-space diamond mask in the center and the remainder of the outer triangles.
So the static mask itself appears to be possible with SVG, but I don't know how to animate it. Is there a library that can simplify this kind of SVG transition/tweening, or a fancy math equation that can calculate the paths dynamically?
Or am I looking at this the wrong way entirely and there's a much easier way to do it altogether?
So the solution was to make it both more simple AND more complicated.
Instead of two layers on top of each other with one mask, I needed three layers. One on the bottom to show behind the first mask, the second to be masked by the incoming triangles, and a third layer above that, duplicate to the first, where a diamond-shaped mask is applied.
<svg width="500" height="300" viewbox="0 0 500 300">
<defs>
<clipPath id="triangles">
<path id="left" d="M-250,-150 L250,150 L-250,450 Z" fill="black" />
<path id="right" d="M250,150 L750,-150 L750,450 Z" fill="black" />
</clipPath>
<clipPath id="diamond">
<path id="diamond-path" d="M250,0 L500,150 L250,300 L0,150 Z" fill="black" />
</clipPath>
</defs>
<!-- bottom -->
<g id="bottom">
<rect fill="darkorange" x="0" y="0" width="500" height="300" />
<text x="50%" y="65%" text-anchor="middle" class="text">Text</text>
</g>
<!-- middle/triangles -->
<g id="middle" clip-path="url(#triangles)">
<rect fill="dodgerblue" x="0" y="0" width="500" height="300" />
<text x="50%" y="65%" text-anchor="middle" class="text">Text</text>
</g>
<!-- top/diamond -->
<g id="top" clip-path="url(#diamond)">
<rect fill="darkorange" x="0" y="0" width="500" height="300" />
<text x="50%" y="65%" text-anchor="middle" class="text">Text</text>
</g>
</svg>
The top layer with the diamond path starts out scaled to 0, making it invisible. The two triangle clip paths are animated in towards each other, showing the bottom layer underneath. When the two triangle points meet, the diamond clip path on the top layer is scaled up, revealing the top layer which is a duplicate of the bottom.
I also switched to clip paths instead of masks because they're a) better supported and b) allow for multiple paths.
Here's a Codepen using CSS for the animations (only works in WebKit for the moment).
UPDATE: Here's a Codepen using GSAP that works in all browsers: http://s.codepen.io/kgrote/debug/mPxzZY