SVG: A, Responsive B, and C

While letters A and C are static, the letter B responds to the window's width. All letters, which are in a form of SVGs, are within a type-wrap that is set to a width of 50%. Status: Incomplete

by Ken Watanabe

HTML

<h2>I need help getting this to...</h2><br/>

<div class="typewrap">
    
    <div class="a">
        <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="300px" viewBox="0 0 253.2 300">
            <path d="M194.5,296.7l-21.4-69.2H80.1l-21.4,69.2H0L99.4,3.3h54.5l99.4,293.5H194.5z M126.6,75.4l-31,101.9h62L126.6,75.4z" />
        </svg>
    </div><!-- END | "A" -->
    
    
    <div class="b">
        <svg class="b01" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="300px" viewBox="0 0 54.5 300">
            <rect x="0" y="3.3" width="54.5" height="293.5" />
        </svg>
        <svg class="b02" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="300px" viewBox="0 0 1500 300">
            <path d="M1456,136.6c18.4-9.6,28.9-30.2,28.9-54.1c0-52-32.3-79.2-83.8-79.2H0v50.3h1396.9c23.9,0,35.6,8.8,35.6,31.9s-11.3,31.9-34.4,31.9H0v50.3h1398.1c31.4,0,47.4,13,47.4,39.4c0,26.4-15.9,39.4-47.4,39.4H0v50.3h1403.2c60.4,0,96.8-31.9,96.8-88.5C1500,172.6,1485.3,148.7,1456,136.6z" />
        </svg>
    </div><!-- END | "B" -->
    
    
    <div class="c">
        <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="300px" viewBox="0 0 260.346 300">
            <path d="M211.3,101.4c-13-34-36.9-51.1-72.5-51.1c-23.9,0-44,8.4-60,25.6C63.3,93,55.3,117.7,55.3,150s8,57,23.5,74.2 c15.9,17.2,36.1,25.6,60,25.6c35.6,0,59.5-17.2,72.5-51.1l49.1,12.6c-13.8,56.6-57.9,88.9-121.6,88.9c-39,0-71.7-13.4-98.5-39.8 S0,197,0,150S13.4,66.2,40.2,39.7C67.1,13.3,99.8-0.1,138.8-0.1c63.7,0,107.7,32.3,121.6,88.9L211.3,101.4z" />
        </svg>
    </div> <!-- END | "C" -->

<div><!-- END | typewrap -->
    
<br/><br/><br/><h2>This.</h2><br/>
    <img src="http://i58.tinypic.com/24471v6.jpg"/>

CSS

.page-wrapper {
    width: 80%;
    max-width: 48em;
    height: 100%;
    margin: 0 auto;
    background-color: #f1f2f2;
}

.typewrap {
    width: 50%;
    padding-left: 20%; /* the neon green color shown in the picture is represented by the padding-left: 20% */
    height: 20%;
    background-color: #c2b59b;
}

svg {
    height: 20%; /* this percentage is thought to be the number that changes the size of the SVGs all together. */
}

.a {
    height: 100%;
} /* END | "A" */

.b {
    height: 100%;
    width: 40%;
    min-width: 206.264px;
}

.b01 {
    position: absolute;
    z-index: 2;
}

.b02 {
    position: relative;
    float: right;
    z-index: 1;
} /* END | "B" */

.c {
    height: 100%;
} /* END | "C" */