A Pen by Pedro Tavares on CodePen.
Created
August 6, 2018 23:41
-
-
Save lukeeey/fe79f682d06056205e1907a350c15524 to your computer and use it in GitHub Desktop.
SVG Effect: Outer Glow
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
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"> | |
<defs> | |
<filter id="sofGlow" height="300%" width="300%" x="-75%" y="-75%"> | |
<!-- Thicken out the original shape --> | |
<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken" /> | |
<!-- Use a gaussian blur to create the soft blurriness of the glow --> | |
<feGaussianBlur in="thicken" stdDeviation="10" result="blurred" /> | |
<!-- Change the colour --> | |
<feFlood flood-color="rgb(0,186,255)" result="glowColor" /> | |
<!-- Color in the glows --> | |
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" /> | |
<!-- Layer the effects together --> | |
<feMerge> | |
<feMergeNode in="softGlow_colored"/> | |
<feMergeNode in="SourceGraphic"/> | |
</feMerge> | |
</filter> | |
</defs> | |
<rect x="25%" y="37.25%" width="50%" height="25%" fill="white" filter="url(#sofGlow)" /> | |
</svg> |
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
svg { | |
background: gray; | |
position: absolute; | |
height: 75%; | |
width: auto; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment