Testing several ways to make a test label readable. Last two solutions by https://stackoverflow.com/questions/58784904/how-to-create-a-blurred-label-background-with-svg-filters/58785393#58785393.
Built with blockbuilder.org
Last active
November 11, 2019 23:39
-
-
Save EE2dev/60ac435cc598ac1d4d8e98253628f704 to your computer and use it in GitHub Desktop.
text label test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| .black { | |
| fill: black; | |
| } | |
| .blue { | |
| fill: blue; | |
| } | |
| .red { | |
| fill: red; | |
| } | |
| .yellow { | |
| fill: yellow; | |
| } | |
| .label{ | |
| fill: black; | |
| font-size: 14px; | |
| } | |
| .label-background{ | |
| fill: white; | |
| font-size: 16px; | |
| } | |
| .text-background{ | |
| paint-order: stroke; | |
| stroke: #fff; | |
| fill: black; | |
| stroke-width: 5px; | |
| } | |
| .header{ | |
| font-size: 20px; | |
| } | |
| .background{ | |
| fill: white; | |
| opacity: 0.6; | |
| } | |
| svg g.row-7 text { | |
| text-shadow: 0px 0px 2px white, | |
| 0px 0px 4px white, | |
| 0px 0px 6px white, | |
| 0px 0px 8px white, | |
| 0px 0px 10px white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="100%" height="100%"> | |
| <defs> | |
| <filter x="-0.05" y="-0.1" width="1.08" height="1.2" id="solid"> | |
| <feFlood flood-color="lightgrey"/> | |
| <feComposite in="SourceGraphic" operator="xor" /> | |
| </filter> | |
| <filter id="shadow"> | |
| <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" /> | |
| <feColorMatrix in="blur" type="matrix" values="0 0 0 0 1 | |
| 0 0 0 0 1 | |
| 0 0 0 0 1 | |
| 0 0 0 8 0" result="white" /> | |
| <feColorMatrix in="white" type="matrix" values="1 0 0 0 0 | |
| 0 1 0 0 0 | |
| 0 0 1 0 0 | |
| 0 0 0 .8 0" result="dim" /> | |
| <feBlend in="SourceGraphic" in2="dim" mode="normal" /> | |
| </filter> | |
| </defs> | |
| <g class="row-1" transform="translate(0,30)"> | |
| <text class="header" x="20" y="-10">text label on top of bar </text> | |
| <g> | |
| <rect class="black" width=100 height=30></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(120,0)"> | |
| <rect class="blue" width=100 height=30></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(240,0)"> | |
| <rect class="red" width=100 height=30></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(360,0)"> | |
| <rect class="yellow" width=100 height=30></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| </g> | |
| <g class="row-2" transform="translate(0,100)"> | |
| <text class="header" x="20" y="-10">text label on top of rect.background on top of bar </text> | |
| <g> | |
| <rect class="black" width=100 height=30></rect> | |
| <rect class="background" x=17 y=6 width=78 height=19></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(120,0)"> | |
| <rect class="blue" width=100 height=30></rect> | |
| <rect class="background" x=17 y=6 width=78 height=19></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(240,0)"> | |
| <rect class="red" width=100 height=30></rect> | |
| <rect class="background" x=17 y=6 width=78 height=19></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(360,0)"> | |
| <rect class="yellow" width=100 height=30></rect> | |
| <rect class="background" x=17 y=6 width=78 height=19></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| </g> | |
| <g class="row-3" transform="translate(0, 170)"> | |
| <text class="header" x="20" y="-10">text label with filter #solid on top of bar </text> | |
| <g> | |
| <rect class="black" width=100 height=30></rect> | |
| <text class="label" filter="url(#solid)" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(120,0)"> | |
| <rect class="blue" width=100 height=30></rect> | |
| <text class="label" filter="url(#solid)" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(240,0)"> | |
| <rect class="red" width=100 height=30></rect> | |
| <text class="label" filter="url(#solid)" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(360,0)"> | |
| <rect class="yellow" width=100 height=30></rect> | |
| <text class="label" filter="url(#solid)" x="20" y="20">my text label</text> | |
| </g> | |
| </g> | |
| <g class="row-4" transform="translate(0, 240)"> | |
| <text class="header" x="20" y="-10">text label on top of larger text label with background color on top of bar </text> | |
| <g> | |
| <rect class="black" width=100 height=30></rect> | |
| <text class="label-background" x="18" y="22">my text label</text> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(120,0)"> | |
| <rect class="blue" width=100 height=30></rect> | |
| <text class="label-background" x="18" y="22">my text label</text> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(240,0)"> | |
| <rect class="red" width=100 height=30></rect> | |
| <text class="label-background" x="18" y="22">my text label</text> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(360,0)"> | |
| <rect class="yellow" width=100 height=30></rect> | |
| <text class="label-background" x="18" y="22">my text label</text> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| </g> | |
| <g class="row-5" transform="translate(0, 310)"> | |
| <text class="header" x="20" y="-10">text label with paint-order: stroke on top of bar </text> | |
| <g> | |
| <rect class="black" width=100 height=30></rect> | |
| <text class="label text-background" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(120,0)"> | |
| <rect class="blue" width=100 height=30></rect> | |
| <text class="label text-background" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(240,0)"> | |
| <rect class="red" width=100 height=30></rect> | |
| <text class="label text-background" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(360,0)"> | |
| <rect class="yellow" width=100 height=30></rect> | |
| <text class="label text-background" x="20" y="20">my text label</text> | |
| </g> | |
| </g> | |
| <g class="row-6" transform="translate(0,380)"> | |
| <text class="header" x="0" y="-10">feGaussianBlur on SourceAlpha</text> | |
| <g> | |
| <rect class="black" width=100 height=30></rect> | |
| <text class="label" x="20" y="20" filter="url(#shadow)">my text label</text> | |
| </g> | |
| <g transform="translate(120,0)"> | |
| <rect class="blue" width=100 height=30></rect> | |
| <text class="label" x="20" y="20" filter="url(#shadow)">my text label</text> | |
| </g> | |
| <g transform="translate(240,0)"> | |
| <rect class="red" width=100 height=30></rect> | |
| <text class="label" x="20" y="20" filter="url(#shadow)">my text label</text> | |
| </g> | |
| <g transform="translate(360,0)"> | |
| <rect class="yellow" width=100 height=30></rect> | |
| <text class="label" x="20" y="20" filter="url(#shadow)">my text label</text> | |
| </g> | |
| </g> | |
| <g class="row-7" transform="translate(0,450)"> | |
| <text class="header" x="20" y="-10">text label on top of bar </text> | |
| <g> | |
| <rect class="black" width=100 height=30></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(120,0)"> | |
| <rect class="blue" width=100 height=30></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(240,0)"> | |
| <rect class="red" width=100 height=30></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| <g transform="translate(360,0)"> | |
| <rect class="yellow" width=100 height=30></rect> | |
| <text class="label" x="20" y="20">my text label</text> | |
| </g> | |
| </g> | |
| </svg> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment