Skip to content

Instantly share code, notes, and snippets.

@stuarthannig

stuarthannig/Scotch-Digital-Logo.markdown

Forked from anonymous/Scotch-Digital-Logo.markdown
Created January 30, 2015 02:41
Show Gist options
  • Save stuarthannig/72327d67dff1661053a0 to your computer and use it in GitHub Desktop.
Save stuarthannig/72327d67dff1661053a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<section id="wrapper">
<div class="brand clearfix">
<svg version="1.1" id="scotch-digital" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 277.8 23.9" enable-background="new 0 0 277.8 23.9" xml:space="preserve">
<g class="word word-scotch">
<path class="letter s" fill="#2B282D" d="M13.4,3.1c-0.1,0.2-0.2,0.3-0.4,0.3c-0.1,0-0.3-0.1-0.6-0.3c-0.2-0.2-0.5-0.4-0.9-0.7c-0.4-0.2-0.9-0.5-1.5-0.7C9.4,1.5,8.7,1.4,7.9,1.4C7,1.4,6.3,1.5,5.6,1.8S4.4,2.3,4,2.8C3.5,3.2,3.2,3.7,3,4.2C2.8,4.8,2.6,5.4,2.6,6c0,0.8,0.2,1.5,0.5,2s0.8,1,1.3,1.3C5,9.6,5.7,9.9,6.4,10.2c0.7,0.2,1.4,0.5,2.2,0.7c0.7,0.2,1.5,0.5,2.2,0.8c0.7,0.3,1.3,0.7,1.9,1.1s1,1,1.3,1.6c0.3,0.6,0.5,1.4,0.5,2.4c0,1-0.2,1.9-0.5,2.8c-0.3,0.9-0.8,1.6-1.5,2.3c-0.6,0.6-1.4,1.1-2.4,1.5c-0.9,0.4-2,0.6-3.2,0.6c-1.5,0-2.9-0.3-4-0.8c-1.1-0.5-2.1-1.3-2.9-2.2l0.5-0.7c0.1-0.2,0.3-0.2,0.5-0.2c0.1,0,0.2,0.1,0.4,0.2c0.2,0.1,0.3,0.3,0.6,0.5c0.2,0.2,0.5,0.4,0.8,0.6c0.3,0.2,0.7,0.4,1.1,0.6c0.4,0.2,0.9,0.4,1.4,0.5c0.5,0.1,1.1,0.2,1.8,0.2c0.9,0,1.8-0.1,2.5-0.4c0.7-0.3,1.3-0.7,1.8-1.1c0.5-0.5,0.9-1.1,1.2-1.7c0.3-0.7,0.4-1.4,0.4-2.1c0-0.8-0.2-1.5-0.5-2c-0.3-0.5-0.8-1-1.3-1.3c-0.6-0.4-1.2-0.7-1.9-0.9c-0.7-0.2-1.4-0.5-2.2-0.7s-1.5-0.5-2.2-0.8c-0.7-0.3-1.3-0.7-1.9-1.1c-0.6-0.4-1-1-1.3-1.7S1.1,7,1.1,6c0-0.8,0.1-1.5,0.4-2.3s0.7-1.4,1.3-1.9c0.6-0.6,1.3-1,2.1-1.3S6.8,0,7.9,0c1.2,0,2.3,0.2,3.3,0.6c1,0.4,1.8,1,2.6,1.8L13.4,3.1z"></path>
<path class="letter c c-1" fill="#2B282D" d="M36.3,19.7c0.1,0,0.2,0,0.3,0.1l0.7,0.7c-0.5,0.5-1,1-1.6,1.4s-1.2,0.8-1.9,1.1c-0.7,0.3-1.4,0.5-2.2,0.7c-0.8,0.2-1.7,0.2-2.7,0.2c-1.6,0-3.1-0.3-4.5-0.9c-1.4-0.6-2.5-1.4-3.5-2.4s-1.7-2.3-2.3-3.8c-0.5-1.5-0.8-3.1-0.8-4.9c0-1.8,0.3-3.4,0.8-4.9c0.6-1.5,1.3-2.7,2.4-3.8c1-1.1,2.2-1.9,3.6-2.4c1.4-0.6,3-0.9,4.7-0.9c0.8,0,1.6,0.1,2.3,0.2c0.7,0.1,1.4,0.3,2,0.5c0.6,0.2,1.2,0.5,1.7,0.9s1.1,0.8,1.6,1.2l-0.5,0.7c-0.1,0.1-0.2,0.2-0.4,0.2c-0.1,0-0.2-0.1-0.4-0.2c-0.2-0.1-0.4-0.3-0.6-0.4s-0.5-0.4-0.9-0.6c-0.3-0.2-0.7-0.4-1.2-0.6c-0.5-0.2-1-0.3-1.6-0.4c-0.6-0.1-1.3-0.2-2.1-0.2c-1.4,0-2.7,0.2-3.9,0.7c-1.2,0.5-2.2,1.2-3.1,2.1c-0.9,0.9-1.5,2-2,3.3s-0.7,2.8-0.7,4.4c0,1.7,0.2,3.1,0.7,4.4c0.5,1.3,1.1,2.4,2,3.3c0.8,0.9,1.8,1.6,3,2.1c1.1,0.5,2.4,0.7,3.7,0.7c0.8,0,1.6-0.1,2.2-0.2c0.7-0.1,1.3-0.3,1.8-0.5s1.1-0.5,1.5-0.8c0.5-0.3,0.9-0.7,1.4-1.1c0.1,0,0.1-0.1,0.2-0.1C36.2,19.8,36.3,19.7,36.3,19.7z"></path>
<path class="letter o" fill="#2B282D" d="M63.5,12c0,1.8-0.3,3.5-0.8,4.9c-0.5,1.5-1.3,2.7-2.3,3.8s-2.2,1.8-3.5,2.4c-1.4,0.6-2.9,0.9-4.6,0.9c-1.6,0-3.2-0.3-4.5-0.9c-1.4-0.6-2.5-1.4-3.5-2.4s-1.7-2.3-2.3-3.8c-0.5-1.5-0.8-3.1-0.8-4.9c0-1.8,0.3-3.4,0.8-4.9c0.5-1.5,1.3-2.7,2.3-3.8s2.2-1.9,3.5-2.4C49.2,0.3,50.7,0,52.3,0c1.7,0,3.2,0.3,4.6,0.9c1.4,0.6,2.5,1.4,3.5,2.4c1,1,1.7,2.3,2.3,3.8C63.2,8.5,63.5,10.2,63.5,12z M61.7,12c0-1.6-0.2-3.1-0.7-4.4c-0.5-1.3-1.1-2.4-1.9-3.3c-0.8-0.9-1.8-1.6-3-2.1c-1.2-0.5-2.4-0.7-3.9-0.7c-1.4,0-2.7,0.2-3.8,0.7s-2.1,1.2-3,2.1c-0.8,0.9-1.5,2-1.9,3.3c-0.5,1.3-0.7,2.8-0.7,4.4c0,1.6,0.2,3.1,0.7,4.4c0.5,1.3,1.1,2.4,1.9,3.3s1.8,1.6,3,2.1c1.2,0.5,2.4,0.7,3.8,0.7c1.4,0,2.7-0.2,3.9-0.7c1.2-0.5,2.1-1.2,3-2.1s1.5-2,1.9-3.3C61.5,15.1,61.7,13.6,61.7,12z"></path>
<path class="letter t" fill="#2B282D" d="M82.3,0.3v1.4h-8.2v22h-1.7v-22h-8.3V0.3H82.3z"></path>
<path class="letter c c-2" fill="#2B282D" d="M101.4,19.7c0.1,0,0.2,0,0.3,0.1l0.7,0.7c-0.5,0.5-1,1-1.6,1.4s-1.2,0.8-1.9,1.1c-0.7,0.3-1.4,0.5-2.2,0.7c-0.8,0.2-1.7,0.2-2.7,0.2c-1.6,0-3.1-0.3-4.5-0.9c-1.4-0.6-2.5-1.4-3.5-2.4s-1.7-2.3-2.3-3.8C83.2,15.4,83,13.8,83,12c0-1.8,0.3-3.4,0.8-4.9c0.6-1.5,1.3-2.7,2.4-3.8c1-1.1,2.2-1.9,3.6-2.4c1.4-0.6,3-0.9,4.7-0.9c0.8,0,1.6,0.1,2.3,0.2c0.7,0.1,1.4,0.3,2,0.5c0.6,0.2,1.2,0.5,1.7,0.9s1.1,0.8,1.6,1.2l-0.5,0.7c-0.1,0.1-0.2,0.2-0.4,0.2c-0.1,0-0.2-0.1-0.4-0.2c-0.2-0.1-0.4-0.3-0.6-0.4s-0.5-0.4-0.9-0.6c-0.3-0.2-0.7-0.4-1.2-0.6c-0.5-0.2-1-0.3-1.6-0.4c-0.6-0.1-1.3-0.2-2.1-0.2c-1.4,0-2.7,0.2-3.9,0.7c-1.2,0.5-2.2,1.2-3.1,2.1c-0.9,0.9-1.5,2-2,3.3s-0.7,2.8-0.7,4.4c0,1.7,0.2,3.1,0.7,4.4c0.5,1.3,1.1,2.4,2,3.3c0.8,0.9,1.8,1.6,3,2.1c1.1,0.5,2.4,0.7,3.7,0.7c0.8,0,1.6-0.1,2.2-0.2c0.7-0.1,1.3-0.3,1.8-0.5s1.1-0.5,1.5-0.8c0.5-0.3,0.9-0.7,1.4-1.1c0.1,0,0.1-0.1,0.2-0.1C101.3,19.8,101.3,19.7,101.4,19.7z"></path>
<path class="letter h" fill="#2B282D" d="M125.7,23.7H124V12.5h-14.7v11.2h-1.7V0.3h1.7v10.9H124V0.3h1.7V23.7z"></path>
</g>
<g class="word word-digital">
<g class="letter d">
<g>
<rect x="136" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="136" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="136" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="136" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="136" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="136" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="151" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="151" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="149.3" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="149.3" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="151" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="151" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="149.3" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="149.3" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="151" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="151" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="149.3" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="149.3" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="146" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="146" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="144.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="144.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="141" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="141" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="139.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="139.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="136" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="136" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="141" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="141" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="139.3" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="139.3" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="146" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="146" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="144.3" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="144.3" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="136" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="136" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="134.3" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
</g>
<g class="letter i i-1">
<g>
<rect x="163.5" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="163.5" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="163.5" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="163.5" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="163.5" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="163.5" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="163.5" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="163.5" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="168.5" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="168.5" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="166.8" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="166.8" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="163.5" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="163.5" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="161.8" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="158.5" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="158.5" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="156.8" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="156.8" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="168.5" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="168.5" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="166.8" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="166.8" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="158.5" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="158.5" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="156.8" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="156.8" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
</g>
<g class="letter g">
<g>
<rect x="176" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="176" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="174.3" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="174.3" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="176" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="176" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="174.3" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="174.3" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="176" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="176" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="174.3" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="174.3" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="191" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="191" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="189.3" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="189.3" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="186" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="186" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="184.3" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="184.3" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="191" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="191" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="189.3" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="189.3" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="191" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="191" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="189.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="189.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="186" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="186" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="184.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="184.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="181" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="181" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="179.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="179.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="186" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="186" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="184.3" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="184.3" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="181" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="181" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="179.3" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="179.3" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
</g>
<g class="letter i i-2">
<g>
<rect x="203.5" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="203.5" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.8" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.8" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="203.5" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="203.5" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.8" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.8" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="203.5" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="203.5" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.8" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.8" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="203.5" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="203.5" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.8" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.8" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="208.6" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="208.6" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="206.9" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="206.9" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="203.6" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="203.6" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.9" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="201.9" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="198.6" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="198.6" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="196.9" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="196.9" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="208.6" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="208.6" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="206.9" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="206.9" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="198.6" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="198.6" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="196.9" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="196.9" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
</g>
<g class="letter t">
<g>
<rect x="231" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="231" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="229.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="229.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="226" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="226" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="224.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="224.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="221" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="221" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="219.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="219.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="223.5" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="223.5" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="221.8" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="221.8" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="223.5" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="223.5" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="221.8" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="221.8" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="223.5" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="223.5" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="221.8" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="221.8" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="223.5" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="223.5" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="221.8" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="221.8" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="216" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="216" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="214.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="214.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
</g>
<g class="letter a">
<g>
<rect x="238.5" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="238.5" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="238.5" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="238.5" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="238.5" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="238.5" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="238.5" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="238.5" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="243.5" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="243.5" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="241.8" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="241.8" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="248.5" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="248.5" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="246.8" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="246.8" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="243.5" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="243.5" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="241.8" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="241.8" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="248.5" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="248.5" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="246.8" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="246.8" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="253.5" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="253.5" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="251.8" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="251.8" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="253.5" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="253.5" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="251.8" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="251.8" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="253.5" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="253.5" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="251.8" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="251.8" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="253.5" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="253.5" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="251.8" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="251.8" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="238.5" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="238.5" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="236.8" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
</g>
<g class="letter l">
<g>
<rect x="261" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="261" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="1.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="0.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="261" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="261" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="6.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="5.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="261" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="261" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="11.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="10.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="261" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="261" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="16.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="15.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="261" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="261" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="259.3" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="266" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="266" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="264.3" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="264.3" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="271" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="271" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="269.3" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="269.3" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
<g>
<rect x="276" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="276" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="274.3" y="21.9" fill="#2B282D" width="1.8" height="1.8"></rect>
<rect x="274.3" y="20.2" fill="#2B282D" width="1.8" height="1.8"></rect>
</g>
</g>
</g>
</svg>
<div class="hover-blocks clearfix">
<span class="hover-block d" data-color="#ff6f35" data-letter="d"></span>
<span class="hover-block i-1" data-color="#ffb22d" data-letter="i-1"></span>
<span class="hover-block g" data-color="#f7df00" data-letter="g"></span>
<span class="hover-block i-2" data-color="#ffe91e" data-letter="i-2"></span>
<span class="hover-block t" data-color="#26ff6c" data-letter="t"></span>
<span class="hover-block a" data-color="#268bff" data-letter="a"></span>
<span class="hover-block l" data-color="#8b3cff" data-letter="l"></span>
</div>
</div>
</section>
<div id="superlink"><a href="https://digital.scotch.io" target="_SELF">digital.scotch.io</a></div>
Raw
Scotch-Digital-Logo.markdown

