Questions tagged [svg-filters]
SVG filters are a set of image processing primitives that can be combined together to create sophisticated visual effects.
svg-filters
648
questions
1
vote
1
answer
74
views
preserveAspectRatio doesn't seem to work in feImage
I am trying to get the same effect as when using background-size: cover in CSS, but by using SVG filters - feImage in particular.
div {
width: 10em;
aspect-ratio: 1;
background: gold
}
.svg ...
- 122k
0
votes
0
answers
33
views
Replace one - and only one - color in a svg drawable
I have my brand logo as an svg drawable, and it consists of one text and a graphic at its right. The svg has only two colors, one solid for the text, the other solid color for the image at a side.
...
- 2,566
1
vote
2
answers
1k
views
SVG blur filter has hard borders [duplicate]
I have this code in which I want to add a feGaussianBlur to a <rect/> element:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<defs>
<filter id="...
- 2,702
16
votes
2
answers
8k
views
CSS blur only in one direction (motion blur)
I need to dynamically blur an image on my page, but only along one axis (Y specifically). So here are my requirements:
Has to be done "live" (I can't pre-render a blurred version of the image)
Like I ...
- 6,658
0
votes
1
answer
54
views
SVG feDiffuseLighting in Chrome vs Firefox
Greeting.
I faced wierd problem
I've got next.js project (default config) with svg filter
<svg xmlns="http://www.w3.org/2000/svg">
<filter id='roughpaper'>
<...
2
votes
1
answer
96
views
Filter effect is spilling out
Consider a div with some bumped up text and a filter. The filter is restricted to 100%×100% of the objectBoundingBox.
However, when we apply a feFlood, we can see how this spills outside the element's ...
- 263k
14
votes
3
answers
31k
views
How to make an inset drop shadow in SVG
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 ...
- 1,200
8
votes
3
answers
5k
views
SVG: Multiple Effects in One Filter
I'm trying to implement multiple drop shadows into a single SVG filter, but I believe my question is more generic than that: how can I add multiple effects into a single SVG filter? In my case, here's ...
- 25.5k
0
votes
2
answers
106
views
Is there way to combine two SVGs with opacity and only show one SVG when they overlap?
I want to fill the gap in the round-arrow line, and the round-arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like ...
- 103
0
votes
0
answers
138
views
How to make a moving turbulence filter with SVG feturbulence?
As the question says, is there a way to do that? For example, I can make a infinite moving linear gradient:
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%&...
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 [...
0
votes
0
answers
46
views
SVG filter turbulence will work on p element but not on div
(works on chrome desktop but not mobile and doesn't work on safari)
I have SVG turbulence filter applied to a p element and a div. I am animating it using GSAP specifically base frequency and scale. ...
- 521
0
votes
0
answers
48
views
SVG filter base frequency attribute animates well on desktop but not on mobile
I'm using react and gsap. I have 3 elements that are animating using gsap out of which 2 are svg filter attr. This works amazingly on desktop where the values change nicely and smoothly. On mobile ...
- 521
1
vote
0
answers
39
views
SVG filter width as percentage doesn't make sense — can it be specified as a margin?
I am trying to create a gaussian blur SVG filter that can be reused without modification by people who are not programmers.
The problem I am running into is that the way the width, height, x, and y, ...
- 2,217
2
votes
1
answer
334
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 ...
- 71