Created
August 11, 2015 16:44
-
-
Save anonymous/d8995cd9f0eb643873e3 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/tadiyojomu
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| @mixin dash($width) { | |
| stroke-dasharray: $width; | |
| stroke-dashoffset: $width; | |
| } | |
| @keyframes drop { | |
| from { | |
| transform-origin: center; | |
| transform: scale(0); | |
| } | |
| 50% { | |
| transform: scale(1.5); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes draw { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| @keyframes slide { | |
| 50% { | |
| transform: scaleY(1); | |
| } | |
| 75% { | |
| transform: scaleY(0.5); | |
| } | |
| 100% { | |
| transform: scaleY(1); | |
| } | |
| } | |
| body { | |
| max-width: 500px; | |
| margin: 2em auto; | |
| } | |
| .logo__outside { | |
| @include dash(411); | |
| stroke-linejoin: round; | |
| animation: draw 1s linear forwards; | |
| } | |
| .logo__inside { | |
| @include dash(500); | |
| animation: draw 1s linear forwards; | |
| } | |
| .logo__left-eye, | |
| .logo__right-eye { | |
| transform-origin: center; | |
| transform: scaleY(0); | |
| animation: slide 250ms ease-in-out 1.25s forwards; | |
| } | |
| .logo__nose { | |
| transform-origin: center; | |
| transform: scale(2); | |
| opacity: 0; | |
| animation: fadeIn 250ms ease-out 1s forwards, | |
| drop 250ms ease-out 1s forwards; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg viewBox="0 0 119 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> | |
| <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> | |
| <g class="logo" sketch:type="MSLayerGroup" transform="translate(1.000000, 2.000000)" stroke="#0083FF" stroke-width="2"> | |
| <!-- left eye --> | |
| <path class="logo__path logo__left-eye" d="M38.23681,100.548713 C38.6244444,99.49875 38.8239068,98.3557366 38.7912903,97.1624256 C38.6558065,92.3036756 34.5599283,88.345253 29.711362,88.3817188 C24.7624373,88.4181845 20.7618996,92.4495387 20.7618996,97.4189435 C20.7618996,98.5242336 20.961362,99.5829985 21.3239068,100.561287 C21.5973835,101.299405 22.3124373,101.77849 23.0977419,101.77849 L36.4567025,101.77849 C37.2470251,101.77849 37.9620789,101.29186 38.23681,100.548713" id="eyeLeft" sketch:type="MSShapeGroup"></path> | |
| <!-- right eye --> | |
| <path class="logo__path logo__right-eye" d="M96.0706093,100.601525 C96.6464158,99.1755878 96.8508961,97.5610342 96.5498208,95.8672619 C95.9225806,92.3502009 93.0962366,89.5461086 89.5774194,88.9739732 C84.2270609,88.1038244 79.6043011,92.2206845 79.6043011,97.4189435 C79.6043011,98.5468676 79.8263441,99.6207217 80.2240143,100.605298 C80.5125448,101.319524 81.2125448,101.779747 81.9802867,101.779747 L94.311828,101.779747 C95.0808244,101.779747 95.7820789,101.317009 96.0706093,100.601525" id="eyeRight" sketch:type="MSShapeGroup"></path> | |
| <!-- outside --> | |
| <path class="logo__path logo__outside" d="M57.3862007,139.504219 L2.05860215,107.333862 C1.25824373,106.869866 0.766487455,106.012292 0.767741935,105.085558 L0.848028674,41.3061652 C0.848028674,40.3844613 1.33727599,39.5319167 2.13136201,39.0679211 L67.6403226,0.715986607 L67.6403226,11.5425491 L115.301792,38.9773854 C116.105914,39.4401235 116.602688,40.2989554 116.602688,41.2282039 L116.602688,105.08933 C116.602688,106.014807 116.110932,106.871124 115.311828,107.335119 L59.9854839,139.504219 C59.181362,139.970729 58.1903226,139.970729 57.3862007,139.504219 L57.3862007,139.504219 Z" id="outside" sketch:type="MSShapeGroup"></path> | |
| <!-- inside --> | |
| <path class="logo__path logo__inside" d="M50.0256631,129.025045 L56.4329211,132.750841 L56.4329211,117.652753 C56.4329211,116.338728 57.4942115,115.273676 58.8051434,115.273676 C60.1160753,115.273676 61.1773656,116.338728 61.1773656,117.652753 L61.1773656,132.611265 L68.059319,128.610089 L68.059319,115.273676 C68.059319,113.960908 69.1206093,112.895856 70.4315412,112.895856 C71.7424731,112.895856 72.8037634,113.960908 72.8037634,115.273676 L72.8037634,125.851265 L79.8577061,121.749494 L79.8577061,115.022187 C79.8577061,112.395394 81.9827957,110.26529 84.603405,110.26529 L99.6082437,110.26529 L109.097133,104.747641 C109.896237,104.282388 110.387993,103.427329 110.387993,102.501853 L110.387993,45.8332857 C110.387993,44.9040372 109.892473,44.0452054 109.087097,43.5824673 L62.7252688,16.895808 C61.921147,16.4330699 61.4256272,15.5742381 61.4256272,14.6449896 L61.4256272,12.5676979 L8.34229391,43.6465967 C7.54820789,44.1105923 7.06021505,44.9631369 7.05896057,45.8848408 L6.98870968,102.501853 C6.9874552,103.428586 7.47921147,104.284903 8.27831541,104.750156 L17.7626882,110.26529 L33.7172939,110.26529 C36.3379032,110.26529 38.4629928,112.395394 38.4629928,115.022187 L38.4629928,122.30151 L45.2812186,126.26622 L45.2812186,115.273676 C45.2812186,113.960908 46.342509,112.895856 47.6534409,112.895856 C48.9643728,112.895856 50.0256631,113.960908 50.0256631,115.273676 L50.0256631,129.025045 L50.0256631,129.025045 Z" id="inside" sketch:type="MSShapeGroup"></path> | |
| <!-- nose --> | |
| <path class="logo__path logo__nose" d="M54.9188889,106.4109 L63.3449821,106.4109 C64.2268817,106.4109 64.8001792,105.480394 64.4050179,104.689464 L61.146129,98.1545461 C60.257957,96.3740104 57.7126165,96.4092187 56.8733692,98.2123884 L53.8437993,104.718385 C53.4762366,105.506801 54.0507885,106.4109 54.9188889,106.4109 L54.9188889,106.4109 Z" id="nose" sketch:type="MSShapeGroup"></path> | |
| </g> | |
| </g> | |
| </svg> | |
| <script id="jsbin-source-css" type="text/css">@mixin dash($width) { | |
| stroke-dasharray: $width; | |
| stroke-dashoffset: $width; | |
| } | |
| @keyframes drop { | |
| from { | |
| transform-origin: center; | |
| transform: scale(0); | |
| } | |
| 50% { | |
| transform: scale(1.5); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes draw { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| @keyframes slide { | |
| 50% { | |
| transform: scaleY(1); | |
| } | |
| 75% { | |
| transform: scaleY(0.5); | |
| } | |
| 100% { | |
| transform: scaleY(1); | |
| } | |
| } | |
| body { | |
| max-width: 500px; | |
| margin: 2em auto; | |
| } | |
| .logo__outside { | |
| @include dash(411); | |
| stroke-linejoin: round; | |
| animation: draw 1s linear forwards; | |
| } | |
| .logo__inside { | |
| @include dash(500); | |
| animation: draw 1s linear forwards; | |
| } | |
| .logo__left-eye, | |
| .logo__right-eye { | |
| transform-origin: center; | |
| transform: scaleY(0); | |
| animation: slide 250ms ease-in-out 1.25s forwards; | |
| } | |
| .logo__nose { | |
| transform-origin: center; | |
| transform: scale(2); | |
| opacity: 0; | |
| animation: fadeIn 250ms ease-out 1s forwards, | |
| drop 250ms ease-out 1s forwards; | |
| } | |
| </script> | |
| </body> | |
| </html> |
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
| @mixin dash($width) { | |
| stroke-dasharray: $width; | |
| stroke-dashoffset: $width; | |
| } | |
| @keyframes drop { | |
| from { | |
| transform-origin: center; | |
| transform: scale(0); | |
| } | |
| 50% { | |
| transform: scale(1.5); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes draw { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| @keyframes slide { | |
| 50% { | |
| transform: scaleY(1); | |
| } | |
| 75% { | |
| transform: scaleY(0.5); | |
| } | |
| 100% { | |
| transform: scaleY(1); | |
| } | |
| } | |
| body { | |
| max-width: 500px; | |
| margin: 2em auto; | |
| } | |
| .logo__outside { | |
| @include dash(411); | |
| stroke-linejoin: round; | |
| animation: draw 1s linear forwards; | |
| } | |
| .logo__inside { | |
| @include dash(500); | |
| animation: draw 1s linear forwards; | |
| } | |
| .logo__left-eye, | |
| .logo__right-eye { | |
| transform-origin: center; | |
| transform: scaleY(0); | |
| animation: slide 250ms ease-in-out 1.25s forwards; | |
| } | |
| .logo__nose { | |
| transform-origin: center; | |
| transform: scale(2); | |
| opacity: 0; | |
| animation: fadeIn 250ms ease-out 1s forwards, | |
| drop 250ms ease-out 1s forwards; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment