HTML + CSSArrière-plans

Terrazzo poli

Des éclats de pierre colorés pris dans le ciment, avec des paillettes de mica qui scintillent et un reflet poli qui suit le curseur.

Réglages

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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Arrière-plans

Voir tout : Arrière-plans

Où l’utiliser

Un sol en terrazzo dessiné en SVG. Deux motifs de tailles différentes se superposent, gros éclats d'un côté et grain fin de l'autre, si bien que la répétition se remarque à peine. Une texture de grain donne de la matière au ciment, de petites paillettes de mica scintillent au hasard et une bande de lumière glisse comme sur une pierre polie. Parfait pour la décoration, la céramique et les cafés.

Les trois couleurs teintent les éclats, et le fond s'adapte au thème clair ou sombre. La densité rend les pierres plus petites et plus nombreuses. Pose le texte sur une carte pleine, car le motif est chargé à pleine opacité.