Skip to content

Instantly share code, notes, and snippets.

@englishextra

englishextra/hero noise svg overlay.html

Last active April 24, 2017 14:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save englishextra/62ad5963dafe30c715ce26c84d006964 to your computer and use it in GitHub Desktop.
Save englishextra/62ad5963dafe30c715ce26c84d006964 to your computer and use it in GitHub Desktop.
Download ZIP
hero noise svg overlay / source http://jsbin.com/ruvunix
Raw
hero noise svg overlay.html
<!DOCTYPE html>
<!-- Edit this and the preview will update automatically. -->
<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'>
<rect width='5' height='5' fill='transparent'/>
<path d="M0 5L5 0ZM6 4L4 6ZM-1 1L1 -1Z" stroke="#4B4B4B" stroke-width="1"></path>
</svg>
<!-- https://github.com/progers/Patterns-Gallery -->
<!-- Do not edit below, just used for the preview. -->
<div id="code">
[base64]
</div>
<style>
#code {
border: 1px solid #000;
background-color: rgba(255,255,255,.9);
font-family: monospace;
margin: 1em;
padding: .5em;
word-break: break-all;
}
svg { display: none; }
html { width: 100%; height: 100%; }
</style>
<script>
// Encode an SVG element as a base64 data uri.
function svgToBase64Image(svgElement) {
var div = document.createElement('div');
div.appendChild(svgElement.cloneNode(true));
var b64 = window.btoa(div.innerHTML);
return 'data:image/svg+xml;base64,' + b64;
}
var svgs = document.getElementsByTagName('svg');
var urls = [];
for (var i = 0; i < svgs.length; i++)
urls.push('url(' + svgToBase64Image(svgs[i]) + ')');
var url = urls.join(',');
var msg = 'Base64 CSS image (for cross-browser support):' +
'<br><br>background: ' + url + ';';
document.getElementById('code').innerHTML = msg;
document.body.style.background = url;
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<\!-- Edit this and the preview will update automatically. -->
<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'>
<rect width='5' height='5' fill='transparent'/>
<path d="M0 5L5 0ZM6 4L4 6ZM-1 1L1 -1Z" stroke="#4B4B4B" stroke-width="1"></path>
</svg>
<\!-- https://github.com/progers/Patterns-Gallery -->
<\!-- Do not edit below, just used for the preview. -->
<div id="code">
[base64]
</div>
<style>
#code {
border: 1px solid #000;
background-color: rgba(255,255,255,.9);
font-family: monospace;
margin: 1em;
padding: .5em;
word-break: break-all;
}
svg { display: none; }
html { width: 100%; height: 100%; }
</style>
<script>
// Encode an SVG element as a base64 data uri.
function svgToBase64Image(svgElement) {
var div = document.createElement('div');
div.appendChild(svgElement.cloneNode(true));
var b64 = window.btoa(div.innerHTML);
return 'data:image/svg+xml;base64,' + b64;
}
var svgs = document.getElementsByTagName('svg');
var urls = [];
for (var i = 0; i < svgs.length; i++)
urls.push('url(' + svgToBase64Image(svgs[i]) + ')');
var url = urls.join(',');
var msg = 'Base64 CSS image (for cross-browser support):' +
'<br><br>background: ' + url + ';';
document.getElementById('code').innerHTML = msg;
document.body.style.background = url;
<\/script>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment