Using root: to manage fill attribute for svg as data-uri from css variables

I can’t figure out how this is supposed to be done.

I looked on here to try to find an answer that will work and I still can’t figure out how to implement it in my code.

I need help doing this.

Nothing I am trying is working.

My attempt
https://jsfiddle.net/2n3zvwxh/

: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);
}

Can this SCSS be converted to root:?
https://jsfiddle.net/3smkg5p7/

$color-a: teal;
$color-b: black;
$color-c: orange;
$color-d: black;
@mixin element-color($color1, $color2, $color3, $color4) {
  background-image: 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='#{$color1}' /><rect x='5' y='5' width='160' height='160' fill='#{$color2}' /><rect x='10' y='10' width='150' height='150' fill='#{$color3}' /><rect x='15' y='15' width='140' height='140' fill='#{$color4}' /><rect x='20' y='20' width='130' height='130' fill='#{$color1}' /><rect x='25' y='25' width='120' height='120' fill='#{$color2}' /><rect x='30' y='30' width='110' height='110' fill='#{$color3}' /><rect x='35' y='35' width='100' height='100' fill='#{$color4}' /><rect x='40' y='40' width='90' height='90' fill='#{$color1}' /><rect x='45' y='45' width='80' height='80' fill='#{$color2}' /><rect x='50' y='50' width='70' height='70' fill='#{$color3}' /><rect x='55' y='55' width='60' height='60' fill='#{$color4}' /><rect x='60' y='60' width='50' height='50' fill='#{$color1}' /><rect x='65' y='65' width='40' height='40' fill='#{$color2}' /><rect x='70' y='70' width='30' height='30' fill='#{$color3}' /><rect x='75' y='75' width='20' height='20' fill='#{$color4}' /><rect x='80' y='80' width='10' height='10' fill='#{$color1}' /></svg>");
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  @include element-color($color-a, $color-b, $color-c, $color-d);
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.