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