SVG playground

SVG text

by rhelminen

HTML

<div>
  <svg height="100" width="300">
   <rect width="300" height="100" rx="50" style="fill: grey;" />
   <circle cx="50" cy="50" r="37" fill="white" />
  </svg>

  <svg height="100" width="300">
   <rect width="300" height="100" rx="50" style="fill: blue;" />
   <circle cx="250" cy="50" r="37" fill="white" />
  </svg>
</div>

<div>
  <svg height="180" width="300">
   <rect width="300" height="150" rx="50" style="fill: grey;" />
   <circle cx="50" cy="75" r="37" fill="white" />
  </svg>

  <svg height="180" width="300">
   <rect width="300" height="150" rx="50" style="fill: blue;" />
   <circle cx="250" cy="75" r="37" fill="white" />
  </svg>
</div>

<div>
  <svg height="100" width="250">
   <rect width="250" height="100" rx="50" style="fill: grey;" />
   <circle cx="50" cy="50" r="30" fill="white" />
  </svg>

  <svg height="100" width="250">
   <rect width="250" height="100" rx="50" style="fill: blue;" />
   <circle cx="200" cy="50" r="30" fill="white" />
  </svg>
</div>

<div>
  <svg width="30" height="18">
   <rect width="30" height="18" rx="50" style="fill: grey;" />
   <circle cx="5" cy="9" r="4" fill="white" />
  </svg>

  <svg width="30" height="18">
   <rect width="30" height="18" rx="50" style="fill: blue;" />
   <circle cx="25" cy="9" r="4" fill="white" />
  </svg>
</div>

<div id="toggle"></div>

CSS

#toggle {
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='100' width='200'><rect width='200' height='100' rx='50' style='fill: grey;' /><circle cx='50' cy='50' r='30' fill='white' /></svg>");
  height: 20px;
  width: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}