Scotch Digital Logo

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>

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;
}

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);
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions