Skip to content

Instantly share code, notes, and snippets.

@harimau99

harimau99/animated-svg-logo.markdown

Forked from anonymous/animated-svg-logo.markdown
Created February 28, 2018 03:36
Show Gist options
  • Save harimau99/c6902f5dc520ef4777c7d3cfd09fe9fe to your computer and use it in GitHub Desktop.
Save harimau99/c6902f5dc520ef4777c7d3cfd09fe9fe to your computer and use it in GitHub Desktop.
Download ZIP
Animated SVG Logo
Raw
animated-svg-logo.markdown
Raw
index.html
<div id="outer">
<div id="inner">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 180 195" xml:space="preserve">
<polygon class="bg" fill="#223E98" points="143,10 36,10 36,151 36,151 143,151 "/>
<line class="line vr" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="142" y1="0" x2="142" y2="161"/>
<line class="line vm" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="89" y1="0" x2="89" y2="161"/>
<line class="line vl" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="37" y1="0" x2="37" y2="161"/>
<line class="line ht" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="26" y1="11" x2="153" y2="11"/>
<line class="line hm" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="26" y1="82" x2="153" y2="82"/>
<line class="line hb" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="26" y1="150" x2="153" y2="150"/>
<path class="b" fill="#FFFFFF" d="M35.711,30.729c4.257,0,9.943-0.207,13.395-0.207c10.955,0,20.9,3.852,20.9,17.048
c0,10.75-7.914,15.214-10.351,16.433c-5.071,2.232-15.828,2.232-23.944,2.232V30.729z M35.711,90.382
c15.42-0.41,24.35-0.41,30.239,3.049c5.882,3.65,8.108,10.139,8.108,16.637c0,9.125-5.067,14.811-12.584,17.449 c-6.079,2.029-17.042,2.029-25.763,1.832V90.382z M37.132,152.07c18.867,0.404,42.208,0.814,57.429-9.738 c13.39-9.539,17.039-22.926,17.039-34.291c0-12.986-5.476-24.965-17.039-30.648c-3.861-2.026-8.325-2.839-12.584-3.649 c6.899-2.842,15.015-6.493,20.291-17.247c2.232-4.668,3.242-9.539,3.242-14.208c0-6.491-1.622-15.416-8.107-22.727 C88.875,10.436,75.686,8,55.798,8C48.903,8,36.524,8.204,29.62,8.407L1.215,8.814L0,10.026c0.813,19.482,1.012,26.993,1.012,54.99 c0,28.817-0.199,57.431-0.608,86.239l1.422,0.814H37.132z"/>
<path class="b-outside" fill="none" d="M37.132,152.07c18.867,0.404,42.208,0.814,57.429-9.738c13.39-9.539,17.039-22.926,17.039-34.291 c0-12.986-5.476-24.965-17.039-30.648c-3.861-2.026-8.325-2.839-12.584-3.649c6.899-2.842,15.015-6.493,20.291-17.247 c2.232-4.668,3.242-9.539,3.242-14.208c0-6.491-1.622-15.416-8.107-22.727C88.875,10.436,75.686,8,55.798,8 C48.903,8,36.524,8.204,29.62,8.407L1.215,8.814L0,10.026c0.813,19.482,1.012,26.993,1.012,54.99 c0,28.817-0.199,57.431-0.608,86.239l1.422,0.814H37.132z"/>
<path class="b-inside1" fill="none" d="M35.711,30.729c4.257,0,9.943-0.207,13.395-0.207c10.955,0,20.9,3.852,20.9,17.048 c0,10.75-7.914,15.214-10.351,16.433c-5.071,2.232-15.828,2.232-23.944,2.232V30.729z"/>
<path class="b-inside2" fill="none" d="M35.711,90.382c15.42-0.41,24.35-0.41,30.239,3.049c5.882,3.65,8.108,10.139,8.108,16.637 0,9.125-5.067,14.811-12.584,17.449c-6.079,2.029-17.042,2.029-25.763,1.832V90.382z"/>
<line class="lhb" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="161" y1="189" x2="18" y2="189"/>
<line class="lht" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="161" y1="169" x2="18" y2="169"/>
<line class="lvr" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="154" y1="163" x2="154" y2="195"/>
<line class="lvl" fill="none" stroke="#7A8BC1" stroke-width="3.5" stroke-miterlimit="10" x1="25" y1="163" x2="25" y2="195"/>
<g class="letters" fill="#223E98">
<path class="letterT" d="M152.526,173.527l0.156-0.129l0.182-3.242l-0.131-0.078h-12.836l-0.182,0.155l-0.181,3.19l0.13,0.155 l4.227-0.104c0.026,6.796,0.026,8.43-0.182,14.86l0.155,0.156c1.919-0.078,2.438-0.104,4.59-0.104l0.155-0.155 c-0.13-3.631-0.181-7.262-0.181-10.918c0-1.425,0.026-2.23,0.078-3.889L152.526,173.527z"/>
<path class="letterN" d="M138.212,170.026c-1.634,0.078-2.074,0.104-3.682,0.078l-0.13,0.155l0.181,3.501l0.104,3.579l0.104,4.279 c-0.752-1.271-0.881-1.477-2.205-3.449l-2.36-3.449c-1.944-2.957-2.333-3.526-2.982-4.564l-0.181-0.13 c-2.049,0.104-2.386,0.104-4.279,0.078l-0.13,0.155c0.13,4.02,0.208,7.002,0.208,10.477c0,2.542-0.053,5.083-0.078,7.598 l0.13,0.156c1.737-0.078,2.282-0.078,3.785-0.078l0.131-0.155l-0.26-5.68l-0.078-3.19l-0.156-3.475 c1.219,2.022,1.634,2.696,3.398,5.264l2.593,3.813l2.308,3.371l0.182,0.129c1.582-0.078,2.049-0.078,3.423-0.078l0.13-0.13 c-0.026-3.76-0.053-6.302-0.053-9.415c0-2.904,0.027-5.783,0.053-8.687L138.212,170.026z"/>
<path class="letterI" d="M120.184,170.026c-2.231,0.104-2.827,0.104-4.694,0.078l-0.103,0.155c0.156,2.801,0.233,4.123,0.233,10.737 c0,3.059-0.052,4.642-0.156,7.338l0.13,0.156c1.946-0.078,2.464-0.078,4.616-0.078l0.156-0.155 c-0.13-2.386-0.181-3.579-0.181-7.339c0-3.58,0.051-7.158,0.13-10.737L120.184,170.026z"/>
<path class="letterR" d="M111.529,183.408c-0.829-1.323-1.245-2.023-1.893-3.164c1.167-0.518,3.527-1.607,3.527-4.902 c0-1.141-0.31-3.5-2.437-4.616c-1.349-0.7-2.749-0.726-5.784-0.674l-1.815,0.026h-3.165l-0.13,0.155 c0.104,2.619,0.208,5.316,0.208,12.37c0,2.412-0.026,3.579-0.104,5.732l0.156,0.156c1.893-0.078,2.308-0.104,4.434-0.078 l0.157-0.155c-0.208-3.009-0.234-3.839-0.26-6.925l1.271-0.051c1.738,2.956,2.126,3.734,3.786,7.131l0.208,0.13 c0.804-0.052,1.582-0.104,2.386-0.13c0.805-0.026,1.635-0.052,2.437-0.052l0.156-0.312 C113.682,186.779,113.397,186.39,111.529,183.408z M107.432,177.755c-0.726,0.44-1.66,0.492-2.956,0.518v-5.057 c0.363-0.026,0.726-0.026,1.089-0.026c1.011,0,3.008,0,3.008,2.282C108.572,176.198,108.391,177.158,107.432,177.755z"/>
<path class="letterP" d="M96.151,170.908C94.595,170,92.39,170,90.446,170l-2.282,0.052l-3.293,0.052l-0.155,0.155 c0.103,3.371,0.181,5.628,0.181,8.609c0,3.165-0.078,6.302-0.156,9.466l0.156,0.156c1.919-0.078,2.334-0.104,4.408-0.078 l0.13-0.155c-0.103-2.827-0.103-3.475-0.103-6.121c2.904,0.026,6.016,0.026,7.883-2.256c0.726-0.882,1.348-2.36,1.348-4.175 C98.563,174.59,98.304,172.126,96.151,170.908z M92.546,178.506c-0.699,0.39-1.659,0.441-3.214,0.441v-5.757 c0.57-0.026,1.114-0.026,1.685-0.026c2.282,0.052,2.905,1.218,2.905,2.723C93.921,176.25,93.921,177.755,92.546,178.506z"/>
<path class="letterE" d="M82.847,184.912c-3.06,0.155-3.787,0.181-7.106,0.181l-0.052-4.538h6.068l0.182-0.155l0.156-2.931 l-0.13-0.156l-6.276,0.104v-4.123c2.93,0,3.528,0,6.665,0.077l0.13-0.155l0.181-3.008l-0.13-0.103H71.151l-0.155,0.155 c0.155,2.516,0.207,3.476,0.207,10.426c0,3.267-0.052,4.901-0.131,7.624l0.131,0.104h11.411l0.208-0.155l0.181-3.165 L82.847,184.912z"/>
<path class="letterU" d="M68.685,170.026c-1.893,0.104-2.411,0.104-3.89,0.078l-0.155,0.155c0.13,3.19,0.26,6.38,0.26,9.57 c0,2.722-0.078,3.968-0.778,4.798c-0.57,0.648-1.427,0.933-2.282,0.933c-1.064,0-2.075-0.467-2.646-1.375 c-0.389-0.674-0.544-1.582-0.596-3.216c-0.053-1.375-0.053-2.749-0.053-4.123c0-2.101,0.026-4.097,0.078-6.665l-0.13-0.155 c-2.204,0.104-2.801,0.104-4.564,0.078l-0.155,0.155c0.104,3.709,0.104,4.435,0.13,8.48v1.92c0.077,2.8,0.233,4.201,1.14,5.445 c0.986,1.401,2.983,2.698,6.458,2.698c0.933,0,3.785,0,5.705-2.023c1.375-1.453,1.478-2.957,1.531-6.25v-2.645l0.077-7.702 L68.685,170.026z"/>
<path class="letterL" d="M52.825,184.86c-2.827,0.155-5.084,0.207-5.861,0.207h-0.519c-0.052-6.924-0.026-8.688,0.182-14.885 l-0.156-0.156c-2.23,0.104-2.826,0.104-4.616,0.078l-0.156,0.155c0.104,2.075,0.13,2.697,0.13,5.784 c0,4.098-0.026,8.195-0.026,12.292l0.13,0.156c5.083-0.078,6.016-0.078,10.685-0.078l0.13-0.155l0.207-3.268L52.825,184.86z"/>
<path class="letterB" d="M37.95,178.869c-0.493-0.259-1.064-0.363-1.608-0.466c0.882-0.363,1.919-0.83,2.593-2.204 c0.285-0.596,0.414-1.219,0.414-1.816c0-0.83-0.207-1.97-1.036-2.905c-1.09-1.166-2.775-1.478-5.317-1.478 c-0.881,0-2.463,0.026-3.346,0.052l-3.63,0.052l-0.155,0.155c0.104,2.49,0.129,3.45,0.129,7.028c0,3.683-0.025,7.34-0.078,11.022 l0.182,0.104h4.512c2.411,0.052,5.394,0.104,7.339-1.245c1.711-1.219,2.178-2.93,2.178-4.382 C40.127,181.126,39.427,179.595,37.95,178.869z M30.429,172.905c0.544,0,1.271-0.026,1.712-0.026c1.4,0,2.671,0.492,2.671,2.179 c0,1.374-1.011,1.944-1.323,2.1c-0.648,0.285-2.023,0.285-3.06,0.285V172.905z M33.721,185.275 c-0.777,0.259-2.178,0.259-3.293,0.234v-4.98c1.971-0.053,3.112-0.053,3.865,0.39c0.752,0.466,1.036,1.296,1.036,2.126 C35.33,184.211,34.682,184.938,33.721,185.275z"/>
</g>
</svg>
</div>
</div>
Raw
script.js
var b = $(".b"),
bOut = $(".b-outside"),
bIn1 = $(".b-inside1"),
bIn2 = $(".b-inside2"),
lines = $(".line"),
ht = $(".ht"), hm = $(".hm"), hb = $(".hb"), vl = $(".vl"), vm = $(".vm"), vr = $(".vr"),
bg = $(".bg"),
letters = $(".letters"), letterB = $(".letterB"), letterL = $(".letterL"), letterU = $(".letterU"), letterE = $(".letterE"), letterP = $(".letterP"), letterR = $(".letterR"), letterI = $(".letterI"), letterN = $(".letterN"), letterT = $(".letterT"),
letterBOut = $(".letterBOut"), letterBIn1 = $(".letterBIn1"), letterBIn2 = $(".letterBIn2"),
letterPOut = $(".letterPOut"), letterPIn = $(".letterPIn"),
letterROut = $(".letterROut"), letterRIn = $(".letterRIn"),
lht = $(".lht"), lhb = $(".lhb"), lvl = $(".lvl"), lvr = $(".lvr"),
tl, lettersTL;
lettersTL = new TimelineMax();
lettersTL
.set([letters, letterB, letterL, letterU, letterE, letterP, letterR, letterI, letterN, letterT], {display: "block", fill: "rgba(34, 62, 152, 0)", stroke: "#223e98", strokeWidth: "0.5", drawSVG: "0"})
.set(letterB, {drawSVG: "36% 36%"})
.set(letterL, {drawSVG: "45% 45%"})
.set(letterU, {drawSVG: "47% 47%"})
.set(letterE, {drawSVG: "60% 60%"})
.set(letterP, {drawSVG: "0% 0%"})
.set(letterR, {drawSVG: "0% 0%"})
.set(letterI, {drawSVG: "9% 9%"})
.set(letterN, {drawSVG: "31% 31%"})
.set(letterT, {drawSVG: "25% 25%"})
.to(letterB, 0.7, {drawSVG: "0% 100%", ease: Power2.easeOut})
.to(letterL, 0.5, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.35")
.to(letterU, 0.65, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.4")
.to(letterE, 0.7, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.45")
.to(letterP, 0.6, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.4")
.to(letterR, 0.7, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.45")
.to(letterI, 0.5, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.5")
.to(letterN, 0.7, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.3")
.to(letterT, 0.6, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.25")
;
tl = new TimelineMax({paused: true, delay: 1, repeat: -1, repeatDelay: 1.5});
tl
.set([ht, hm, hb, vl, vm, vr], {display: "block", drawSVG: "0"})
.set(bg, {display: "block", fill: "rgba(34, 62, 152, 0)", scale: "0"})
.set(b, {display: "none"})
.set(lht, {display: "block", strokeWidth: 3, drawSVG: "100% 100%"})
.set(lhb, {display: "block", strokeWidth: 3, drawSVG: "100% 100%"})
.set(lvl, {display: "block", strokeWidth: 3, drawSVG: "0% 0%"})
.set(lvr, {display: "block", strokeWidth: 3, drawSVG: "0% 0%"})
.set(b, {display: "block", opacity: "0"})
.set(bOut, {display: "block", stroke: "#FFF", strokeWidth: "1.5", drawSVG: "63% 63%"})
.set([bIn1, bIn2], {display: "block", stroke: "#FFF", strokeWidth: "1.5", drawSVG: "99% 99%"})
.to(ht, 0.8, {drawSVG: "100%", ease: Power2.easeOut})
.to(hm, 0.8, {drawSVG: "100%", ease: Power2.easeOut}, "-=0.6")
.to(hb, 0.8, {drawSVG: "100%", ease: Power2.easeOut}, "-=0.6")
.to(vl, 0.8, {drawSVG: "100%", ease: Power2.easeOut}, "-=0.5")
.to(vm, 0.8, {drawSVG: "100%", ease: Power2.easeOut}, "-=0.6")
.to(vr, 0.8, {drawSVG: "100%", ease: Power2.easeOut}, "-=0.6")
.to(lht, 0.6, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.4")
.to(lhb, 0.6, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.4")
.to(lvl, 0.6, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.4")
.to(lvr, 0.6, {drawSVG: "0% 100%", ease: Power2.easeOut}, "-=0.4")
.to(bg, 0.75, {fill: "#223E98", scale: "1", transformOrigin: "0, 0", ease: Circ.easeInOut}, "-=0.35")
.to(bOut, 1.85, {drawSVG: "true", ease: Power2.easeOut})
.to(bIn1, 1.5, {drawSVG: "true", ease: Power2.easeOut}, "-=1.25")
.to(bIn2, 1.5, {drawSVG: "true", ease: Power2.easeOut}, "-=1.25")
.to(b, 0.5, {opacity: 1})
.to(vl, 0.5, {opacity: 0}, "-=0.5")
.to([bOut, bIn1, bIn2], 0.75, {opacity: 0}, "-=0.25")
.add(lettersTL, "-=2.5")
.to(letterB, 1.5, {fill: "#223e98"}, "-=0.5")
.to(letterL, 1.5, {fill: "#223E98"}, "-=1.45")
.to(letterU, 1.5, {fill: "#223E98"}, "-=1.45")
.to(letterE, 1.5, {fill: "#223E98"}, "-=1.45")
.to(letterP, 1.5, {fill: "#223E98"}, "-=1.45")
.to(letterR, 1.5, {fill: "#223E98"}, "-=1.45")
.to(letterI, 1.5, {fill: "#223E98"}, "-=1.45")
.to(letterN, 1.5, {fill: "#223E98"}, "-=1.45")
.to(letterT, 1.5, {fill: "#223E98"}, "-=1.45")
.to([lht, lhb, lvl, lvr], 1.5, {opacity: 0}, "-=2")
.to([ht, hm, hb, vm, vr], 1.5, {opacity: 0, delay: 2})
.to([bg, letters], 1.5, {opacity: 0}, "-=0.5")
;
tl.play();
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.scss
$mobile-width: 600px;
$short-monitor: 500px;
@mixin breakpoint($point) {
@if $point == mobile {
@media (max-width: #{$mobile-width}) {
@content;
}
}
@if $point == short-monitor {
@media (max-height: #{$short-monitor}) {
@content;
}
}
}
body {background-color: #FFF;}
div#outer {
width: 600px; overflow: hidden;
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); background-color: #FFF;
@include breakpoint(mobile) {
width: 90%; max-width: 500px;
}
@include breakpoint(short-monitor) {
width: 400px;
}
}
div#inner {
position: relative;
width: 100%; height: 0; padding-bottom: 100%;
@include breakpoint(mobile) {
}
}
svg {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
}
svg * {display: none;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment