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
votes
1
answer
32
views
How to add a Blur Filter to SVG Element in CSS [closed]
I'm trying to add a blur effect to an SVG element. I attempted using within the SVG but changing the values of stdDeviation doesn't seem to produce any changes. How can I properly apply a blur filter ...
- 1,202
93
votes
6
answers
78k
views
How to calculate required hue-rotate to generate specific colour?
I have a white image that I am using as a background for a div, and I would like to colour to match the themes main colour. I am aware I can do:
filter: sepia() saturate(10000%) hue-rotate(30deg);
...
- 31.3k
0
votes
1
answer
31
views
How to apply filters to shapes multiple times in SVG?
I am trying to apply multiple operations to shapes. (Eventually, my end goal is to blur 2 different shapes using a different color matrix and then blend them together. This is only a reproducible ...
- 31.3k
20
votes
4
answers
11k
views
Multiple Filters for Single Object in SVG
I want to put two filters on my circle. (Maybe more)
I've tried doing:
filter="url(#f1);url(#f2)"
And:
filter="url(#f1,#f2)"
And:
filter="url(#f1 #f2)"
But none of them work. How can I approach ...
- 1,197
0
votes
2
answers
44
views
SVG feTurbulence too transparent output
I have a feTurbulence filter generating clouds in SVG format. I can't adjust the opacity to be less transparent. The clouds are against a blue sky and some white stars. Through the clouds, the stars ...
- 11
0
votes
1
answer
44
views
How to merge SVG masks?
I'm trying to "merge" two masks in SVG and apply them in a way that the white part of both masks is visible in the shape I apply it to.
I read that the solution might be feComposite, but I ...
- 11.5k
37
votes
4
answers
18k
views
How to lower the opacity of the alpha layer in an svg filter?
I'm trying to create a logo as an SVG. I exported the file from Illustrator. The logo has a drop shadow on it. I was looking through the XML and I found the filter node
<filter filterUnits="...
- 24.9k
0
votes
1
answer
66
views
Get rounded corner while using a border created with clip-path
I am trying to create the following shape (https://i.sstatic.net/cZmav.png
right now i am using a clip-path to create the border, because of the corner in the bottom-right. however i am having a ...
- 1,257
1
vote
0
answers
19
views
Using dropshadow filter on svg path causes it to disappear [duplicate]
<!DOCTYPE html>
<html lang="en">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="drop-shadow" color-interpolation-filters="sRGB"&...
- 3,134
510
votes
8
answers
598k
views
SVG drop shadow using css3
Is it possible to set drop shadow for an svg element using css3, something like
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
I saw some remarks on creating shadow using ...
- 20.3k
8
votes
5
answers
8k
views
SVG filter not showing up in Firefox, working fine in Chrome
I want a piece of dark text on dark background to have a white glow outside of it. Although the default drop shadow filter in CSS (like filter: drop-shadow(2px 2px 2px black)) officially should ...
- 2,983
1
vote
1
answer
41
views
svg filter compositing with partial transparency
I'm trying to composite one shape onto another. The top layer is a set of strokes that have opacity. The bottom is just a flood fill.
The issue is that I need the strokes to retain their original ...
- 31.3k
0
votes
2
answers
56
views
How can I transform an SVG path without transforming applied gradient/filter?
Given some simple SVG like:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1" x1=&...
- 11.5k
1
vote
1
answer
61
views
How to get rid of extraneous <feFlood/> in filter
I'm using filters with my rounded rects and notice that the paints the whole sub-region and I can't figure out how to remove it so that all I have is a rounded rect of a different color based on my ...
- 21.4k
8
votes
4
answers
9k
views
Using SVG filter to create an inside stroke
I would like to simulate and "inside stroke" on an svg path.
I have an svg map with multiple complex paths (countries) each with a different fill color stroke.
And i would like to add a "fake inside ...
- 10.8k
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
0
votes
2
answers
161
views
How can i remove a filter svg from the children?
i'd like to remove the svg filter i added to a div from the button children but i'm blocked
HTML
<div id="parchment" class="contain">
<button style="background-...
- 621
0
votes
1
answer
156
views
Seamless Waving Effect in svg
Is there a way to achieve a perfect seamless waving effect for the whole of a svg. I tried approaching the problem by animating the baseFrequency of feTurbulencefilter but it is not giving me what I ...
- 21.4k
0
votes
1
answer
54
views
How to add two feColorMatrix results? Just the sum of each RGB channel
I can't seem to find this anywhere, but is there a way in an SVG filter to simply add two colors from 2 feColorMatrix's together? While there are many Porter-Duff operations available, the simple plus ...
- 21.4k
11
votes
2
answers
4k
views
How to use a simple SVG filter on Safari with acceptable performance and without crashing?
Disclaimer: This post is half question and half report of my experiments while trying to find a solution.
The Task: Simple SVG Filter on a Monochrome Rectangle
Using a filter to change or modify the ...
- 31.3k
2
votes
0
answers
413
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 ...
- 34.4k
0
votes
1
answer
63
views
Filter Gradient on image without double Image
is it possible to have a smooth gradient filter (CSS or SVG) to darken specific parts of an image.
Of course I could create a div apply a linear gradient from black to transparent to it and then set ...
- 31.3k
1
vote
1
answer
271
views
SVG filter looks very different in Chrome vs Firefox
I have created an example here:
<svg viewBox="0 0 800 200">
<defs>
<filter id="cloth">
<feTurbulence seed="399" type="fractalNoise" baseFrequency="10.797" id="...
- 31.3k
7
votes
3
answers
2k
views
Adding feDropShadow to a vertical line in SVG makes it disappear
I have the following SVG document:
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow">
&...
- 6,764
0
votes
1
answer
550
views
Rounded clip path div [duplicate]
I need to create custom shapes for a client project. They are expecting responsive rounded divs. For that, we try using clip path in combination with svg filter to round the edges.
Figma file ...
- 21.1k
2
votes
1
answer
615
views
Halftone image effect with SVG filters
I am trying to translate specifications from Photoshop to svg filters.
The recipe is:
Filter > Pixelate > Color Halftone
All 4 channels 45 degrees
Radius of the dots between 5-8
The process, ...
- 21.4k
0
votes
1
answer
20
views
HTML SVG texts with different background colors
I have an image and I want to render multiple labels with different background colors:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</...
- 8,665
0
votes
0
answers
104
views
Transition on "stroke-text-svg-filter"
I'm familiar only with the basics of HTML and CSS and I'm making this website using a no-code tool called Webflow.
I inserted some custom code to get an outline effect using svg filters. Basically, ...
1
vote
2
answers
138
views
svg stroke to remain unaffected by filter
I am applying <feFlood> to a svg Element. However, upon applying, the stroke and stoke-width are getting negatively affected by that.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ...
- 31.3k
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
12
votes
3
answers
11k
views
Drawing a circle with a dropshadow in SVG clips the edges
I'm trying to draw a simple circle with a drop shadow in SVG, but for some reason the top and left edges are clipped. This happens both in Chrome and Safari.
I'm using code I found in the w3schools ...
- 14.9k
1
vote
0
answers
127
views
SVG filter is not always applied
I have this small website: https://retro-tetris.onrender.com/
I use svg to create bubble screen effect. The problem is the effect not working on load or if you reload page with Ctrl+F5. If you reload ...
0
votes
1
answer
177
views
Python Convert SVG with filters to PNG
The svg doesnot contains dropshadow filter, instead the filter comprises of simpler filters. The svg has a small shadow around geometries so as to give a 3D look.
Here is the svg filter
<defs>
...
- 1,760
1
vote
0
answers
32
views
Stop the svg animation on a certain frame
I have an svg animation file. I want to stop this animation at a certain frame, for example frame 3. How to do it?
- 31
0
votes
0
answers
103
views
Repeat mode for SVG displacement filter
I am trying to apply a continuous 'flowing' turbulence on an image through SVG filter. This is the svg (Edited after a suggestion in the comments):
<svg>
<filter id="filter" &...
- 398
1
vote
1
answer
87
views
Can a nested SVG be used as input for feTile in an SVG?
I'm using feTile in combination with feOffset in an SVG file to create a shadow filled with a pattern. The pattern itself is an SVG file too. To keep the complete SVG self-contained, I would like to ...
- 111