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
30
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 ...
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 ...
- 3,555
0
votes
1
answer
42
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 ...
- 3
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
65
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 ...
- 21
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
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 ...
- 283
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=&...
- 18.6k
1
vote
1
answer
60
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 ...
- 283
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 ...
- 36.6k
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,544
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
95
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 ...
- 36.6k
0
votes
2
answers
104
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
137
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
377
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
0
votes
2
answers
160
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-...
0
votes
1
answer
155
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 ...
- 4,254
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 ...
- 283
0
votes
1
answer
62
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 ...
- 33
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="...
- 687
0
votes
1
answer
544
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 ...
- 1
2
votes
1
answer
614
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, ...
- 10.9k
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>
</...
- 717
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
137
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 ...
- 4,254
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