All Questions
121
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"&...
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
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>
</...
1
vote
0
answers
469
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 ...
0
votes
1
answer
516
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, ...
2
votes
1
answer
335
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 ...
1
vote
1
answer
144
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, ...
1
vote
0
answers
287
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)...
0
votes
0
answers
386
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
352
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 ...
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;
}...
2
votes
1
answer
749
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 &...
0
votes
2
answers
132
views
How to add spread in inner shadow in svg?
I have svg rectangle, and I need to add an inset-shadow with spread, how it works in figma.
rectangle with inner-shadow with spread
Currently, I make a rectangle with blur and x, y position, but I ...
1
vote
1
answer
264
views
Why isn't this feDisplacementMap filter working?
I'm trying to build an image within an SVG <defs> element for use in the in2 attribute of a displacement map filter. However, the displacement map filter isn't warping the element it's applied ...
0
votes
1
answer
41
views
Why is this SVG image not appearing in my website?
Below is the icon that I am using, it appears as an empty space:
const giftIcon = `<svg width="25" height="24" viewBox="0 0 25 24">
<defs>
...