Scotch Digital Logo

Top Shelf Web Design & Development ♥ We are creative thinkers with a focus on modern web production. We use the latest tools available to help build your brand's digital presence.

A Pen by Nicholas Cerminara on CodePen.

License.

Raw
script.js
$('.hover-block').hover(
function() {
explodeLetter($(this).parents('section').attr('id'), $(this).data('letter'), $(this).data('color'));
}, function() {
implodeLetter($(this).parents('section').attr('id'), $(this).data('letter'), $(this).data('color'));
}
);
introStuff();
function explodeLetter(parentID, letter, fillColor) {
$('#'+parentID+' .word-digital .letter.'+letter).find('rect').each(function() {
$(this).css({
'fill': fillColor,
'-webkit-transform': 'translate3d('+randomIntFromInterval(-69, 69)+'px, '+randomIntFromInterval(-69, 69)+'px, 0)',
'-moz-transform': 'translate3d('+randomIntFromInterval(-69, 69)+'px, '+randomIntFromInterval(-69, 69)+'px, 0)',
'-ms-transform': 'translate3d('+randomIntFromInterval(-69, 69)+'px, '+randomIntFromInterval(-69, 69)+'px, 0)',
'-o-transform': 'translate3d('+randomIntFromInterval(-69, 69)+'px, '+randomIntFromInterval(-69, 69)+'px, 0)',
'transform': 'translate3d('+randomIntFromInterval(-69, 69)+'px, '+randomIntFromInterval(-69, 69)+'px, 0)'
});
});
}
function implodeLetter(parentID, letter) {
$('#'+parentID+' .word-digital .letter.'+letter).find('rect').css({
'fill': '#fff',
'-webkit-transform': 'translate3d(0, 0, 0)',
'-moz-transform': 'translate3d(0, 0, 0)',
'-ms-transform': 'translate3d(0, 0, 0)',
'-o-transform': 'translate3d(0, 0, 0)',
'transform': 'translate3d(0, 0, 0)'
});
}
function randomIntFromInterval(min,max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
function introStuff() {
$('body').addClass('show-background');
setTimeout(function() {
$('body').addClass('show-stars');
$('.hover-block.d').trigger("mouseover");
setTimeout(function() {
$('.hover-block.d').trigger("mouseout");
}, 700);
$('.hover-block.i-1').trigger("mouseover");
setTimeout(function() {
$('.hover-block.i-1').trigger("mouseout");
}, 700);
$('.hover-block.g').trigger("mouseover");
setTimeout(function() {
$('.hover-block.g').trigger("mouseout");
}, 700);
$('.hover-block.i-2').trigger("mouseover");
setTimeout(function() {
$('.hover-block.i-2').trigger("mouseout");
}, 700);
$('.hover-block.t').trigger("mouseover");
setTimeout(function() {
$('.hover-block.t').trigger("mouseout");
}, 700);
$('.hover-block.a').trigger("mouseover");
setTimeout(function() {
$('.hover-block.a').trigger("mouseout");
}, 700);
$('.hover-block.l').trigger("mouseover");
setTimeout(function() {
$('.hover-block.l').trigger("mouseout");
}, 700);
}, 500);
}
Raw
style.css
@import url('//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700');
body {
background-color: #000;
background-image: url('https://digital.scotch.io/img/topper-background-2.jpg');
background-repeat: no-repeat;
background-position: 50% 20%;
background-size: cover;
font-family: 'Open Sans';
}
body:before {
content: ' ';
display: block;
background: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.55;
}
.brand {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 7777777;
max-width: 600px;
}
.hover-blocks {
width: 52%;
position: absolute;
top: 35%;
left: 48%;
}
.hover-block {
float: left;
height: 52px;
display: block;
margin-right: 2%;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;}
.hover-block.d { width: 14%; }
.hover-block.i-1 {width: 9%; }
.hover-block.g { width: 13%; }
.hover-block.i-2 { width: 10%; }
.hover-block.t { width: 13%; }
.hover-block.a { width: 13%; }
.hover-block.l { width: 14%; }
.brand svg {
width: 100%;
opacity: 0;
-webkit-transition: all 400ms ease 500ms;
-moz-transition: all 400ms ease 500ms;
transition: all 400ms ease 500ms;
overflow: visible;
-webkit-transform: translateZ(0) translateX(-50%);
-moz-transform: translateZ(0) translateX(-50%);
-ms-transform: translateZ(0) translateX(-50%);
-o-transform: translateZ(0) translateX(-50%);
transform: translateZ(0) translateX(-50%);
display: block;
opacity: 0;
position: absolute;
top: 35%;
left: 50%;
}
.brand svg {
opacity: 1;
}
.brand svg * { fill: #fff; }
.brand svg rect {
transition: all 1500ms cubic-bezier(.17,.67,0,1.34);
}
.brand svg .word-digital g.letter {
transform: scale(1) translateZ(0);
transform-origin: 50%;
transition: all 500ms ease;
}
.brand svg .word-digital g.letter.d { transition-delay: 200ms; }
.brand svg .word-digital g.letter.i-1 { transition-delay: 300ms; }
.brand svg .word-digital g.letter.g { transition-delay: 400ms; }
.brand svg .word-digital g.letter.i-2 { transition-delay: 500ms; }
.brand svg .word-digital g.letter.t { transition-delay: 600ms; }
.brand svg .word-digital g.letter.a { transition-delay: 700ms; }
.brand svg .word-digital g.letter.l { transition-delay: 800ms; }
#superlink {background: #ff3535; /* Old browsers */
background: -moz-linear-gradient(left, #ff3535 0%, #ffb22d 19%, #f7df00 37%, #26ff6c 56%, #268bff 76%, #8b3cff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3535), color-stop(19%,#ffb22d), color-stop(37%,#f7df00), color-stop(56%,#26ff6c), color-stop(76%,#268bff), color-stop(100%,#8b3cff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff3535 0%,#ffb22d 19%,#f7df00 37%,#26ff6c 56%,#268bff 76%,#8b3cff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff3535 0%,#ffb22d 19%,#f7df00 37%,#26ff6c 56%,#268bff 76%,#8b3cff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff3535 0%,#ffb22d 19%,#f7df00 37%,#26ff6c 56%,#268bff 76%,#8b3cff 100%); /* IE10+ */
background: linear-gradient(to right, #ff3535 0%,#ffb22d 19%,#f7df00 37%,#26ff6c 56%,#268bff 76%,#8b3cff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3535', endColorstr='#8b3cff',GradientType=1 ); /* IE6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: fixed;
bottom: 0;
outline: none;
text-decoration: none !important;
outline: none !important;
right: 0;
text-transform: uppercase;
font-size: 12px;
margin: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment