JS Bin

<!-- Edit this and the preview will update automatically. -->

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='30'>

<defs>

<rect id='r' width='30' height='15' fill='#bb085f' stroke-width='2.5' stroke='#7a054d'/>

<g id='p'>

<use xlink:href='#r'/>

<use y='15' xlink:href='#r'/>

<use y='30' xlink:href='#r'/>

<use y='45' xlink:href='#r'/>

</g>

</defs>

<use xlink:href='#p' transform='translate(0 -25) skewY(40)'/>

<use xlink:href='#p' transform='translate(30 0) skewY(-40)'/>

</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>

​