All Questions
Tagged with svg-filters css
65
questions with no upvoted or accepted answers
3
votes
0
answers
911
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
335
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
752
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
868
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,535
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
414
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
199
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
977
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 ...
- 115
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
379
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
128
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