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
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