SVG Responsive Logo

HTML
<div id="demo"> <img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/exampleco.svg" alt="ExampleCo" width="200" height="130"> </div>
CSS
#logo { display: block; height: 33.3%; width: 100%; } /** * Below styles for demo only */ #logo { outline: 1px solid #DBE5EA; } html { background: #444; height: 100%; } body { max-height: 100%; overflow: hidden; } #demo { background: #fff; border: solid #111; border-radius: 1em; border-width: 2em 1em; display: block; height: 26em; margin: 1em auto; padding: 2em; width: 16em; animation: 2s ease resizeDemo alternate infinite; } @keyframes resizeDemo { 0% { border-width: 2em 1em; height: 26em; width: 16em; } 25% { border-width: 2em 1em; height: 26em; width: 16em; } 75% { border-width: 1em 2em; height: 16em; width: 26em; } 100% { border-width: 1em 2em; height: 16em; width: 26em; } }
JAVASCRIPT
Expand for more options Login