Как сделать фигуры в background только c помощью css

let d = "Alle tekst komt van schrijvers die".split(" "); 
let left = 0; 
let groups = d3.select('svg') 
  .selectAll('g') 
  .data(d)  
  .enter() 
  .append('g') 
  .attr('transform', d => { 
    let t = `translate(${20+left*10}, -1)`; 
    left += d.length+1; 
    return t; 
  }) 
  .on('click', function() { 
    d3.selectAll('g').classed('active', false); 
    d3.select(this).raise().classed('active', true); 
  }); 
      
 
  groups.append('path') 
        .attr('d', d => ` 
          M${-10-rnd(10)},0  
          L${rnd(-10)},${20+rnd(10)} 
          L${d.length*10},${20+rnd(10)} 
          L${d.length*10+rnd(10)},0 Z 
        `) 
     
 
function rnd(base){ 
  return Math.random()*base; 
} 
 
groups.append('text')   
      .text(d => d) 
      .attr('y', 15)

body { 
  margin:0; 
  background-color: rgba(255,222,0,1); 
} 
 
path { 
  stroke: black; 
  fill: white; 
  cursor: pointer; 
  filter:url(#shadow); 
  transition: 200ms; 
} 
 
path:hover { 
  fill: lightgray; 
} 
 
text { 
  pointer-events:none; 
  font-family: monospace; 
  cursor: pointer; 
} 
 
g.active path { 
  fill: wheat; 
} 
 
g.active path:hover { 
  fill: lightgray; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
<svg viewbox="0 0 500 150"> 
   
  <defs> 
    <filter id="shadow" height="130%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/>  
      <feComponentTransfer> 
        <feFuncA type="linear" slope="0.5"/> 
      </feComponentTransfer> 
      <feMerge>  
        <feMergeNode/>  
        <feMergeNode in="SourceGraphic"/> 
      </feMerge> 
    </filter> 
  </defs> 
 
</svg>