Created
March 2, 2022 17:15
-
-
Save loretoparisi/82ec3a701be0b87f71073b77487104ad to your computer and use it in GitHub Desktop.
SVG Lighting Effects With The feDiffuseLighting Filter Primitive
This file contains hidden or 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
| /* Add the seed attribute and set it to a random integer in <feTurbulence> to create your own variant! */ | |
| html, | |
| body, | |
| object { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| div { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #mainContainer { | |
| position: relative; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| #topContainer { | |
| border: 0; | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| bottom: 0; | |
| height: calc(100%-100); | |
| width: 100%; | |
| } | |
| #bottomContainer { | |
| border: 0; | |
| position: absolute; | |
| bottom: 0px; | |
| left: 0px; | |
| height: 50%; | |
| width: 100%; | |
| } | |
| svg { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } |
This file contains hidden or 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> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CodePen - #Ukraine</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| body > svg { | |
| display: block; | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| .bmc { | |
| position: fixed; | |
| bottom: 10px; | |
| right: 10px; | |
| } | |
| </style><link rel="stylesheet" href="ukraine.css"> | |
| </head> | |
| <body> | |
| <!-- partial:index.partial.html --> | |
| <div id="mainContainer"> | |
| <div id="topContainer"> | |
| <svg xmlns="http://www.w3.org/2000/svg"> | |
| <filter id="strong_azure"> | |
| <feTurbulence type="fractalNoise" baseFrequency=".08" numOctaves="5" /> | |
| <feComponentTransfer result="n"> | |
| <feFuncA type="gamma" exponent="4" /> | |
| </feComponentTransfer> | |
| <feDiffuseLighting lighting-color="#0057b7" surfaceScale="3" result="d"> | |
| <feDistantLight azimuth="90" elevation="45" /> | |
| </feDiffuseLighting> | |
| <feSpecularLighting in="n" specularExponent="64"> | |
| <feDistantLight azimuth="90" elevation="45" /> | |
| </feSpecularLighting> | |
| <feBlend in2="d" /> | |
| </filter> | |
| <rect width="100%" height="100%" preserveAspectRatio="none" filter="url(#strong_azure)" /> | |
| </svg> | |
| </div> | |
| <div id="bottomContainer"> | |
| <svg xmlns="http://www.w3.org/2000/svg"> | |
| <filter id="yellow"> | |
| <feTurbulence type="fractalNoise" baseFrequency=".08" numOctaves="5" /> | |
| <feComponentTransfer result="n"> | |
| <feFuncA type="gamma" exponent="4" /> | |
| </feComponentTransfer> | |
| <feDiffuseLighting lighting-color="#ffd700" surfaceScale="3" result="d"> | |
| <feDistantLight azimuth="90" elevation="45" /> | |
| </feDiffuseLighting> | |
| <feSpecularLighting in="n" specularExponent="64"> | |
| <feDistantLight azimuth="90" elevation="45" /> | |
| </feSpecularLighting> | |
| <feBlend in2="d" /> | |
| </filter> | |
| <rect width="100%" height="100%" preserveAspectRatio="none" filter="url(#yellow)" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Author
loretoparisi
commented
Mar 2, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment