Expanding Letter Experiment

Experimenting with expanding selected letters. Status: Complete

by Ken Watanabe

HTML

<div class="b">
    <svg class="b01" x="0px" y="0px" width="55.7px" height="300px">
        <rect x="0" y="0" width="55.7px" height="300px" fill="black" />
    </svg>
    <svg class="b02" x="0px" y="0px" width="700px" height="300px">
        <path d="M655,136.3c18.9-9.8,29.6-30.8,29.6-55.3c0-53.1-33-81-85.7-81H0v51.4h594.6c24.4,0,36.4,9,36.4,32.6c0,23.6-11.6,32.6-35.1,32.6H0V168h595.9c32.1,0,48.4,13.3,48.4,40.3s-16.3,40.3-48.4,40.3H0V300h601c61.7,0,99-32.6,99-90.5C700,173.1,685,148.7,655,136.3z" />
    </svg>
</div>

CSS

.b {
    position: absolute;
    top:100;
    left:100;
    width:40%;
    overflow: hidden;
    min-width:210.876px;
    }
    
.b02 {
    position: relative;
    z-index:1;
    float:right;
    }
    
.b01 {
    position: absolute;
    z-index:2;
    }