JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<p>
This work demonstrates how to use SVG in a similar fashion to a CSS background with repeat-x on it. It's not the best imagery to work with for this type of thing, though. Ideally you would have a tiled svg asset so that it appears to be seamless.
</p>

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="i-music" x="50%" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
        <g class="i-music"><circle cx="48.6" cy="48.6" r="43.2" fill="#FAC61E" stroke="#F6DC64" stroke-width="7" stroke-miterlimit="10" class="i-music-bg"/><circle cx="48.6" cy="48.6" r="43.2" fill="none" stroke="#FAC61E" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" class="i-music-dash"/><path fill="#3D8EBA" d="M56.1 27.4l-1.4 5.4-1.6 6.4-2.8 11.3c-1.2-1.1-3-2-5.2-2.2-4-.5-7.5 1.4-7.8 4.2-.3 2.7 2.7 5.3 6.7 5.8 3.5.4 6.6-1 7.5-3.2.1-.3 3.7-14.9 3.7-14.9L73 47.7l-3.5 14c-1.2-1.2-3-2-5.2-2.3-4-.5-7.5 1.4-7.8 4.2-.3 2.7 2.7 5.3 6.7 5.8 3.8.4 7.2-1.3 7.7-3.8l4.2-17 1.2-4.6 1.8-7.2-22-9.4z" class="i-music-noteR"/><path fill="#52ABD3" d="M27.5 34.3l10.7-1.1-.7-2.7-13.3 1.4 1.6 6.1 1 3.6 4.4 16.2c-1.8-.5-4.1-.3-6.3.6-4.2 1.7-6.6 5.5-5.4 8.4 1.2 2.9 5.6 3.8 9.7 2.1 3.7-1.5 6-4.6 5.7-7.3 0-.4-5.4-20.2-5.4-20.2l10.7-1.1-.8-3.1-10.7 1.1-.3-.9-.9-3.1z" class="i-music-noteL"/></g>
    </pattern>

  </defs>

  <rect fill="url(#i-music)" x="0" y="0" width="100%" height="100"/>
</svg>