Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
​
<!-- Edit this and the preview will update automatically. -->
<!-- This example shows two SVG backgrounds simultaneously. -->
<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'>
<path d='M-2 10L10 -2ZM10 6L6 10ZM-2 2L2 -2' stroke='#222' stroke-width='4.5'/>
</svg>
​
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
<linearGradient id='g' x2='1' y2='1'>
<stop stop-color='#F19'/>
<stop offset='100%' stop-color='#0CF'/>
</linearGradient>
<rect width='100%' height='100%' fill='url(#g)'/>
</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>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x