All Questions
Tagged with svg-filters css
66
questions with no upvoted or accepted answers
3
votes
0
answers
921
views
SVG Filter Displacement as Overlay on Entire Website
I have a project where I want to achieve a glass effect through a lens, running over the entire site. I tried with PixiJS, but it only works on the canvas. It's important that the filter is on every ...
- 31
2
votes
1
answer
344
views
Svg gradient, override other svg too
basically I have two SVG and If I try to change the color of the second one it doesn't change, If I do to the first one, it change the color of both the SVG.
In the example below, if you duplicate the ...
- 822
2
votes
0
answers
771
views
CSS filter:url(#inlinesvg), How to change filter property value per instance?
I want to apply a svg filter to different elements, but for the different elements I want to adjust the value of a certain property. Is there a way to pass a variable for each instance?
I know I can ...
- 37
2
votes
0
answers
879
views
Filter URL specified in CSS (but SVG is in HTML doc) not working in Safari
The effect uses an SVG/Filter which is in the HTML document. It is then specified in an external CSS document using filter:url('#noise') contrast(110%);.
The effect works in Chrome/Firefox (all I've ...
- 1,545
2
votes
0
answers
1k
views
CSS SVG filter: url(#element) not working in firefox and has strange behavior in safari
I'm writing code based off of this SVG filter, however, even this simple filter does not displace the text. Any ideas on whats wrong or how I can get this to work in firefox and safari? In firefox ...
- 438
2
votes
0
answers
1k
views
How can I performance optimise this SVG animation?
I am working on a SVG animation, here is a Code Pen to check it out. It is using a combination of SVG Filters, SVG Masks and Path Animations.
The issue I am having is that I am struggling to get it ...
2
votes
0
answers
417
views
SVG filter loses colour when the SVG is hidden or external
<svg style="display:none">
<defs>
<filter id="blue-glow-display-none">
<feMorphology in="SourceAlpha" operator="dilate" radius="2" />
<feGaussianBlur ...
- 323k
2
votes
0
answers
200
views
Gaussian blur with svg and css over image slider
Apparently there is no native way to have a gaussian blur which affects non-absolute positioned images, svg is a good choice in this case. But for some reason it doesn't work here.
I want to have a ...
user9982219
2
votes
0
answers
921
views
SVG filter not working in Safari
On Safari 11.0, if I copy and paste the following code into the js console, I get the result shown in the image A, where the filter hasn't been applied to all elements.
However if I do the same thing ...
- 775
2
votes
1
answer
988
views
Using feGaussianBlur, feColorMatrix and feBlend in Safari
I am using svg filter to create a "gooey" blend between three circles stacked vertically. In Chrome/Firefox (minus some smoothing) I get the desired effect. In Safari, I get something very choppy and ...
- 125
2
votes
0
answers
883
views
Getting SVG filters to work on CSS background-image
I have created an example which is supposed to rotate the color channels of a CSS background-image using an SVG filter. The CSS used for the filter is:
.filt1 {
filter: url("data:image/svg+xml;utf8,...
- 2,053
2
votes
0
answers
998
views
Add text over an image using SVG filter in CSS
I have this implementation of blurred images:
HTML:
<img width="90" height="90" class="blurry" src="image.jpg">
<svg height="90" width="90" class="blurry">
<image filter="url(#...
- 3,102
2
votes
1
answer
3k
views
CSS "filter" property does not work on Safari when using inline SVG in CSS like 'filter: url(data:image, ...)'
[EDIT] I've reviewed my entire post to add precisions about the problem and for additional ressources.
...
I'm new to SVG usage for webdesign, but I intend to implement a cool CSS feature for a theme. ...
- 71
1
vote
1
answer
71
views
Why don't SVG filters take into account the position of the SVG's viewBox, since they do take into account its size?
<svg viewBox="60 0 200 40">
<filter id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="1" />
</filter>
<path d="M 70 5 l 0 10" style="filter: ...
1
vote
1
answer
391
views
Issue with getting "gooey" CSS SVG filter for rounded text background to work in Firefox
I was attempting to recreate the following rounded background effect found in this Dribble design:
Through some research, I found out that it was called the gooey effect. I tried to implement these [...
1
vote
0
answers
131
views
SVG filter on a css mask-composite
Hello everyone,
I'm currently working on this effect (on scroll) :
I want to add this texture to the mint/green foreground:
So, the whole set-up is a composite CSS-mask and I'm playing with the ...
- 57
1
vote
0
answers
67
views
How to combine SVG linear gradient and <rect> with feDisplacementMap and apply it to div element?
I have a react project, and I want to implement some SVG filter, but I'm having a problem now, the filter doesn't work. It Looks like there is some problem with the way I structure the SVG code block. ...
- 347
1
vote
0
answers
481
views
How do I apply shader to SVG Filter?
I tried some WebGL technology before such as three js and pixi js. When I learned WebGL technology, I found shader which made me really fascinated. But WebGL can only be rendered on the canvas not the ...
- 347
1
vote
0
answers
289
views
SVG Filter animation won't work in Safari
I ran into an issue where safari doesn't want to apply svg filters to a child element that is animated. It seems like an you can animated the parent of an element with a filter applied (second example)...
- 61
1
vote
0
answers
108
views
ThreeJS "Removes" SVG Filter
I'm experiencing an issue with ThreeJS removing an SVG Filter after being loaded in. I'm struggling to pinpoint the issue, even a directional answer to look into what could be the cause would be ...
1
vote
1
answer
267
views
Weird Bug with SVG Filters in CSS
I am currently try to find the best way to lazy-load images. While loading I want to show a tiny 10x10 image of the original (inline / base64). As this tiny image, of cause has a very poor quality I ...
- 3,011
1
vote
0
answers
280
views
Build and composite overlay image in external SVG filters file
I'm trying to rebuild this yellowing effect with SVG filters only so it could be applied to any image from an external filter file with filter: url('filters.svg#yellowing').
So far I have managed to ...
- 3,446
1
vote
1
answer
556
views
How to combine duotone effect and CSS mix-blend-mode:difference
I have a pretty specific case I can't solve here. I'm currently trying to implement a design that relies heavily on gradients and blend modes. What I'm trying to achieve is this effect where black ...
- 11
1
vote
1
answer
2k
views
How to keep the color of an SVG "filter: drop-shadow()" regardless of the background?
I tried to add the red shadow around an SVG image based on the CodePen example at https://codepen.io/dudleystorey/pen/EaMQBj. However, the color turns into purple when the background color is blue. ...
- 2,502
1
vote
0
answers
2k
views
Magic Glow for SVG element (text-shadow or SVG filters)
I have a SVG logo next to a brand name. When hovering the whole area, a magic glow should appear.
Unfortunately, I only get the brand text glowing. No magic glow for the logo (magnifier). I also ...
- 1,279
1
vote
1
answer
507
views
SVG filter quality when used as CSS background
I am trying to use a SVG file as a background for a div and everything is working just fine except when I add a filter to the SVG file it displays very rough. Is there some sort of setting that I need ...
- 9,941
1
vote
2
answers
1k
views
Is it possible to add a drop shadow to an svg image?
I've been doing some research on using svg images and have found quite a few good reads. While I don't have a great grasp on svg just yet, still working and experimenting with it. Most of the ...
- 147
1
vote
0
answers
110
views
Disable Cassette.Net url() rewrite for a specific CSS rule
I am using Cassette.NET to manage the static assets in my .Net application and have run into a small problem trying to use SVG filters in my CSS rules.
I have a CSS rule that applies a filter to text ...
- 8,053
1
vote
0
answers
268
views
How to convert multiple greyscale images to color on same page?
I am trying to implement this code which displays an image to greyscale and changes the image to its original colour image on hover. The issue here is for svg inline it is not working for IE10. The ...
- 11
1
vote
0
answers
125
views
Filter grayscale in chrome is buggy with :not selector
i've got sth like that
$('body > :not(.extras)').addClass("desaturation_filtr");
and that must have apply this class to whole body without extras class
.desaturation_filtr
{
-webkit-filter:...
