Skip to content

Instantly share code, notes, and snippets.

@SleepWalker

SleepWalker/WbbXGg.markdown

Last active August 29, 2015 14:10
Show Gist options
  • Save SleepWalker/30019e9c8b657b2ec660 to your computer and use it in GitHub Desktop.
Save SleepWalker/30019e9c8b657b2ec660 to your computer and use it in GitHub Desktop.
Download ZIP
WbbXGg
Raw
index.html
<svg viewBox="0 0 1230 44" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h1230v44h-1230z M-585 294a1200 290 0 1 1 0 0.0001 z" fill="#fff" fill-rule="evenodd" />
</svg>
<svg viewBox="0 0 1230 44" preserveAspectRatio="none slice" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h1230v44h-1230z M-585 294a1200 290 0 1 1 0 0.0001 z" fill="#fff" fill-rule="evenodd" />
</svg>
<div class="test-svg"></div>
Raw
style.css
body {background: black}
svg {width: 100%; height: 40px; background: none;}
.test-svg {
height: 44px;
width: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIzMCA0NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSBzbGljZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMCAwaDEyMzB2NDRoLTEyMzB6IE0tNTg1IDI5NGExMjAwIDI5MCAwIDEgMSAwIDAuMDAwMSB6IiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIC8+Cjwvc3ZnPg==') center bottom no-repeat;
background-size: 100% 44px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment