JSFiddle - React, Tailwind, and code Playground

CSS

:root {
--color-a: teal;
--color-b: black;
--color-c: orange;
--color-d: black;
}

--variableSVGFill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165' viewBox='0 0 165 165'><rect x='0' y='0' width='165' height='165' fill='var(--color-a)' /><rect x='5' y='5' width='160' height='160' fill='var(--color-b)' /><rect x='10' y='10' width='150' height='150' fill='var(--color-c)' /><rect x='15' y='15' width='140' height='140' fill='var(--color-d)' /><rect x='20' y='20' width='130' height='130' fill='var(--color-a)' /><rect x='25' y='25' width='120' height='120' fill='var(--color-b)' /><rect x='30' y='30' width='110' height='110' fill='var(--color-c)' /><rect x='35' y='35' width='100' height='100' fill='var(--color-d)' /><rect x='40' y='40' width='90' height='90' fill='var(--color-a)' /><rect x='45' y='45' width='80' height='80' fill='var(--color-b)' /><rect x='50' y='50' width='70' height='70' fill='var(--color-c)' /><rect x='55' y='55' width='60' height='60' fill='var(--color-d)' /><rect x='60' y='60' width='50' height='50' fill='var(--color-a)' /><rect x='65' y='65' width='40' height='40' fill='var(--color-b)' /><rect x='70' y='70' width='30' height='30' fill='var(--color-c)' /><rect x='75' y='75' width='20' height='20' fill='var(--color-d)' /><rect x='80' y='80' width='10' height='10' fill='var(--color-a)' /></svg>");

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  
  var(--variableSVGFill);
}