CodePen

HTML

            
              <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="300px" height="300px" viewBox="0 0 300 300" 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">    
    <defs>
        <style>

            @media screen and (max-width: 65em) {
                #door-shadow, #tube-shadow, .backyard {
                    display: none;
                }

                #door-body {
                    fill: white;
                }

                #door-handle {
                    fill: #E55C3C;
                }

                #door-body, #door-handle {
                    -ms-transform: translate(0,0);
                    -webkit-transform: translate(0,0);
                    transform: translate(0,0);
                }

                #window {
                    -ms-transform: translate(0,0) scale(1);
                    -webkit-transform: translate(0,0) scale(1);
                    transform: translate(0,0) scale(1);
                }

                #house-body {
                    -ms-transform: scaleX(1) translate(0, 0);    
                    -webkit-transform: scaleX(1) translate(0, 0);    
                    transform: scaleX(1) translate(0, 0);    
                }

                #tube-body {
                    -ms-transform: translate(0, 0);
                    -webkit-transform: translate(0, 0);
                    transform: translate(0, 0);
                }

                #tube-upper {
                    -ms-transform: translate(0, 0);
                    -webkit-transform: translate(0, 0);
                    transform: translate(0, 0);
                }
            }

            /* cannot hide #window because #window2 will disappear as well */
            @media screen and (max-width: 55em) {
                #window-upper, #window2, #door-th {
                    display: none;
                }

                #house-roof, #house-body {
                    fill: #E55C3C;
                }


                #house-body, #door-body, #door-handle, #window {
                   
                }

                #door-body, #door-handle {
                    -ms-transform: translate(-30px, 8px); 
                    -webkit-transform: translate(-30px, 8px);
                    transform: translate(-30px, 8px);
                }

                #window {
                    -ms-transform: translate(100px, -20px) scale(1.2);
                    -webkit-transform: translate(100px, -20px) scale(1.2);
                    transform: translate(100px, -20px) scale(1.2);
                }

                #house-body {
                    -ms-transform: scaleX(0.9) translate(15px, 8px);    
                    -webkit-transform: scaleX(0.9) translate(15px, 8px);
                    transform: scaleX(0.9) translate(15px, 8px);
                }

                #tube-body {
                    -ms-transform: translate(0, 10px);
                    -webkit-transform: translate(0, 10px);
                    transform: translate(0, 10px);
                }

                #tube-upper {
                    -ms-transform: translate(0, -8px);
                    -webkit-transform: translate(0, -8px);
                    transform: translate(0, -8px);
                }

                #icon {
                    -ms-transform: scale(1);
                    -webkit-transform: scale(1);
                    transform: scale(1);
                }
            }

            @media screen and (max-width: 45em) {
                .window-th, #door-handle {
                    display: none;
                }

                #tube-body {
                    -ms-transform: translate(0, 0);
                    -webkit-transform: translate(0, 0);
                    transform: translate(0, 0);
                }

                #window-item-main {
                    -ms-transform: scale(1) translate(0,0);  
                    -webkit-transform: scale(1) translate(0,0);  
                    transform: scale(1) translate(0,0);  
                }

                #icon {
                    -ms-transform: scale(0.9);
                    -webkit-transform: scale(0.9);
                    transform: scale(0.9);
                }
            }

            @media screen and (max-width: 40em) {
                #tube-upper, .window-item {
                    display: none;
                }

                #tube-body {
                    -ms-transform: translate(0, 0);
                    -webkit-transform: translate(0, 0);
                    transform: translate(0, 0);
                }
    
                #window-item-main {
                    -ms-transform: scale(2) translate(-15px, -93px);  
                    -webkit-transform: scale(2) translate(-15px, -93px);
                    transform: scale(2) translate(-15px, -93px);
                }

                #icon {
                    -ms-transform: scale(0.8);
                    -webkit-transform: scale(0.8);
                    transform: scale(0.8);
                }
            }

            @media screen and (max-width: 35em) {
                #window-item-main {
                    display: none;
                }

                #house-body {
                    -ms-transform: translate(11px, 0) scaleX(0.9);
                    -webkit-transform: translate(11px, 0) scaleX(0.9);
                    transform: translate(11px, 0) scaleX(0.9);
                }

                #door-body {
                    -ms-transform: translate(-52px, -120px) scaleX(1.4) scaleY(1.5);
                    -webkit-transform: translate(-52px, -120px) scaleX(1.4) scaleY(1.5);
                    transform: translate(-52px, -120px) scaleX(1.4) scaleY(1.5);
                }

                #icon {
                    -ms-transform: scale(0.6);
                    -webkit-transform: scale(0.6);
                    transform: scale(0.6);
                }

            }

            @media screen and (max-width: 30em) {
                #tube-body {
                    display: none;
                }

                #house-roof {
                    -ms-transform: translate(0,0) scaleX(1);
                    -webkit-transform: translate(0,0) scaleX(1);
                    transform: translate(0,0) scaleX(1);
                }

                #icon {
                    -ms-transform: scale(0.5);
                    -webkit-transform: scale(0.5);
                    transform: scale(0.5);
                }
            }

            @media screen and (max-width: 25em) {
                #house-roof {
                    -ms-transform: translate(26px,0) scaleX(0.784);
                    -webkit-transform: translate(26px,0) scaleX(0.784);
                    transform: translate(26px,0) scaleX(0.784);
                }

                #icon {
                    -ms-transform: scale(0.3);
                    -webkit-transform: scale(0.3);
                    transform: scale(0.3);
                }
            }

            @media screen and (max-width: 20em) {
                #door-body {
                    display: none;
                }

                #icon {
                    -ms-transform: scale(0.2);
                    -webkit-transform: scale(0.2);
                    transform: scale(0.2);
                }
            }

        </style>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
       
        <g id="icon" class="icon">
            
                <g class="backyard">
                    <rect id="backyard" d="M224.059,97.927 L224.059,244.5 L287.5,244.5 L287.5,97.927 L224.059,97.927 Z M224.059,97.927" fill="#E55C3C" x="224.059" y="97.927" width="63.441" height="146.573"></rect>
                    <path id="backyard-roof" d="M165.5,42.5 L255.369,42.5 L299.798,105.5 L165.5,105.5 L165.5,42.5" fill="#B8492E"></path>
                </g>
                
                <rect id="tube-body" x="42" y="29" width="34" height="70" fill="#E55C3C" />
                <rect id="tube-upper" x="37" y="29" width="44" height="12" fill="#E55C3C" />
                <path id="tube-shadow" d="M76,42.5 L75.279,54.206 L42,87.997 L42,76.333 L76,42.5 Z M75,42" fill="#B8492E"></path>
                
                    
                <path id="house-roof" fill="#E98158" d="M127,1L0,128L252,128" />
                <rect id="house-body" x="17" y="127" width="219" height="137"  fill="#E98158" />
                

                <g id="window-upper">
                    <rect x="108" y="98" width="15" height="19" fill="white" />
                    <rect x="129" y="98" width="15" height="19" fill="white" />
                    <ellipse cx="126" cy="92" rx="18" ry="23" fill="white" />
                    <rect x="108" y="93" width="36" height="6" fill="#E98158" />
                    <rect x="123" y="68" width="6" height="52" fill="#E98158" />
                </g>


                <g id="window">
                    <rect id="window-item-main" x="36" y="170" width="17" height="17" fill="white" />
                    <rect class="window-item" x="58" y="170" width="17" height="17" fill="white" />
                    <rect class="window-item" x="36" y="192" width="17" height="17" fill="white" />
                    <rect class="window-item" x="58" y="192" width="17" height="17" fill="white" />
                    <rect class="window-th" x="30" y="213" width="50" height="5" fill="white" />
                </g>
                <use id="window2" xlink:href="#window" x="142" y="0" />

                <rect id="door-body" x="101" y="188" width="49" height="76"  fill="#E55C3C" />
                <rect id="door-th" x="95" y="258" width="62" height="6" fill="white" />
                <circle id="door-handle" cx="116" cy="225" r="3" fill="white" />
                <path id="door-shadow" d="M142.5,258.5 L142.5,194.5 L101.5,194.5 L101.5,188.5 L149.5,188.5 L149.5,258 L142.5,258 Z M142.5,258.5" fill="#B8492E"></path>
            
        </g>

    </g>
</svg>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................