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.
Related
Essentially I needed to make the center "cut-out" keep a fixed shape and size regardless of vector scale. Is there a way to achieve this?
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" style="fill-rule:evenodd;" viewBox="0 0 2802 2657">
<path d="M290 4c-95,733 -191,1466 -286,2200 760,150 1520,300 2279,450 172,-223 343,-446 515,-669 -114,-572 -229,-1144 -343,-1716 -722,-88 -1444,-176 -2165,-264zm696 1027c-103,111 -205,222 -308,333 94,111 188,222 282,333 342,-205 684,-410 1026,-616 -333,-17 -667,-34 -1000,-51z"/>
</svg>
So I managed to do something after some editing to your SVG.
To achieve what you're asking you'll need to use / have :
- the SVG mask attribute
- A very large shape for the mask ( as much large as the max scale you want to use on the visible shape )
- The shape that you want to resize
- Resize the shape with transforms
Your SVG should looks like the following
<svg>
<defs>
<mask id="theMask">
<path fill="#ffffff" d=""/>
</mask>
</defs>
<g mask="url(#theMask)">
<path fill="#ffffff" id="shapetoresize" d=""/>
</g>
</svg>
I posted a pen as a "Proof of concept"
Feel free to fork it and use it to achieve what you're trying to do.
Codepen
note: as pointed out by #thioutp , The JS is only for demo purposes, you don't need GSAP to achieve this.
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>
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.
The following code stopped working all of sudden from last week. This works on all browsers expect chrome on windows. Did anybody else faced similar issue?
It is not updating the color, but it works on all other browsers and OS.
<filter id="sample-test" x="0" y="0" width="100%" height="100%">
<feFlood flood-color="#d9251d" class="color-test" result="tint"></feFlood>
<feBlend in="tint" in2="SourceGraphic" mode="multiply" result="multiply"></feBlend>
</filter>
This is a known new bug in Chrome 46 (#549440) which has just been fixed. the work around is:
<filter id="sample-test" x="0" y="0" width="100%" height="100%">
<feFlood flood-color="#d9251d" class="color-test" result="tint"></feFlood>
<feComposite operator="arithmetic" in="tint" in2="SourceGraphic" k1="1" result="multiply"/>
</filter>
Which uses the multiply capability of feComposite. This is apparently a different code path which is not broken.
Looking for ideas on how to animate what looks like a laser drawing out a word in a cursive font using SVG. The animation can be done with SMIL or JavaScript I don't care - though I think it would be easier with SMIL.
I am pretty sure if I could just get the letters represented as a path I could figure out how to animate a line from a fixed point to the word path - even if the path is non-continuous.
Any ideas?
EDIT
My demo was very basic, essentially I wrote animate functions for each letter and arranged their timing. Here is the letter X for example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<rect x="0" y="0" width="100%" height="100%" fill="black"/>
<path id="word" stroke="red" d="M10 10 L40 40 M40 10 L10 40" />
<line x1="10" y1="10" x2="25" y2="50" stroke="blue" stroke-width="0.5">
<animate attributeName="x1" begin="0s" dur="1s" values="10; 40;" />
<animate attributeName="y1" begin="0s" dur="1s" values="10; 40;" />
<animate attributeName="x1" begin="1s" dur="1s" values="40; 10;" />
<animate attributeName="y1" begin="1s" dur="1s" values="10; 40;" />
<set attributeName="visibility" to="hidden" begin="2s" />
</line>
</svg>
I am sure we can all agree that this is not an ideal long term solution... I thought it would be relatively easy to animate one end of a LINE along a path but I am having problems just getting the path...
Extract the paths from the glyphs in question, then apply a dash-array animation as seen in this example on each of the paths.
From a high level perspective, I would think you would want to do something like render the font to a canvas, then use the pixel information to generate the animation sequence. A simple algorithm could just trace from left to right, it would be a good deal harder to figure out a single stroke path, but that is doable as well.
You don't mention any idea of what platform or any time constraints, so its hard to get much closer than that.
One possibility... SVG Fonts are, I understand, stored as a sequence of SVG commands used to draw individual characters. The vector-based nature of drawing in SVG would seem like it would be amenable to 'tracing out' characters in realtime; you might be able to make a conversion utility to pre-convert SVG fonts to simple paths.