.square {
  width: 200px;
  height: 20px;
  background-color: red;
}

.circle {
  background-color: blue;
  border-radius: 50%;
  width: 200px;
  height: 20px;
}

.percent-circle {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="20"><circle r="10" cx="100" cy="10"/></svg>');
  width: 200px;
  height: 20px;
}

.inline-svg-background {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><circle r="10" cx="100" cy="10"/></svg>');
  width: 200px;
  height: 20px;
}

.inline-svg-with-background-color {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><circle r="10" cx="100" cy="10"/></svg>') green;
  width: 200px;
  height: 20px;
}

.inline-svg-with-transform {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><rect x1="90" y1="5" x2="105" y2="15"/></svg>') green;
  position: relative;
  width: 10px;
  height: 10px;
  top: 5px;
  left: 95px;
  transform: rotate(45deg);
}

.external-svg-background {
  background-image: url("../public/app/assets/wyvern.svg");
  width: 200px;
  height: 20px;
}

.external-png-background {
  background-image: url("grid_imager_background.png");
  width: 200px;
  height: 20px;
}

.masked-diamond {
  background-color: blue;
  width: 200px;
  height: 20px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='20' shape-rendering='crispEdges'><style>polygon {fill: white;}</style><defs><mask id='m'><polygon points='99 2, 106 9, 99 16, 92 9'/></mask></defs><rect x='0' y='0' width='200' height='20' mask='url(%23m)'/></svg>");
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='20' shape-rendering='crispEdges'><style>polygon {fill: white;}</style><defs><mask id='m'><polygon points='99 2, 106 9, 99 16, 92 9'/></mask></defs><rect x='0' y='0' width='200' height='20' mask='url(%23m)'/></svg>");
}

.overflowing {
  position: relative;
  background-color: blue;
  border-radius: 50%;
  width: 210px;
  height: 30px;
  left: -5px;
  top: -5px;
}
