Skip to content

Instantly share code, notes, and snippets.

@kevinkace

kevinkace/banner.svg

Created December 29, 2018 21:06
Show Gist options
  • Save kevinkace/7114e932263315b88d29b77fe65fbefc to your computer and use it in GitHub Desktop.
Save kevinkace/7114e932263315b88d29b77fe65fbefc to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
banner.svg
<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