Update image glitch generator; change example image
All checks were successful
/ build (push) Successful in 12s
All checks were successful
/ build (push) Successful in 12s
This commit is contained in:
parent
88f6a8d18d
commit
cf0b76efbc
SSH key fingerprint:
SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
14 changed files with 221 additions and 71 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 313 KiB |
BIN
styleguide/assets/image/example_qrcode.png
Normal file
BIN
styleguide/assets/image/example_qrcode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 565 B |
BIN
styleguide/assets/image/example_qrcode_distorted.png
Normal file
BIN
styleguide/assets/image/example_qrcode_distorted.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
|
|
@ -27,16 +27,10 @@ function loadImage(base64Image) {
|
|||
let svgDataUrl;
|
||||
|
||||
sourceImage.onload = function () {
|
||||
let svgWidth = this.width;
|
||||
let svgHeight = this.height;
|
||||
|
||||
if (this.height > 1000) {
|
||||
svgHeight = 1000;
|
||||
svgWidth = (1000 * this.width) / this.height;
|
||||
}
|
||||
|
||||
svg.setAttribute("height", svgHeight);
|
||||
svg.setAttribute("width", svgWidth);
|
||||
let svgViewBox = `0 0 ${Math.trunc(800 / this.height * this.width)} 800`;
|
||||
svg.setAttribute("height", this.height);
|
||||
svg.setAttribute("width", this.width);
|
||||
svg.setAttribute("viewBox", svgViewBox);
|
||||
|
||||
let svgString = new XMLSerializer().serializeToString(svg);
|
||||
svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString);
|
||||
|
|
|
|||
|
|
@ -122,6 +122,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -160,6 +164,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -191,6 +199,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -228,6 +240,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -263,6 +279,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -292,6 +312,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -470,10 +494,11 @@ pre {
|
|||
display: block;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--color-shade-1);
|
||||
border: solid 0.3em var(--color-shade-2);
|
||||
}
|
||||
pre code {
|
||||
background-color: initial;
|
||||
border: initial;
|
||||
border-radius: initial;
|
||||
padding: initial;
|
||||
font-size: inherit;
|
||||
|
|
@ -483,11 +508,50 @@ code,
|
|||
.code {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
font-size: 0.8em;
|
||||
background-color: var(--color-shade-2);
|
||||
border: solid 0.15em var(--color-shade-2);
|
||||
border-radius: 0.2em;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
|
||||
pre span.comment,
|
||||
code span.comment,
|
||||
.code span.comment {
|
||||
color: var(--color-text-4);
|
||||
font-style: italic;
|
||||
}
|
||||
pre span.neutral,
|
||||
code span.neutral,
|
||||
.code span.neutral {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
pre span.identifier,
|
||||
code span.identifier,
|
||||
.code span.identifier {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
pre span.function,
|
||||
code span.function,
|
||||
.code span.function {
|
||||
color: var(--color-accent-1);
|
||||
font-style: italic;
|
||||
}
|
||||
pre span.keyword,
|
||||
code span.keyword,
|
||||
.code span.keyword {
|
||||
color: var(--color-accent-2);
|
||||
}
|
||||
pre span.number,
|
||||
code span.number,
|
||||
.code span.number {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
pre span.string,
|
||||
code span.string,
|
||||
.code span.string {
|
||||
color: var(--color-accent-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
table {
|
||||
width: fit-content;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -552,9 +616,6 @@ figure img {
|
|||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
figure img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
|
|
@ -563,8 +624,5 @@ img {
|
|||
object-position: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=base.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -544,10 +544,6 @@ figure {
|
|||
max-height: 30vh;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
|
||||
&.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -557,8 +553,4 @@ img {
|
|||
object-fit: contain;
|
||||
object-position: center;
|
||||
margin: 0 auto;
|
||||
|
||||
&.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
7
styleguide/assets/style/merch.ccss.map
Normal file
7
styleguide/assets/style/merch.ccss.map
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;AACF,WAAY;EACV,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,SAAS;EACtB,OAAO,EAAE,yTAAyT",
|
||||
"sources": ["merch.scss"],
|
||||
"names": [],
|
||||
"file": "merch.ccss"
|
||||
}
|
||||
|
|
@ -122,6 +122,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -160,6 +164,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -191,6 +199,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -228,6 +240,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -263,6 +279,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -292,6 +312,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -470,10 +494,11 @@ pre {
|
|||
display: block;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--color-shade-1);
|
||||
border: solid 0.3em var(--color-shade-2);
|
||||
}
|
||||
pre code {
|
||||
background-color: initial;
|
||||
border: initial;
|
||||
border-radius: initial;
|
||||
padding: initial;
|
||||
font-size: inherit;
|
||||
|
|
@ -483,11 +508,50 @@ code,
|
|||
.code {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
font-size: 0.8em;
|
||||
background-color: var(--color-shade-2);
|
||||
border: solid 0.15em var(--color-shade-2);
|
||||
border-radius: 0.2em;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
|
||||
pre span.comment,
|
||||
code span.comment,
|
||||
.code span.comment {
|
||||
color: var(--color-text-4);
|
||||
font-style: italic;
|
||||
}
|
||||
pre span.neutral,
|
||||
code span.neutral,
|
||||
.code span.neutral {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
pre span.identifier,
|
||||
code span.identifier,
|
||||
.code span.identifier {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
pre span.function,
|
||||
code span.function,
|
||||
.code span.function {
|
||||
color: var(--color-accent-1);
|
||||
font-style: italic;
|
||||
}
|
||||
pre span.keyword,
|
||||
code span.keyword,
|
||||
.code span.keyword {
|
||||
color: var(--color-accent-2);
|
||||
}
|
||||
pre span.number,
|
||||
code span.number,
|
||||
.code span.number {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
pre span.string,
|
||||
code span.string,
|
||||
.code span.string {
|
||||
color: var(--color-accent-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
table {
|
||||
width: fit-content;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -552,9 +616,6 @@ figure img {
|
|||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
figure img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
|
|
@ -563,9 +624,6 @@ img {
|
|||
object-position: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
i[data-icon] {
|
||||
display: inline-block;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -616,9 +616,6 @@ figure img {
|
|||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
figure img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
|
|
@ -627,9 +624,6 @@ img {
|
|||
object-position: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
i[data-icon] {
|
||||
display: inline-block;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -220,32 +220,26 @@
|
|||
</p>
|
||||
<figure>
|
||||
<img
|
||||
src="../assets/image/example_cat.jpg"
|
||||
alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
|
||||
of leopard-print fabric and looking at something behind the camera. The background is dark and
|
||||
plain."
|
||||
src="../assets/image/example_qrcode.png"
|
||||
alt="A version 2 qrcode containing the text 'Never gonna give you up!'"
|
||||
/>
|
||||
<figcaption>
|
||||
Example image without any distortion applied.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>
|
||||
Now, in HTML you could simply specify <code>class="glitch"</code> on
|
||||
the image tag to add the SVG filter dynamically, but this won't
|
||||
render said filter in Apple's Safari, which has been a known issue
|
||||
for many years. So instead, we also made
|
||||
We wanted to add the ability to simply specify a CSS class on an
|
||||
HTML image tag (or any other tag for that matter) to apply an SVG
|
||||
filter dynamically, but this won't render said filter in Apple's
|
||||
Safari (and sometimes not even in Chromium-based browsers), which
|
||||
has been a known issue for many years. So instead, we made
|
||||
<a href="../generator">a simple web-tool to apply the filter</a> to
|
||||
an image and export it as a PNG. The tool also scales the image down
|
||||
to ensure that the filter looks similar across all images.
|
||||
an image and export it as a PNG.
|
||||
</p>
|
||||
<figure>
|
||||
<img
|
||||
class="glitch"
|
||||
src="../assets/image/example_cat.jpg"
|
||||
alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
|
||||
bright edges, which get surrounded by pink and blue to their left and right hand side. The second
|
||||
one distorts the image by offsetting parts of the image horizontally by seemingly random yet
|
||||
somewhat osscilating amounts."
|
||||
src="../assets/image/example_qrcode_distorted.png"
|
||||
alt="The same image as before, except with a glitchy filer applied. The first effect applies to bright edges, which get paintet pink and blue to their left and right hand side respectively. The second effect distorts the image by offsetting parts of the image horizontally by seemingly random yet somewhat osscilating amounts."
|
||||
/>
|
||||
<figcaption>Example image with visual glitches applied.</figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -124,8 +124,44 @@
|
|||
filterUnits="objectBoundingBox"
|
||||
primitiveUnits="objectBoundingBox"
|
||||
>
|
||||
<feColorMatrix
|
||||
<feFlood x="0" width="0.001" result="floodLeftColumn" />
|
||||
<feComposite
|
||||
in="SourceGraphic"
|
||||
in2="floodLeftColumn"
|
||||
operator="in"
|
||||
result="sourceLeftColumn"
|
||||
/>
|
||||
<feMorphology
|
||||
x="-0.5"
|
||||
in="sourceLeftColumn"
|
||||
operator="dilate"
|
||||
radius="0.5 0.000001"
|
||||
result="sourceLeftColumnWide"
|
||||
/>
|
||||
|
||||
<feFlood x="0.999" width="0.001" result="floodRightColumn" />
|
||||
<feComposite
|
||||
in="SourceGraphic"
|
||||
in2="floodRightColumn"
|
||||
operator="in"
|
||||
result="sourceRightColumn"
|
||||
/>
|
||||
<feMorphology
|
||||
x="0.5"
|
||||
in="sourceRightColumn"
|
||||
operator="dilate"
|
||||
radius="0.5 0.000001"
|
||||
result="sourceRightColumnWide"
|
||||
/>
|
||||
|
||||
<feMerge result="expandedSource">
|
||||
<feMergeNode in="sourceLeftColumnWide" />
|
||||
<feMergeNode in="sourceRightColumnWide" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
|
||||
<feColorMatrix
|
||||
in="expandedSource"
|
||||
type="saturate"
|
||||
values="0"
|
||||
result="bw"
|
||||
|
|
@ -138,46 +174,63 @@
|
|||
<feConvolveMatrix
|
||||
in="ltoa_inverse"
|
||||
result="pink_edges"
|
||||
kernelMatrix="-4 0 4 0 0 0 -4 0 4"
|
||||
kernelMatrix="0 0 0 -8 0 8 0 0 0"
|
||||
/>
|
||||
<feComponentTransfer in="pink_edges" result="pink">
|
||||
<feFuncR type="table" tableValues="0.7765 0" />
|
||||
<feFuncG type="table" tableValues="0.1451 0" />
|
||||
<feFuncB type="table" tableValues="0.4902 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="pink" result="pink_shift" dx="-0.002" />
|
||||
<feOffset in="pink" result="pink_shift0" dx="-0.0015" />
|
||||
<feOffset in="pink" result="pink_shift1" dx="-0.0030" />
|
||||
<feOffset in="pink" result="pink_shift2" dx="-0.0045" />
|
||||
|
||||
<feConvolveMatrix
|
||||
in="ltoa_inverse"
|
||||
result="cyan_edges"
|
||||
kernelMatrix="4 0 -4 0 0 0 4 0 -4"
|
||||
kernelMatrix="0 0 0 4 0 -4 0 0 0"
|
||||
/>
|
||||
<feComponentTransfer in="cyan_edges" result="cyan">
|
||||
<feFuncR type="table" tableValues="0.2941 0" />
|
||||
<feFuncG type="table" tableValues="0.6784 0" />
|
||||
<feFuncB type="table" tableValues="0.8471 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
|
||||
<feOffset in="cyan" result="cyan_shift0" dx="0.0015" />
|
||||
<feOffset in="cyan" result="cyan_shift1" dx="0.0030" />
|
||||
<feOffset in="cyan" result="cyan_shift2" dx="0.0045" />
|
||||
|
||||
<feMerge result="pink_cyan_shift">
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
<feMergeNode in="pink_shift" />
|
||||
<feMergeNode in="cyan_shift" />
|
||||
<feMergeNode in="expandedSource" />
|
||||
<feMergeNode in="pink_shift0" />
|
||||
<feMergeNode in="pink_shift1" />
|
||||
<feMergeNode in="cyan_shift0" />
|
||||
<feMergeNode in="cyan_shift1" />
|
||||
</feMerge>
|
||||
|
||||
<feTurbulence
|
||||
type="fractalNoise"
|
||||
baseFrequency="0 0.2"
|
||||
numOctaves="1"
|
||||
baseFrequency="0 0.05"
|
||||
numOctaves="2"
|
||||
result="noise"
|
||||
/>
|
||||
<feDisplacementMap
|
||||
in="pink_cyan_shift"
|
||||
in2="noise"
|
||||
result="distorted_raw"
|
||||
scale="0.02"
|
||||
scale="0.04"
|
||||
/>
|
||||
<feOffset in="distorted_raw" result="distorted" />
|
||||
|
||||
<feComponentTransfer
|
||||
in="distorted_raw"
|
||||
result="SourceDistorted"
|
||||
>
|
||||
<feFuncA type="linear" slope="0.9" />
|
||||
</feComponentTransfer>
|
||||
|
||||
<feMerge>
|
||||
<feMergeNode in="expandedSource" />
|
||||
<feMergeNode in="distorted_raw" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<g filter="url(#filter0)">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue