Instantly share code, notes, and snippets.
Created
December 29, 2018 21:06
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save kevinkace/7114e932263315b88d29b77fe65fbefc to your computer and use it in GitHub Desktop.
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 class="banner" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 158" width="1200" height="158"> | |
<defs> | |
<style> | |
.flowerTexture-stroke { | |
fill: none; | |
stroke: #15274c; | |
stroke-width: 0.7px; | |
opacity: 0.7; | |
} | |
.background { | |
fill: url(#bgGradient); | |
} | |
#stars path { | |
} | |
.star { | |
fill: #fff; | |
} | |
.starFade { | |
fill: #fff; | |
opacity: 0.2; | |
} | |
.twinkle use { | |
animation: twinkle 1s infinite alternate; | |
} | |
@keyframes twinkle { | |
0% { opacity: 0.5; } | |
30% { opacity: 1; } | |
60% { opacity: 1; } | |
80% { opacity: 0.7; } | |
100% { opacity: 1; } | |
} | |
.softBlue { | |
fill: #375f8e; | |
opacity: 0.6; | |
} | |
.blue { | |
fill: #48789f; | |
} | |
.planet1 { | |
fill: url(#planet1Texture); | |
} | |
.planet1Texture-fill { | |
fill: #13274b; | |
} | |
.planet1Texture-line { | |
fill: none; | |
stroke: #1b3967; | |
stroke-width: 3px; | |
} | |
.planet2 { | |
fill: url(#planet2Texture); | |
} | |
.planet2Texture-line { | |
fill: none; | |
stroke: #375f8e; | |
} | |
.planet2Texture-fill { | |
fill: #2a4b7b; | |
} | |
.planet3 { | |
fill: url(#planet3Texture); | |
} | |
.planet3Fill { | |
fill: #15274c; | |
} | |
.planet3Texture-line { | |
fill: #fff; | |
stroke: #294d7c; | |
stroke-width: 2px; | |
} | |
.planet4 { | |
fill: #0f4068; | |
} | |
#clouds path { | |
animation: infinite 120s cloud linear; | |
animation-delay: -60s; | |
} | |
.shootingStar { | |
fill: #62c8f2; | |
opacity: 0.45; | |
} | |
.shoot1 { | |
animation: shoot1 4s infinite linear; | |
} | |
.shoot2 { | |
opacity: 0; | |
animation: shoot2 5s infinite linear; | |
} | |
@keyframes shoot1 { | |
0% { | |
transform: translate(900px, -50px); | |
opacity: 0; | |
} | |
100% { | |
transform: translate(-300px, 50px); | |
opacity: 1; | |
} | |
} | |
@keyframes shoot2 { | |
70% { | |
transform: translate(800px, 140px); | |
opacity: 0; | |
} | |
100% { | |
transform: translate(-400px, -70px); | |
opacity: 1; | |
} | |
} | |
@keyframes cloud { | |
0% { | |
transform: translateX(1000px); | |
} | |
100% { | |
transform: translateX(-1000px); | |
} | |
} | |
</style> | |
<filter id="blur"> | |
<feGaussianBlur in="SourceGraphic" stdDeviation="1" /> | |
</filter> | |
<linearGradient id="bgGradient" x1="690.47" y1="829.54" x2="690.47" y2="641.54" gradientTransform="translate(-89.47 -654.54)" | |
gradientUnits="userSpaceOnUse"> | |
<stop offset="0" stop-color="#112852" /> | |
<stop offset="1" stop-color="#243b7a" /> | |
</linearGradient> | |
<pattern id="planet1Texture" width="72" height="72" patternTransform="translate(-45.72 49.24) scale(0.22)" patternUnits="userSpaceOnUse" viewBox="0 0 72 72"> | |
<g class="planet1Texture-fill"> | |
<circle cx="36" cy="25.16" r="14.31" /> | |
<circle cx="36" cy="48.77" r="14.31" /> | |
<circle cx="21.69" cy="38.18" r="14.31" /> | |
<circle cx="50.31" cy="38.18" r="14.31" /> | |
</g> | |
<g class="planet1Texture-line"> | |
<line x1="45.47" y1="28.22" x2="26.59" y2="48.15" /> | |
<line x1="26.56" y1="28.22" x2="45.44" y2="48.15" /> | |
</g> | |
</pattern> | |
<pattern id="planet2Texture" width="26.54" height="23.33" xmlns="http://www.w3.org/2000/svg" patternUnits="userSpaceOnUse" viewBox="0 0 26.54 23.33"> | |
<rect class="planet2Texture-fill" x="0" y="0" width="26.54" height="23.33" /> | |
<g class="planet2Texture-line"> | |
<path class="cls-1" d="M4.1,22.7c0-3.65,4.05-6.6,9.05-6.6s9.06,2.95,9.06,6.6" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M.38,22.56c0-6,5.72-10.83,12.77-10.83s12.78,4.85,12.78,10.83" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M9,22.63a5.29,5.29,0,0,1,4.17-1.89,5.28,5.28,0,0,1,4.18,1.9" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M.08,4.72c5,0,9.05,3,9.05,6.6" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M.08.35C7.13.35,12.85,5.2,12.85,11.18" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M.08,9.37c2.76,0,5,1.9,5,4.25" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M16.87,11.32c0-3.64,4.06-6.6,9.06-6.6" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M13.15,11.18c0-6,5.72-10.83,12.78-10.83" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M20.92,13.62c0-2.35,2.24-4.25,5-4.25" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M22.18.06a4.71,4.71,0,0,1,0,.53" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M4.1.59a4.53,4.53,0,0,1,0-.52" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M17,.11a3.86,3.86,0,0,1,1.22,2.77" transform="translate(0.27 0.28)" /> | |
<path class="cls-1" d="M8.14,2.88A3.89,3.89,0,0,1,9.37.1" transform="translate(0.27 0.28)" /> | |
</g> | |
</pattern> | |
<pattern id="planet3Texture" width="13.41" height="22.5" patternTransform="scale(0.8)" patternUnits="userSpaceOnUse" viewBox="0 0 13.41 17.89"> | |
<g class="planet3Texture-line"> | |
<line x1="7.41" y1="0.69" x2="8.85" y2="2.13"/> | |
<line x1="11.28" y1="4.57" x2="12.72" y2="6.01"/> | |
<line x1="7.41" y1="6.01" x2="8.85" y2="4.57"/> | |
<line x1="11.28" y1="2.13" x2="12.72" y2="0.69"/> | |
<line x1="0.69" y1="11.88" x2="2.13" y2="13.33"/> | |
<line x1="4.57" y1="15.76" x2="6.01" y2="17.2"/> | |
<line x1="0.69" y1="17.2" x2="2.13" y2="15.76"/> | |
<line x1="4.57" y1="13.33" x2="6.01" y2="11.88"/> | |
</g> | |
</pattern> | |
<path id="starShape" class="star" d="M299,16a2.84,2.84,0,0,1,2.64,2.56A2.85,2.85,0,0,1,304.26,16a2.85,2.85,0,0,1-2.65-2.55A2.83,2.83,0,0,1,299,16Z" /> | |
<g id="flower"> | |
<path class="blue" d="M19.91,15.83a2,2,0,0,0,.58-3.25c-1.55-1.57-3.33.08-3.33.08A2.33,2.33,0,0,0,14,10.86c-2.17.94-1.11,3.6-1.11,3.6a2,2,0,0,0-1.95,3c1,3,2.75,1.42,2.75,1.42s-.22,2.92,2,2.92c0,0,2.4-.31,1.73-2.3a2.56,2.56,0,0,0,3.42.17c2.08-1.33,0-3.5-.42-3.65Z" | |
transform="translate(-10.7 -10.7)" /> | |
<circle class="flowerTexture-stroke" cx="5.49" cy="5.38" r="1.24" /> | |
<g class="flowerTexture-stroke"> | |
<line x1="4.78" y1="4.37" x2="3.89" y2="2.49" /> | |
<line x1="5.49" y1="4.14" x2="4.99" y2="2.01" /> | |
<line x1="6.34" y1="4.48" x2="7.94" y2="2.75" /> | |
<line x1="6.67" y1="4.99" x2="8.68" y2="4.02" /> | |
<line x1="6.67" y1="5.78" x2="9.1" y2="6.63" /> | |
<line x1="6.42" y1="6.2" x2="8.18" y2="7.69" /> | |
<line x1="4.99" y1="6.63" x2="4.34" y2="8.78" /> | |
<line x1="5.49" y1="6.63" x2="5.67" y2="8.78" /> | |
<line x1="4.25" y1="5.38" x2="2.15" y2="4.99" /> | |
<line x1="4.25" y1="5.92" x2="2.15" y2="6.63" /> | |
</g> | |
</g> | |
<g id="star"> | |
<circle class="starFade" cx="301.5" cy="16" r="3" filter="url(#blur)"></circle> | |
<use class="star" xlink:href="#starShape" /> | |
</g> | |
</defs> | |
<title>Banner</title> | |
<rect class="background" x="-13.5" y="-13" width="1229" height="188" /> | |
<!-- stars --> | |
<g class="twinkle"> | |
<use xlink:href="#star" style="animation-delay: 0.5s" transform="translate(-226 18)" /> | |
<use xlink:href="#star" style="animation-duration:2s;" transform="translate(0 0)" /> | |
<use xlink:href="#star" style="animation-delay: 0.5s" transform="translate(-345 20) scale(2.2)" /> | |
<use xlink:href="#star" style="animation-duration:2s;" transform="translate(247 118)" /> | |
<use xlink:href="#star" transform="translate(391 4)" /> | |
<use xlink:href="#star" style="animation-duration: 3s" transform="translate(393 120)" /> | |
<use xlink:href="#star" style="animation-delay: 0.9s" transform="translate(158 27) scale(2.2)" /> | |
<use xlink:href="#star" style="animation-delay: 4s" transform="translate(765 94)" /> | |
<use xlink:href="#star" style="animation-duration: 2s" transform="translate(850 92)" /> | |
</g> | |
<g> | |
<use xlink:href="#flower" transform="translate(240 70)" /> | |
<use xlink:href="#flower" transform="translate(420 60)" /> | |
<use xlink:href="#flower" transform="translate(790 110)" /> | |
<use xlink:href="#flower" transform="translate(1000 70)" /> | |
</g> | |
<g id="clouds"> | |
<path class="softBlue" d="M427.59,130.74h-58c-3.41,0-6.19-2.27-6.19-5s2.78-5,6.19-5h21.94c3.4,0,6.19-2.27,6.19-5s-2.79-5-6.19-5h-58c-3.41,0-6.2-2.26-6.2-5s2.79-5,6.2-5H353c3.41,0,6.2-2.27,6.2-5s-2.79-5-6.2-5H277.32c-3.4,0-6.19,2.27-6.19,5s2.79,5,6.19,5h4c3.41,0,6.2,2.26,6.2,5s-2.79,5-6.2,5H249.46c-3.41,0-6.19,2.27-6.19,5s2.78,5,6.19,5h67.93c3.41,0,6.2,2.26,6.2,5s-2.79,5-6.2,5H285.56c-3.41,0-6.19,2.27-6.19,5s2.78,5,6.19,5h142c3.4,0,6.19-2.27,6.19-5S431,130.74,427.59,130.74Z" /> | |
<path class="softBlue" d="M900.12,18.22H838a5.41,5.41,0,0,1,0-10.81h27.15A5.42,5.42,0,0,0,870.55,2a5.42,5.42,0,0,0-5.41-5.4H743.84A5.42,5.42,0,0,0,738.43,2a5.43,5.43,0,0,0,5.41,5.41h72.55a5.4,5.4,0,0,1,0,10.79H804.31a5.41,5.41,0,0,0,0,10.81h95.81a5.41,5.41,0,1,0,0-10.81Z" /> | |
</g> | |
<!-- planet 1 --> | |
<circle class="planet1" cx="110.1" cy="168.04" r="104.54" /> | |
<!-- planet 2 --> | |
<circle class="planet2" cx="223.96" cy="7.34" r="50.77" /> | |
<!-- planet 3 --> | |
<circle class="planet3Fill" cx="454.46" cy="3.97" r="36.49" /> | |
<circle class="planet3" cx="454.46" cy="3.97" r="36.49" /> | |
<!-- planet 4 --> | |
<circle class="planet4" cx="1091.05" cy="20.1" r="60.77" /> | |
<path class="softBlue" d="M1027.64,15.12c-18,.51-34.71,2.79-36.8,7-4.26,8.65,34.23,21.07,86.59,28.37s100.73,7.26,105-1.39c2.06-4.19-10.56-10.4-25.42-15.48L1157,36.1c6.89,3,10.08,6.41,8.9,8.81-3.31,6.71-40.8,7.21-84.65,1.1S1005,29.51,1008.3,22.8c1.22-2.48,7.92-4.54,17.15-5.3Z" /> | |
<g id="shooting"> | |
<path class="shootingStar shoot1" d="M161,106.89c16.43-1.89,43.57-5.65,43.57-5.65s-27.68,4.8-43.19,8c-6.7,1.39-16.11,1.83-16.21,1.17S152.36,107.89,161,106.89Z" /> | |
<path class="shootingStar shoot2" d="M586,23.7c14,2.66,37.2,6.45,37.2,6.45s-24-2.93-37.53-4.06c-5.86-.48-13.68-2.63-13.59-3.29S578.66,22.3,586,23.7Z" /> | |
</g> | |
</svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment