307 lines
27 KiB
HTML
307 lines
27 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<script>
|
||
const setTheme = (theme) => {
|
||
theme ??= localStorage.theme || "system";
|
||
document.getElementById("themeLight").checked = theme === "light";
|
||
document.getElementById("themeDark").checked = theme === "dark";
|
||
localStorage.theme = theme;
|
||
};
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
setTheme();
|
||
});
|
||
</script>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<link rel="shortcut icon" href="../assets/image/favicon.png" />
|
||
<link
|
||
rel="stylesheet"
|
||
type="text/css"
|
||
href="../assets/style/styleguide.css"
|
||
/>
|
||
<title>Glow</title>
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<a href="/" id="backToWiki">
|
||
<img
|
||
src="../assets/image/logo_eventname_glow.svg"
|
||
class="header-image dark-only"
|
||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||
/>
|
||
<img
|
||
src="../assets/image/logo_eventname_glow_off.svg"
|
||
class="header-image light-only"
|
||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||
/>
|
||
</a>
|
||
</header>
|
||
<div>
|
||
<nav>
|
||
<button aria-label="Open Navigation">
|
||
<i data-icon="menu_small"></i>
|
||
</button>
|
||
<ul>
|
||
<li class="link-back">
|
||
<a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
|
||
</li>
|
||
<li>
|
||
<a href="../"><i data-icon="home"></i>Overview</a>
|
||
</li>
|
||
<li>
|
||
<a href="../colors"><i data-icon="pen"></i>Colors</a>
|
||
</li>
|
||
<li>
|
||
<a href="../typography"><i data-icon="font"></i>Typography</a>
|
||
</li>
|
||
<li>
|
||
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
||
</li>
|
||
<li>
|
||
<a href="../logo"><i data-icon="hare_head"></i>Logo</a>
|
||
</li>
|
||
<li class="active">
|
||
<a href=""><i data-icon="lightbulb"></i>Glow</a>
|
||
</li>
|
||
<li>
|
||
<a href="../doodles"><i data-icon="looping"></i>Doodles</a>
|
||
</li>
|
||
<li>
|
||
<a href="../demopage"><i data-icon="code"></i>Demopage</a>
|
||
</li>
|
||
<li>
|
||
<a href="../generator"
|
||
><i data-icon="settings"></i>Image Generator</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="../changelog"><i data-icon="history"></i>Changelog</a>
|
||
</li>
|
||
<li id="themeToggleDark" class="themeToggle">
|
||
<input
|
||
id="themeDark"
|
||
type="checkbox"
|
||
aria-label="Switch between dark and light mode"
|
||
/>
|
||
<label for="themeDark">
|
||
<i data-icon="lightbulb"></i>
|
||
</label>
|
||
</li>
|
||
<li id="themeToggleLight" class="themeToggle">
|
||
<input
|
||
id="themeLight"
|
||
type="checkbox"
|
||
aria-label="Switch between dark and light mode"
|
||
/>
|
||
<label for="themeLight">
|
||
<i data-icon="lightbulb"></i>
|
||
</label>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<main>
|
||
<h1>Glow</h1>
|
||
<h2>Darkmode</h2>
|
||
<p>
|
||
To add the glow to something of a given height (or fontsize), here
|
||
<b>1em</b>, one needs to calculate four values:
|
||
</p>
|
||
<ul>
|
||
<li>An eighth; here 0.125em</li>
|
||
<li>A sixteenth; here 0.0625</li>
|
||
<li>A thirtysecond; here 0.03125</li>
|
||
<li>A sixtyfourth; here 0.015625</li>
|
||
</ul>
|
||
<p>
|
||
The first three values are used for drop-shadows, the last for an
|
||
inset shadow. Sadly, the latter is currently not possible using plain
|
||
CSS filters, which is why it requires the use of an SVG filter
|
||
(further information: see <a href="#notes">Notes</a>).
|
||
</p>
|
||
<p>
|
||
Below you'll find implementation examples using the primary color CSS
|
||
variable for the glow color as specified in our (S)CSS stylesheets. In
|
||
the CSS example simply replace
|
||
<code>--color-primary</code> with <code>--color-secondary</code> to
|
||
use the secondary color. In the SVG example, we don't use CSS
|
||
variables, because not every software understands them.
|
||
</p>
|
||
<ul>
|
||
<li>
|
||
For CSS filters one can simply use the following set of three
|
||
shadows layered atop each other:
|
||
<pre><code><span class="keyword">filter</span><span class="neutral">:</span>
|
||
<span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.03125</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-white</span><span class="neutral">))</span>
|
||
<span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.0625</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-primary</span><span class="neutral">))</span>
|
||
<span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.125</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-primary</span><span class="neutral">));</span></code></pre>
|
||
</li>
|
||
<li>
|
||
For SVG filters instead use the following two filters:
|
||
<pre><code>
|
||
<span class="comment"><!-- this code assumes a font-size of 520 --></span>
|
||
|
||
<span class="neutral"><filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
|
||
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral"> ></span>
|
||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#ffffff"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/></span> <span class="comment"><!-- color-white --></span>
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">></span>
|
||
<span class="neutral"><feMergeNode/></span>
|
||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="neutral">/></span>
|
||
<span class="neutral"></feMerge></span>
|
||
|
||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"32.5"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/></span> <span class="comment"><!-- color-primary --></span>
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">></span>
|
||
<span class="neutral"><feMergeNode/></span>
|
||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/></span>
|
||
<span class="neutral"></feMerge></span>
|
||
|
||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"65"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/></span> <span class="comment"><!-- color-primary --></span>
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_2"</span> <span class="neutral">></span>
|
||
<span class="neutral"><feMergeNode/></span>
|
||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">/></span>
|
||
<span class="neutral"></feMerge></span>
|
||
<span class="neutral"></filter></span>
|
||
|
||
<span class="neutral"><filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
|
||
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral"> ></span>
|
||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#ffffff"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-white"</span> <span class="neutral">/></span> <span class="comment"><!-- color-white --></span>
|
||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="neutral">/></span> <span class="comment"><!-- color-primary --></span>
|
||
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"8.125"</span>
|
||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood-white"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_white"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_white"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"final"</span><span class="neutral">></span>
|
||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/></span>
|
||
<span class="neutral"></feMerge></span>
|
||
<span class="neutral"></filter></span></code></pre>
|
||
</li>
|
||
</ul>
|
||
|
||
<h2>Lightmode</h2>
|
||
<p>
|
||
To add the dim glow to something of a given height (or fontsize), here
|
||
<b>1em</b>, one needs to calculate one value: a thirtysecond; here
|
||
0.03125.
|
||
</p>
|
||
<p>
|
||
The value is needed for both drop shadows and inset shadows. Sadly,
|
||
the latter is currently not possible using plain CSS filters, which is
|
||
why it requires the use of an SVG filter (further information: see
|
||
<a href="#notes">Notes</a>).
|
||
</p>
|
||
<p>
|
||
Below you'll find implementation examples using the primary color CSS
|
||
variable for the glow color as specified in our (S)CSS stylesheets. In
|
||
the CSS example simply replace each occurrence of "primary" with
|
||
"secondary" and "argon" with "krypton" to get a glow of the secondary
|
||
color. In the SVG example, we don't use CSS variables, because not
|
||
every software understands them.
|
||
</p>
|
||
<ul>
|
||
<li>
|
||
For CSS filters one can simply use the following properties:
|
||
<pre><code><span class="keyword">filter</span><span class="neutral">:</span> <span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.03125</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-argon-950</span><span class="neutral">));</span>
|
||
<span class="keyword">color</span><span class="neutral">:</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-argon-800</span><span class="neutral">);</span></code></pre>
|
||
</li>
|
||
<li>
|
||
For SVG filters instead use the following two filters:
|
||
<pre><code>
|
||
<span class="comment"><!-- this code assumes a font-size of 520 --></span>
|
||
|
||
<span class="neutral"><filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
|
||
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral"> ></span>
|
||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#3f012d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/></span> <span class="comment"><!-- color-argon-950 --></span>
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">></span>
|
||
<span class="neutral"><feMergeNode/></span>
|
||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="neutral">/></span>
|
||
<span class="neutral"></feMerge></span>
|
||
<span class="neutral"></filter></span>
|
||
|
||
<span class="neutral"><filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
|
||
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral"> ></span>
|
||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_brighter"</span> <span class="neutral">/></span> <span class="comment"><!-- color-primary --></span>
|
||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#3f012d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="neutral">/></span> <span class="comment"><!-- color-argon-950 --></span>
|
||
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feComponentTransfer</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"reduced_alpha"</span> <span class="neutral">></span>
|
||
<span class="neutral"><feFuncA</span> <span class="identifier">type</span><span class="neutral">=</span><span class="string">"table"</span> <span class="identifier">tableValues</span><span class="neutral">=</span><span class="string">"0 0.5"</span> <span class="neutral">/></span>
|
||
<span class="neutral"></feComponentTransfer></span>
|
||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"reduced_alpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
|
||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_brighter"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_brighter"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_brighter"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"final"</span><span class="neutral">></span>
|
||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/></span>
|
||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/></span>
|
||
<span class="neutral"></feMerge></span>
|
||
<span class="neutral"></filter></span></code></pre>
|
||
</li>
|
||
</ul>
|
||
|
||
<h2 id="notes">Notes</h2>
|
||
<p>
|
||
Because support for external SVG filters (using
|
||
<code>url("filter.svg#filter-id")</code>) is still flaky, we instead
|
||
opted to have two versions of each glow. One using SVG filters for
|
||
use-cases which support it (like the logo), and one using CSS filters
|
||
(as for this page's headings).
|
||
</p>
|
||
<p>
|
||
In the SVG files we use two separate filters, because when combining
|
||
shadows with the primary and the secondary color as can be seen in the
|
||
logo, it is necessary to first add all drop-shadows to all paths using
|
||
<code>style="mix-blend-mode: screen;"</code> and put them in an
|
||
isolated group, so that the blend mode does not interfere with the
|
||
background:<br />
|
||
<code><g style="isolation: isolate;"></code><br />
|
||
Then layer all inset-shadow filters on top of that - otherwise, one
|
||
path's drop shadow might overlay another path's inset-shadow. Have a
|
||
look at the
|
||
<a
|
||
href="https://git.hamburg.ccc.de/EH22/design-public/src/commit/c7eaf8b3bc7e9c6b462aada7685ed83bf36b8978/logo/logo_eventname_glow.svg?display=source#L167"
|
||
>logo's source</a
|
||
>
|
||
for an example.
|
||
</p>
|
||
<p>
|
||
Since inkscape, for example, cannot handle the ‘feDropShadow’ filter
|
||
yet, we use it in its long form as a combination of 5 other filters,
|
||
as described in the
|
||
<a href="https://www.w3.org/TR/filter-effects-1/#feDropShadowElement"
|
||
>SVG Filter Effects Module Level 1 (Working Draft)</a
|
||
>.
|
||
</p>
|
||
</main>
|
||
</div>
|
||
<script
|
||
src="../assets/script/styleguide.js"
|
||
type="text/javascript"
|
||
></script>
|
||
</body>
|
||
</html>
|