HTML + CSSHintergründe

Polierter Terrazzo

Bunte Steinsplitter in Zement mit glitzernden Glimmerpunkten und einem polierten Lichtreflex, der dem Cursor folgt.

Einstellungen

1x
1x
1

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 für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Hintergründe

Alle ansehen: Hintergründe

Wofür du ihn nutzen kannst

Ein Terrazzoboden, komplett in SVG gezeichnet. Zwei unterschiedlich große Kacheln liegen übereinander, eine mit großen Splittern und eine mit feiner Körnung, sodass die Wiederholung kaum auffällt. Eine Körnungstextur gibt dem Zement Struktur, kleine Glimmerpunkte funkeln zufällig, und ein weiches Lichtband gleitet darüber wie über frisch polierten Stein. Gut für Interior-, Keramik-, Café- und Lifestylemarken.

Die drei Farben färben die Splitter, der Grund passt sich dem hellen oder dunklen Theme an. Die Dichte macht die Steine kleiner und zahlreicher. Setze Text auf eine feste Karte, denn bei voller Deckkraft ist das Muster recht lebhaft.