EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SVG filters of glow effect for different font sizes

Browse source
This commit is contained in:
lilith 2025-02-12 02:59:41 +01:00
commit 21d165efb1
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
4 changed files with 558 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

319
styleguide/assets/style/glows.svg Normal file
View file

@ -0,0 +1,319 @@
<svg xmlns="http://www.w3.org/2000/svg">
<style>
:root {
--color-white: #ffffff;
--color-primary: #c6257d;
--color-secondary: #4badd8;
}
</style>
<defs>
<filter style="color-interpolation-filters:sRGB;" id="textBlur16Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="2" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.25" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur18Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.5625" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1.125" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="2.25" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.28125" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur24Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.75" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1.5" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="3" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.375" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur32Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="1" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="2" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="4" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur48Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="1.5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="3" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="6" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.75" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur72Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="2.25" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="4.5" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="9" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="1.125" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur160Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="10" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="20" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur16Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="2" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.25" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur18Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.5625" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1.125" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="2.25" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.28125" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur24Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.75" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1.5" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="3" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.375" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur32Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="1" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="2" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="4" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur48Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="1.5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="3" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="6" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.75" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur72Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="2.25" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="4.5" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="9" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="1.125" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur160Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="10" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="20" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 18 KiB