|
<div class="centered"><div class="hauser" data-text="HAUSER">HAUSER</div></div> |
|
|
|
|
|
<svg> |
|
<defs> |
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="backGradientFill"> |
|
<stop offset="0%" style="stop-color: #191c2b; stop-opacity: 100%;" /> |
|
<stop offset="25%" style="stop-color: #191c2b; stop-opacity: 100%;" /> |
|
<stop offset="48%" style="stop-color: #191c2b; stop-opacity: 100%;" /> |
|
<stop offset="75%" style="stop-color: #949ec0; stop-opacity: 100%;" /> |
|
<stop offset="80%" style="stop-color: #b0cefd; stop-opacity: 100%;" /> |
|
|
|
<stop offset="100%" style="stop-color: white; stop-opacity: 0%;" /> |
|
</linearGradient> |
|
|
|
<linearGradient x1="50%" y1="100%" x2="50%" y2="-10%" id="frontGradientFill"> |
|
<stop offset="0%" style="stop-color: white; stop-opacity: 100%;" /> |
|
<stop offset="5%" style="stop-color: white; stop-opacity: 100%;" /> |
|
<stop offset="17%" style="stop-color: #cfe1fd; stop-opacity: 100%;" /> |
|
<stop offset="22%" style="stop-color: #949ec0; stop-opacity: 100%;" /> |
|
<stop offset="26%" style="stop-color: #191c2b; stop-opacity: 100%;" /> |
|
<stop offset="28%" style="stop-color: #191c2b; stop-opacity: 100%;" /> |
|
<stop offset="30%" style="stop-color: white; stop-opacity: 100%;" /> |
|
<stop offset="40%" style="stop-color: white; stop-opacity: 100%;" /> |
|
<stop offset="50%" style="stop-color: #191c2b; stop-opacity: 100%;" /> |
|
</linearGradient> |
|
|
|
<linearGradient x1="50%" y1="25%" x2="50%" y2="90%" id="strokeGradientFill"> |
|
<stop offset="0%" style="stop-color: white; stop-opacity: 100%;" /> |
|
<stop offset="25%" style="stop-color: white; stop-opacity: 100%;" /> |
|
<stop offset="35%" style="stop-color: #8ae7ee; stop-opacity: 100%;" /> |
|
<stop offset="59%" style="stop-color: #485790; stop-opacity: 100%;" /> |
|
<stop offset="80%" style="stop-color: #8ae7ee; stop-opacity: 100%;" /> |
|
<stop offset="100%" style="stop-color: white; stop-opacity: 0%;" /> |
|
</linearGradient> |
|
|
|
<rect id="gradient1" x="0%" y="10%" width="100%" height="55%" style="fill: url(#backGradientFill);" /> |
|
<rect id="gradient2" x="0%" y="0" width="100%" height="100%" style="fill: url(#frontGradientFill);" /> |
|
<rect id="gradient3" x="0%" y="0" width="100%" height="100%" style="fill: url(#strokeGradientFill);" /> |
|
|
|
<filter id="backGradient"> |
|
<feImage xlink:href="#gradient1" result="grad"/> |
|
<feComposite operator="atop" in2="SourceGraphic" in="thickened" result="stroke"/> |
|
<feMerge> |
|
|
|
<feMergeNode in="sourceGraphic"></feMergeNode> |
|
<feMergeNode in="stroke"></feMergeNode> |
|
</feMerge> |
|
</filter> |
|
<filter id="frontGradient"> |
|
<feImage xlink:href="#gradient2" result="grad"/> |
|
<feTurbulence type="fractalNoise" baseFrequency="0.07" |
|
numOctaves="1" result="turbulence"/> |
|
<feDisplacementMap in2="turbulence" in="grad" |
|
scale="10" /> |
|
<feComposite operator="in" in2="SourceGraphic" in="thickened" result="stroke"/> |
|
</filter> |
|
|
|
<filter id="stroke"> |
|
<!-- <feFlood flood-color="#dadde5" result="strokeColor" /> --> <feImage xlink:href="#gradient3" result="strokeColor"/> |
|
<feMorphology operator="dilate" radius="1" |
|
in="SourceGraphic" result="outside" /> |
|
<feMorphology operator="dilate" radius="2" |
|
in="outside" result="thickened" /> |
|
<feComposite operator="out" in2="SourceGraphic" in="thickened" result="stroke"/> |
|
<feComposite operator="in" in="strokeColor" in2="stroke" result="stroke"/> |
|
<feMerge> |
|
<feMergeNode in="SourceGraphic"></feMergeNode> |
|
<feMergeNode in="stroke"></feMergeNode> |
|
</feMerge> |
|
|
|
</filter> |
|
|
|
<filter id="innerGlow" > |
|
<feFlood flood-color="#c45cff"/> |
|
<feComposite in2="SourceGraphic" operator="out"/> |
|
<feGaussianBlur stdDeviation="5" result="blur"/> |
|
<feComposite operator="atop" in2="SourceGraphic" result="glow"/> |
|
<feBlend in="SourceGraphic" in2="glow" mode="screen"></feBlend> |
|
</filter> |
|
|
|
<filter id="outerGlow" > |
|
<!-- Thicken out the original shape --> |
|
<feMorphology operator="dilate" radius="10" in="SourceAlpha" result="thicken" /> |
|
|
|
<!-- Use a gaussian blur to create the soft blurriness of the glow --> |
|
<feGaussianBlur in="thicken" stdDeviation="20" result="blurred" /> |
|
|
|
<!-- Change the colour --> |
|
<feFlood flood-color="#395086" 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> |
|
|
|
<filter id="noise" x="0vw" y="0vh" width="100vw" height="100vh"> |
|
<feFlood flood-color="#808080" result="neutral-gray" /> |
|
<feTurbulence in="neutral-gray" type="fractalNoise" baseFrequency="0.8" numOctaves="10" stitchTiles="stitch" result="noise"/> |
|
<feColorMatrix in="noise" type="saturate" values="0" result="destaturatedNoise"></feColorMatrix> |
|
<feComponentTransfer in="desaturatedNoise" result="theNoise"> |
|
<feFuncA type="table" tableValues="0 0 0.2 0"></feFuncA> |
|
</feComponentTransfer> |
|
<feBlend in="SourceGraphic" in2="theNoise" mode="soft-light" result="noisy-image"/> |
|
</filter> |
|
</defs> |
|
</svg> |
don't work first gradient