Polished terrazzo
Colored stone chips set in cement, with mica flecks that sparkle and a polished highlight that follows the pointer.
Settings
Code
<div class="pt-uvq16-terrazzo"><svg class="tl" aria-hidden="true"><defs><pattern id="uvq16-tz-a" width="330" height="330" patternUnits="userSpaceOnUse"><polygon class="a" points="128.0,91.4 120.2,88.9 120.3,84.8 126.9,79.3 133.4,83.3"/><polygon class="b" points="168.3,124.7 171.9,117.8 182.9,114.4 187.0,125.4 179.3,132.2"/><polygon class="c" points="293.2,240.2 294.8,259.9 282.6,270.8 268.1,248.6 275.1,233.0"/><polygon class="a" points="3.4,252.6 -4.1,242.3 7.1,225.0 26.1,234.5 23.9,244.4"/><polygon class="a" points="333.4,252.6 325.9,242.3 337.1,225.0 356.1,234.5 353.9,244.4"/><polygon class="b" points="239.4,218.2 251.0,214.7 260.1,211.1 264.9,220.4 263.3,232.4 254.7,235.9 241.2,235.1"/><polygon class="c" points="93.3,165.8 84.8,155.3 89.0,139.6 108.0,144.3 115.5,149.3 101.7,165.8"/><polygon class="a" points="92.9,261.8 97.1,257.4 103.9,253.8 109.9,255.9 108.1,264.5 100.1,268.5"/><polygon class="b" points="52.5,45.3 52.8,52.2 46.6,63.7 41.3,63.2 34.3,56.6 37.5,45.5 42.8,39.5"/><polygon class="c" points="317.2,4.4 300.0,11.1 291.3,4.3 298.3,-6.0 318.1,-5.2"/><polygon class="c" points="317.2,334.4 300.0,341.1 291.3,334.3 298.3,324.0 318.1,324.8"/><polygon class="a" points="45.1,15.2 44.3,9.0 57.9,-0.3 69.2,10.6 70.2,16.7 59.1,28.8 44.7,29.0"/><polygon class="a" points="45.1,345.2 44.3,339.0 57.9,329.7 69.2,340.6 70.2,346.7 59.1,358.8 44.7,359.0"/><polygon class="b" points="77.1,194.1 83.5,201.9 83.7,208.6 73.4,211.8 64.1,201.3 70.6,189.8"/><polygon class="c" points="61.5,291.2 66.9,292.7 73.1,302.8 64.2,308.2 54.8,299.8"/><polygon class="a" points="89.8,69.3 88.9,61.1 93.6,58.5 98.6,57.0 100.2,64.2 97.7,70.8"/><polygon class="b" points="248.7,125.8 253.7,126.2 257.3,131.1 252.6,137.0 249.3,137.6 245.6,136.4 242.7,133.0"/><polygon class="c" points="291.9,130.9 287.2,115.8 289.1,106.4 307.5,107.8 309.8,118.2 312.9,128.1 300.8,134.1"/><polygon class="a" points="299.7,82.2 305.8,76.8 316.4,92.9 315.0,104.3 302.9,104.8 292.8,107.1 287.0,95.3"/><polygon class="b" points="194.4,109.0 196.4,98.0 205.5,94.7 213.7,97.6 216.2,108.2 203.8,117.0"/><polygon class="c" points="54.4,164.2 44.2,160.1 49.0,152.2 58.9,146.1 65.5,155.3 60.3,162.0"/><polygon class="a" points="80.4,212.8 80.4,196.6 92.1,191.9 106.4,200.3 108.8,210.2 95.5,223.4 83.2,220.9"/><polygon class="b" points="106.7,41.3 110.5,33.2 117.1,27.0 127.6,29.2 125.3,35.6 120.6,46.4"/><polygon class="c" points="275.7,102.4 278.7,84.5 290.9,73.2 299.9,83.4 298.0,105.9"/><polygon class="a" points="183.8,52.8 178.1,64.2 165.7,61.5 164.6,48.6 169.1,40.8 178.6,39.7"/><polygon class="a" points="25.0,157.5 23.9,159.0 22.9,159.3 20.4,158.7 20.7,157.2 21.7,155.4 24.0,155.5"/><polygon class="c" points="61.7,145.4 61.2,141.4 64.0,136.8 66.9,139.0 67.4,143.9"/><polygon class="c" points="264.1,59.0 265.0,59.3 265.8,59.6 266.0,61.3 265.0,61.8 263.8,61.5 263.0,60.1"/><polygon class="f" points="62.6,116.2 64.9,115.7 69.6,118.4 69.1,121.1 65.8,122.6 63.2,121.7 61.7,120.0"/><polygon class="a" points="121.1,146.3 123.4,145.9 126.4,148.8 123.7,150.4 121.5,150.8"/><polygon class="c" points="152.6,104.6 154.9,106.4 156.4,106.9 155.1,110.8 152.4,112.7 150.8,111.9 150.0,108.9"/><polygon class="e" points="-4.1,324.0 -3.7,318.7 -1.5,315.4 1.5,316.8 5.7,321.2 1.3,324.0 -1.3,324.5"/><polygon class="e" points="325.9,324.0 326.3,318.7 328.5,315.4 331.5,316.8 335.7,321.2 331.3,324.0 328.7,324.5"/><polygon class="b" points="241.4,180.1 244.6,179.8 244.9,186.3 242.6,185.7 238.8,187.2 237.0,183.8 237.5,180.9"/><polygon class="b" points="265.7,200.4 264.6,203.4 260.3,203.3 257.8,202.9 258.4,197.8 262.1,197.6"/><polygon class="e" points="283.5,222.2 281.9,222.6 280.4,221.4 279.8,219.5 281.0,219.1 282.9,219.0 283.6,220.6"/><polygon class="a" points="243.9,274.9 245.8,277.4 244.3,280.2 240.2,281.3 238.3,280.4 238.3,276.2"/><polygon class="b" points="76.5,99.9 76.5,102.6 74.8,103.8 73.6,101.9 73.6,99.0 75.3,97.7"/></pattern><pattern id="uvq16-tz-b" width="210" height="210" patternUnits="userSpaceOnUse"><polygon class="f" points="173.5,76.3 172.8,75.0 173.6,73.9 174.5,73.8 175.9,74.1 175.7,75.4 175.2,75.9"/><polygon class="a" points="137.5,114.3 139.6,118.1 136.9,119.3 135.4,118.7 133.8,117.2 135.0,115.4"/><polygon class="c" points="171.0,15.0 168.8,10.7 174.1,7.0 176.5,9.9 176.4,14.0"/><polygon class="c" points="144.5,47.5 142.4,46.4 142.1,44.1 143.3,43.6 146.1,44.0 146.4,45.3 145.3,47.8"/><polygon class="a" points="23.2,46.1 25.5,46.4 27.5,49.9 23.4,52.8 19.8,50.1 20.1,47.4"/><polygon class="e" points="121.1,107.8 120.5,104.9 122.1,102.1 125.8,103.3 129.7,106.2 128.8,108.3 125.1,109.6"/><polygon class="c" points="95.5,49.1 97.5,47.3 99.1,48.6 98.4,51.6 95.6,51.5"/><polygon class="f" points="62.6,9.6 61.1,12.7 55.6,14.5 54.2,9.2 58.2,5.7"/><polygon class="a" points="78.0,38.0 84.3,37.8 85.6,43.8 83.3,44.9 79.4,44.8 76.4,40.6"/><polygon class="e" points="30.9,178.0 33.5,174.7 37.8,175.9 37.7,180.2 34.0,182.2 32.2,181.7"/><polygon class="b" points="7.8,197.9 9.3,195.7 11.7,197.8 12.1,201.7 9.5,202.2 8.2,202.1 7.1,199.2"/><polygon class="e" points="145.3,60.5 148.0,57.9 150.3,57.5 153.6,61.1 150.4,65.2 146.4,63.1"/><polygon class="f" points="86.8,38.8 82.0,39.9 78.1,37.5 79.6,33.2 86.0,34.7"/><polygon class="c" points="64.1,71.9 66.5,71.0 67.2,74.5 64.9,75.3 62.8,73.7"/><polygon class="c" points="168.8,106.3 172.4,109.8 170.3,113.2 167.0,112.3 166.0,110.9 165.1,107.5"/><polygon class="e" points="48.9,90.9 42.1,90.9 40.5,87.3 44.4,83.0 50.3,85.7"/><polygon class="a" points="159.1,65.5 161.1,63.5 162.4,62.2 164.8,64.4 163.6,65.9 162.7,67.2 158.9,66.7"/><polygon class="b" points="202.3,166.9 203.8,166.0 206.9,167.3 207.3,169.5 205.6,170.9 202.0,170.9"/><polygon class="b" points="187.5,62.2 185.4,63.0 184.1,61.4 183.2,59.9 185.1,58.3 187.4,58.8"/><polygon class="b" points="7.4,37.0 11.3,35.1 14.0,38.9 14.4,42.2 12.0,46.5 10.0,45.8 6.3,42.8"/><polygon class="f" points="126.6,169.2 129.2,165.8 131.7,167.1 132.6,167.8 132.8,170.1 131.4,172.3 127.5,170.6"/><polygon class="e" points="162.9,133.2 162.2,135.1 160.1,135.5 159.0,135.5 157.8,132.6 158.5,131.1 161.1,131.8"/><polygon class="b" points="14.1,81.0 16.9,82.9 16.9,85.6 13.4,86.2 12.8,82.7"/><polygon class="a" points="4.3,74.4 1.3,76.1 -0.6,73.6 -0.4,71.5 2.0,70.6 4.3,72.6"/><polygon class="a" points="214.3,74.4 211.3,76.1 209.4,73.6 209.6,71.5 212.0,70.6 214.3,72.6"/><polygon class="a" points="108.9,-3.1 109.1,-1.0 107.2,-0.1 105.5,-0.5 105.8,-2.0 106.1,-3.3 108.0,-3.5"/><polygon class="a" points="108.9,206.9 109.1,209.0 107.2,209.9 105.5,209.5 105.8,208.0 106.1,206.7 108.0,206.5"/><polygon class="b" points="108.5,116.0 106.0,116.2 105.8,114.4 105.9,113.4 106.6,112.7 108.9,113.0 109.2,113.9"/><polygon class="e" points="99.8,33.7 99.6,35.7 98.2,35.6 96.7,33.7 98.4,32.7"/><polygon class="a" points="117.7,23.4 117.0,19.9 118.4,18.6 121.1,18.8 122.9,22.6 122.4,23.9 118.8,24.6"/><polygon class="a" points="140.7,14.5 145.2,15.1 147.1,18.8 145.3,21.6 143.2,22.5 141.2,21.1 139.9,17.2"/><polygon class="a" points="27.8,76.4 26.9,78.3 25.1,77.6 25.2,75.6 27.0,75.5"/><polygon class="a" points="93.9,61.3 93.2,61.9 91.5,60.5 91.3,59.3 92.1,58.7 93.5,58.9 94.6,60.7"/><polygon class="a" points="107.3,62.5 105.0,66.2 102.3,64.0 100.5,62.2 102.8,58.9 104.9,58.8 107.4,59.2"/><polygon class="e" points="178.7,194.8 177.4,195.0 176.1,193.9 177.1,192.2 179.0,193.1"/><polygon class="f" points="163.8,49.9 164.4,47.6 169.8,46.9 170.2,50.9 166.5,54.1"/><polygon class="e" points="151.4,112.9 150.4,115.5 147.6,115.2 147.5,113.4 150.2,111.7"/><polygon class="a" points="181.3,172.0 181.9,176.4 178.3,177.3 176.8,174.8 178.9,172.9"/><polygon class="f" points="121.8,90.3 120.3,89.1 120.5,85.9 123.3,86.0 124.8,88.1"/><polygon class="a" points="19.5,83.9 17.1,83.5 16.6,80.6 18.6,80.1 20.6,81.1"/><polygon class="e" points="25.4,200.2 25.4,195.2 29.2,193.1 34.5,196.9 30.4,201.1"/><polygon class="e" points="192.2,82.2 190.9,84.4 185.9,82.3 186.3,78.5 188.5,77.1 192.1,78.9"/><polygon class="b" points="154.9,4.1 152.9,7.3 148.2,7.4 147.3,5.5 145.9,2.7 148.3,-0.0 153.1,-0.2"/><polygon class="b" points="154.9,214.1 152.9,217.3 148.2,217.4 147.3,215.5 145.9,212.7 148.3,210.0 153.1,209.8"/><polygon class="e" points="93.5,150.2 91.0,146.3 94.8,140.7 97.4,144.0 97.7,148.1"/><polygon class="b" points="68.3,18.4 74.8,19.8 76.1,22.1 70.0,27.4 66.4,23.9 66.5,21.5"/><polygon class="b" points="34.4,23.9 32.2,22.4 32.1,17.7 36.2,16.2 39.2,20.2 37.3,22.2"/><polygon class="e" points="72.7,185.3 72.5,186.6 69.6,189.4 66.5,188.9 65.1,185.3 67.7,184.0 70.3,182.9"/><polygon class="f" points="41.2,138.9 44.7,132.1 51.7,134.8 52.0,139.5 45.3,141.4"/></pattern></defs><rect width="100%" height="100%" fill="url(#uvq16-tz-a)"/><rect width="100%" height="100%" fill="url(#uvq16-tz-b)"/></svg><div class="mi"><i style="--x:0.0%;--y:34.1%;--dl:-4.67s"></i><i style="--x:13.5%;--y:58.1%;--dl:-1.13s"></i><i style="--x:55.2%;--y:40.3%;--dl:-2.08s"></i><i style="--x:84.5%;--y:65.6%;--dl:-0.70s"></i><i style="--x:42.2%;--y:14.1%;--dl:-3.82s"></i><i style="--x:48.0%;--y:14.8%;--dl:-1.27s"></i><i style="--x:65.3%;--y:20.6%;--dl:-3.89s"></i><i style="--x:66.3%;--y:43.6%;--dl:-3.52s"></i><i style="--x:92.4%;--y:38.9%;--dl:-0.17s"></i><i style="--x:57.9%;--y:72.8%;--dl:-0.70s"></i><i style="--x:4.1%;--y:15.3%;--dl:-3.30s"></i><i style="--x:56.6%;--y:29.1%;--dl:-4.16s"></i><i style="--x:87.7%;--y:96.2%;--dl:-3.52s"></i><i style="--x:5.6%;--y:15.2%;--dl:-2.12s"></i><i style="--x:84.8%;--y:86.1%;--dl:-2.50s"></i><i style="--x:39.9%;--y:84.4%;--dl:-0.98s"></i><i style="--x:99.9%;--y:40.2%;--dl:-1.47s"></i><i style="--x:76.5%;--y:84.7%;--dl:-0.36s"></i><i style="--x:85.6%;--y:49.5%;--dl:-0.28s"></i><i style="--x:62.3%;--y:0.4%;--dl:-4.99s"></i><i style="--x:85.4%;--y:64.9%;--dl:-0.19s"></i><i style="--x:52.8%;--y:55.9%;--dl:-1.51s"></i></div><i class="lt"></i><i class="sh"></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
See all BackgroundsWhere to use it
A terrazzo floor drawn entirely in SVG. Two tiles of different sizes overlap, one with large chips and one with fine grit, so the repeat is hard to spot. A grain texture gives the cement some body, tiny mica flecks twinkle at random and a soft band of light slides across like a freshly polished surface. Works well for interior, ceramics, café and lifestyle brands.
The three colors paint the chips, while the base adapts to light and dark themes. Density makes the stones smaller and more numerous. Keep text on a solid card above it, since the chips are busy at full opacity.