All Questions
Tagged with svg-filters css
225
questions
3
votes
1
answer
534
views
Why is <feDropShadow> not displaying?
Edit: trying to create a mcve I wasn't able to repro the issue. Now I'm completely baffled. Works on codesandbox, not in my project.
Initial question
I want to create a dynamic inline SVG element and ...
- 87.5k
0
votes
0
answers
252
views
Zoom blur effect in CSS or Javascript on text
I am wondering, if I can make something like a zoom blur effect in CSS thru custom filter. I want something like this: https://pixijs.io/pixi-filters/docs/PIXI.filters.ZoomBlurFilter.html. But I would ...
1
vote
1
answer
551
views
How to combine duotone effect and CSS mix-blend-mode:difference
I have a pretty specific case I can't solve here. I'm currently trying to implement a design that relies heavily on gradients and blend modes. What I'm trying to achieve is this effect where black ...
- 11
2
votes
0
answers
1k
views
How can I performance optimise this SVG animation?
I am working on a SVG animation, here is a Code Pen to check it out. It is using a combination of SVG Filters, SVG Masks and Path Animations.
The issue I am having is that I am struggling to get it ...
11
votes
1
answer
11k
views
SVG images not rendering in Safari
<svg id="button-svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve">
<defs>
<pattern id="pattern1" height="100%" width="...
- 861
1
vote
1
answer
775
views
Problem with SVG Filters to make a specific color transparent in an image
I found a svg filter with multiple filter-effects to make a specific color in an image transparent.
I created an image with two colors Red and Black and I am making the black
color transparent.
The ...
- 317
0
votes
0
answers
121
views
Shadow in SVG is not multiply and it's different colour on different backgrounds
I have some SVG with object and shadow around the edges, the issue is that shadow is more light on dark background and more dark on light background.
How I can make it the same on any background?
...
- 217
0
votes
0
answers
86
views
SVG Filters and canvas pixels
I am trying to retrieve the pixels of a canvas on which filters have been applied.
On this example below, I apply a filter on mycanvas1, draw an image on it and then draw that canvas on another ...
- 1,512
1
vote
1
answer
331
views
is there any way to give multiple value in duration svg animation tag?
i am trying to perform some animation operation on svg but i am not able to get the outcome i want is there any way to add morethen one value on
<animate attributeType="CSS" attributeName="...
- 415
0
votes
0
answers
1k
views
I'm trying to create svg arrow with css for up arrow and down arrow with animations but not able to make up arrow
I'm trying to make up an arrow with CSS using SVG but not able to make it. I used this code pen https://codepen.io/postor/pen/mskxI to create down arrow which works fine
<svg className="arrows">...
- 103
0
votes
0
answers
195
views
Convert CSSgram Instagram Willow filter to SVG filter
I'm trying to convert the following CSSGram Willow CSS filter to a SVG filter.
.willow {
position: relative;
-webkit-filter: grayscale(0.5) contrast(0.95) brightness(0.9);
filter: ...
- 6,597
1
vote
1
answer
650
views
Add filter only to <image/> inside SVG, but not to the entire SVG
I have small problem with styling SVG and image inside. In SVG I have two filters. First effect (#innershadow) is to whole SVG object, second I want to apply only to image inside, because wave (#...
- 91
0
votes
1
answer
1k
views
SVG color change inside a button CSS
I am having a trouble changing the color of SVG along with the button. I want SVG color to change when I hover onto a button with SVG in it, now it works just when I hover over an SVG image inside ...
- 21
2
votes
1
answer
818
views
SVG filter is not changing the fill color
I have a svg image which shows a little logo I`m using on a website.
This svg has three paths and in two of them i want to change the fill color to a little darker one.
:root {
--websiteColor: ...
- 93
0
votes
1
answer
366
views
Weird artefacts with <feGaussianBlur/> on images in safari and mobile browsers
I am currently blurring images and using these as background whenever an image gets contained.
I am using the following svg filter with a filter spread out in two steps using feGaussianBlur and ...
- 1,463