All Questions
Tagged with svg-filters html
145
questions
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
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
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
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
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
1
vote
0
answers
468
views
How do I apply shader to SVG Filter?
I tried some WebGL technology before such as three js and pixi js. When I learned WebGL technology, I found shader which made me really fascinated. But WebGL can only be rendered on the canvas not the ...
- 347
0
votes
1
answer
512
views
Some SVG elements disappear when hiding adjacent divs
I have a project where I've created a number of divs which each contain an svg gauge. Each gauge is multi-layered and when displayed, it looks great. Its a complex gauge, so I wont include the code, ...
0
votes
1
answer
153
views
How to Map brightness in CSS( using filter ) from -100% to 100% using feFuncR, feFuncB, feFuncG
What should I set the values of slope of feFuncR, feFuncG and feFuncB inside feComponentTransfer to map the brightness of an image from -100% (complete black) to 100%(complete white) with 0% having no ...
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 ...
- 822
1
vote
1
answer
143
views
Why does converting my greyscale SVG to alpha cause a reduction in brightness?
I'm trying to create a transparent "starry night" effect with an SVG. I have my SVG inlined on a webpage, inside an element with a black background. I start out with a turbulence filter, ...
- 29.2k
1
vote
0
answers
285
views
SVG Filter animation won't work in Safari
I ran into an issue where safari doesn't want to apply svg filters to a child element that is animated. It seems like an you can animated the parent of an element with a filter applied (second example)...
- 61
0
votes
0
answers
384
views
Remove filter from child element HTML CSS
I am working on a project and and am having an issue trying to remove a filter from a child element. I created a small code snippet of the issue I am running into.
Does anyone have any recommendations ...
1
vote
1
answer
351
views
SVG Shape Lighting
Summary: I'm trying to create a canvas of randomized rock climbing holds using vector graphics generated with properties such as color, rotation, size and path values.
To add depth to these I'm trying ...
- 57
1
vote
1
answer
135
views
Improve neon sharped cut text effect
I am trying to add sharped cut effect on text. I have achieved this thing:
But I want to achieve this backplate/background sharped cut text effect:
My Code:
.wrapper {
background-color: #000;
}...
- 126
2
votes
1
answer
747
views
SVG filter "Turbulence" not rendering well on safari
I'm trying to apply a svg "Turbulence" filter on an image on my website.
The thing is that it looks well on FireFox and Chrome :
But looks horrible on safari :
It seems that Safari is &...
