HTML + CSSFondos

Túnel de papel recortado

Nueve capas de papel con agujeros ondulados que giran despacio y se separan en profundidad al mover el cursor.

Ajustes

1x
1x
1

Código

<div class="pt-uvq16-paper-tunnel"><div class="st"><svg class="ly" style="--i:0;--r:-1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path fill-rule="evenodd" d="M-2000-2000H3000V3000H-2000ZM571.8 500.0L573.6 505.1L574.0 510.4L573.1 515.5L571.1 520.4L568.7 525.0L566.2 529.5L563.9 534.0L561.7 538.6L559.3 543.1L556.2 547.2L552.3 550.5L547.6 552.9L542.3 554.2L537.0 554.8L532.0 555.4L527.5 556.5L523.6 558.4L519.9 561.1L516.1 564.4L511.9 567.6L507.4 570.1L502.5 571.5L497.5 571.7L492.5 571.2L487.6 570.3L482.7 569.5L477.6 569.0L472.3 568.5L467.0 567.6L462.0 565.8L457.6 562.9L454.2 558.7L451.8 553.6L450.2 548.1L449.0 542.8L447.7 538.0L445.8 533.9L443.2 530.2L440.1 526.7L437.1 522.9L434.6 518.8L433.0 514.2L432.2 509.5L431.9 504.8L431.7 500.0L431.2 495.2L430.2 490.2L429.0 484.9L428.1 479.4L428.0 473.8L429.4 468.6L432.3 464.0L436.5 460.3L441.4 457.4L446.5 455.1L451.2 452.8L455.3 450.4L459.0 447.5L462.5 444.4L466.2 441.5L470.3 439.2L474.8 437.6L479.5 436.8L484.2 436.4L488.7 435.9L493.1 434.8L497.7 432.9L502.4 430.4L507.6 428.0L513.0 426.2L518.5 425.8L523.7 426.9L528.5 429.6L532.6 433.2L536.2 437.2L539.7 441.2L543.2 444.7L546.8 448.0L550.4 451.3L553.7 455.0L556.3 459.1L557.9 463.8L558.7 468.8L559.1 473.7L559.6 478.3L560.7 482.6L562.8 486.7L565.7 490.8L568.9 495.2Z"/></svg><svg class="ly" style="--i:1;--r:1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path fill-rule="evenodd" d="M-2000-2000H3000V3000H-2000ZM630.4 500.0L631.1 509.2L627.4 517.9L619.6 525.4L610.8 531.8L604.2 537.9L601.3 545.1L601.1 553.8L600.8 563.0L598.3 571.4L593.4 578.4L587.6 584.6L582.6 591.7L578.4 600.3L573.7 609.2L566.9 615.9L557.6 618.1L546.9 616.1L536.5 612.4L527.5 610.1L519.6 611.2L512.0 614.5L504.1 617.6L495.9 618.5L487.7 617.3L479.5 616.1L470.9 616.8L461.2 619.5L450.7 622.0L441.0 621.1L433.4 615.3L428.6 605.9L425.3 595.6L421.7 587.0L416.5 580.6L410.3 575.3L404.6 569.3L401.0 561.9L398.7 553.9L395.7 546.4L390.0 540.0L381.6 533.9L372.9 527.0L367.3 518.7L366.8 509.3L370.8 500.0L376.3 491.3L380.4 483.2L382.6 475.1L384.4 466.8L387.8 459.2L393.7 452.7L400.5 447.1L405.7 441.1L407.9 433.1L407.9 422.7L408.4 411.5L411.7 401.9L418.6 395.8L427.7 392.8L437.1 391.0L445.6 388.5L453.5 384.9L461.6 381.9L470.5 381.6L479.6 384.4L488.3 388.4L496.2 390.5L503.9 388.5L512.3 383.2L521.6 377.6L531.2 375.0L540.1 376.7L548.0 381.3L555.4 386.4L563.2 390.5L571.4 394.1L578.8 399.1L583.8 406.9L585.9 417.0L586.6 427.3L588.5 435.7L593.7 441.5L601.9 445.8L610.8 450.7L617.6 457.2L621.2 465.3L622.7 473.9L624.3 482.5L627.3 491.1Z"/></svg><svg class="ly" style="--i:2;--r:-1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path fill-rule="evenodd" d="M-2000-2000H3000V3000H-2000ZM671.6 500.0L667.4 511.7L661.6 522.7L655.7 533.1L650.9 543.3L648.3 554.0L647.8 565.8L648.3 578.9L648.4 592.7L646.5 606.4L641.7 618.9L633.9 629.3L623.9 637.6L612.6 644.1L601.1 649.9L589.9 655.7L579.0 661.9L568.0 668.2L556.4 673.5L544.0 676.5L531.1 676.5L518.2 673.3L505.9 667.8L494.4 661.6L483.6 656.5L472.9 653.5L461.9 652.9L449.9 654.1L437.2 655.4L424.2 655.4L411.7 653.0L400.3 647.9L390.2 640.6L381.0 632.1L372.2 623.4L362.9 615.0L353.1 606.8L343.1 598.1L334.0 588.2L327.4 576.9L324.1 564.0L324.5 550.3L327.9 536.6L332.8 523.5L337.5 511.4L340.5 500.0L341.3 488.9L340.4 477.6L339.1 465.8L338.7 453.7L340.3 441.9L344.2 430.6L349.8 420.1L356.2 410.1L362.2 399.9L367.5 388.8L372.4 376.7L377.5 364.0L384.1 351.6L392.9 341.2L404.1 333.9L417.2 330.2L431.3 329.8L445.3 331.6L458.6 333.9L471.0 335.4L482.7 335.4L494.2 334.3L505.8 333.0L517.6 332.8L529.2 334.6L540.3 338.6L550.7 343.9L560.8 349.6L571.1 354.3L582.3 357.4L594.9 359.4L608.5 361.1L622.5 363.9L635.5 369.1L646.3 377.2L654.0 388.1L658.7 400.8L661.2 414.3L662.8 427.5L664.6 440.1L667.1 452.1L670.0 463.9L672.5 475.8L673.2 487.9Z"/></svg><svg class="ly" style="--i:3;--r:1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path fill-rule="evenodd" d="M-2000-2000H3000V3000H-2000ZM721.7 500.0L722.1 515.5L726.2 531.8L732.9 549.5L737.1 568.0L733.8 585.1L721.3 598.5L703.1 608.0L685.1 615.7L671.7 624.8L662.9 636.7L655.5 650.2L646.0 662.2L633.5 670.9L620.0 677.8L607.8 686.8L597.8 700.5L588.0 717.8L575.9 733.6L560.4 742.2L542.5 741.1L524.5 733.2L507.8 724.3L492.3 719.1L477.1 717.8L461.8 716.7L447.1 712.1L434.0 703.3L421.7 693.8L408.3 688.1L391.4 688.0L371.4 690.7L351.0 690.8L334.4 683.9L324.0 670.0L318.5 652.3L314.2 635.0L308.0 620.0L300.0 606.3L293.6 591.9L292.0 575.7L295.1 558.8L298.7 542.8L297.4 528.5L288.7 514.8L275.4 500.0L263.9 483.5L259.5 466.2L263.5 449.7L272.3 434.7L281.1 420.3L287.4 405.4L293.4 390.1L302.5 376.6L317.1 367.1L335.1 361.6L352.2 357.3L364.5 349.6L371.8 336.0L377.2 318.0L384.7 300.3L396.4 287.6L411.5 280.8L427.6 277.3L443.4 273.0L458.8 266.6L474.9 260.8L491.6 260.5L508.1 268.2L522.9 281.8L536.1 295.3L549.1 302.9L563.9 303.2L580.9 299.7L598.5 298.0L614.6 301.6L628.2 309.9L641.1 319.4L655.5 327.4L671.8 334.1L687.6 342.6L698.5 355.8L701.6 374.0L698.4 394.5L694.1 413.6L694.1 429.4L700.4 442.5L710.1 455.3L718.3 469.3L721.7 484.5Z"/></svg><svg class="ly" style="--i:4;--r:-1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path fill-rule="evenodd" d="M-2000-2000H3000V3000H-2000ZM767.8 500.0L771.1 519.0L776.4 538.9L782.4 560.0L786.7 582.2L786.6 604.3L780.6 624.9L768.5 642.8L751.7 657.3L732.4 668.9L713.1 678.8L695.4 688.7L679.6 699.5L665.2 711.5L650.8 723.6L635.2 734.3L618.1 742.1L599.6 746.6L580.7 748.5L562.2 749.5L544.4 751.9L527.0 757.2L509.3 765.8L490.4 776.3L469.9 786.2L448.4 792.7L426.8 793.7L406.3 788.4L387.8 777.8L371.3 763.9L356.3 749.0L341.7 734.8L326.8 721.7L311.5 709.3L296.9 696.1L284.4 680.9L275.2 663.4L269.8 643.8L267.7 623.5L266.8 603.8L264.8 585.6L259.7 568.9L250.7 553.0L238.8 536.7L226.2 519.1L215.7 500.0L209.6 479.7L208.8 459.1L213.0 439.0L220.4 419.8L228.9 401.3L237.1 383.0L244.6 364.2L252.2 345.2L261.6 326.8L274.2 310.5L290.7 297.8L310.4 289.4L331.9 284.9L353.3 282.5L373.0 280.1L390.4 275.3L405.9 267.1L420.7 255.9L436.0 243.3L452.7 231.8L470.9 223.5L490.2 219.4L509.8 219.1L529.3 221.1L548.7 223.6L568.5 225.2L589.1 225.7L610.5 226.5L631.9 229.5L652.0 236.7L669.2 249.2L682.4 266.5L691.6 287.3L697.8 309.0L703.0 329.7L709.1 348.1L717.6 364.1L728.2 378.7L739.9 393.2L750.8 408.7L759.0 425.7L763.8 443.9L765.8 462.7L766.4 481.4Z"/></svg><svg class="ly" style="--i:5;--r:1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path fill-rule="evenodd" d="M-2000-2000H3000V3000H-2000ZM797.1 500.0L799.0 520.9L807.7 543.2L819.4 567.9L828.1 594.1L829.2 619.8L821.5 643.1L807.4 663.5L791.2 681.9L776.0 700.5L762.4 720.2L748.5 740.0L731.4 757.0L709.5 768.1L683.6 772.2L656.7 771.4L631.9 770.3L610.7 774.0L592.6 784.8L575.2 801.5L556.3 819.3L535.0 833.0L511.9 839.6L488.1 839.7L464.6 836.5L441.1 834.0L416.8 833.6L391.6 833.7L366.6 830.2L344.3 819.3L326.9 799.9L314.8 774.5L306.2 748.0L297.3 725.2L284.6 708.0L267.2 695.3L246.8 683.9L227.2 670.4L211.7 653.3L201.1 633.1L193.1 611.7L184.4 590.5L172.2 569.7L157.4 548.1L144.0 524.9L137.1 500.0L140.6 474.9L154.1 451.4L173.8 430.7L193.6 412.1L209.0 394.1L218.5 374.7L224.7 353.6L231.5 332.2L242.0 312.6L256.8 296.0L273.8 281.5L289.8 266.5L303.1 248.0L314.5 225.0L326.7 199.8L342.5 177.1L363.5 162.1L388.6 157.1L415.5 161.1L441.7 169.3L466.0 176.6L488.8 180.0L511.2 180.1L533.6 180.1L555.7 184.0L576.5 193.2L595.5 206.0L613.8 218.3L633.6 226.1L656.9 228.3L683.9 227.3L712.5 228.0L738.9 234.7L759.4 249.5L772.8 271.1L780.8 296.0L786.9 320.7L794.5 343.4L804.0 364.7L813.3 386.0L818.8 408.6L817.8 432.5L811.0 456.3L802.3 478.9Z"/></svg><svg class="ly" style="--i:6;--r:-1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path fill-rule="evenodd" d="M-2000-2000H3000V3000H-2000ZM888.8 500.0L883.5 526.8L872.1 552.3L856.2 575.7L839.0 597.2L823.8 617.9L813.1 639.4L807.2 663.3L804.5 690.3L802.1 719.5L796.6 748.9L785.8 776.0L769.1 798.9L747.6 816.9L723.3 831.0L698.1 843.1L673.3 855.2L648.8 868.4L624.1 882.0L598.1 893.6L570.6 900.6L542.1 900.4L513.7 892.6L486.8 878.7L462.0 861.9L439.0 846.1L416.6 834.3L393.5 827.8L368.5 825.5L341.7 824.6L314.2 821.8L287.7 814.8L263.6 802.5L242.6 785.8L223.9 766.6L205.9 746.8L186.7 727.6L165.7 708.9L143.7 689.5L123.1 667.8L107.2 643.0L98.7 615.1L98.9 585.3L106.7 555.3L119.2 526.6L132.5 500.0L143.2 475.0L149.7 450.8L152.4 426.1L153.5 400.7L156.1 374.8L162.5 349.7L173.4 326.4L188.0 305.1L204.2 285.1L219.7 264.8L233.4 242.6L245.6 217.4L257.8 190.0L272.4 162.6L291.3 138.4L315.0 120.7L342.9 111.2L373.2 109.7L403.7 113.9L433.1 120.4L460.7 126.1L487.1 129.3L512.9 130.1L538.9 130.4L564.7 132.9L589.8 139.7L613.3 151.3L634.8 166.4L654.9 182.4L675.2 196.6L697.4 207.4L722.9 214.8L751.5 220.7L781.6 228.0L810.5 239.5L834.9 256.7L852.9 279.5L864.1 306.4L869.8 335.3L872.8 364.3L875.6 392.3L879.7 419.3L884.6 445.9L888.6 472.8Z"/></svg><svg class="ly" style="--i:7;--r:1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path fill-rule="evenodd" d="M-2000-2000H3000V3000H-2000ZM925.6 500.0L923.7 529.6L919.8 559.0L918.7 589.0L922.5 621.2L928.5 655.9L930.6 691.7L922.7 724.8L902.3 751.4L871.5 769.9L836.3 782.2L803.0 792.6L775.1 805.6L752.4 823.1L731.6 843.4L709.1 862.3L683.3 875.8L654.9 883.4L626.3 888.6L598.9 896.6L572.6 911.6L545.5 933.1L515.9 955.9L483.5 972.2L450.0 975.8L417.9 965.4L389.1 944.7L363.3 920.7L338.6 899.4L313.2 883.1L286.6 869.5L261.0 854.3L239.2 833.8L222.7 808.0L209.9 780.1L196.7 754.5L177.9 734.0L151.1 718.0L118.5 702.8L86.0 684.3L60.7 659.9L47.1 629.9L45.1 596.7L49.7 563.3L55.1 531.1L57.6 500.0L57.8 469.1L60.3 438.2L69.7 408.5L88.1 381.9L112.8 359.1L137.6 338.6L156.3 317.3L166.2 291.4L169.3 259.7L171.4 224.3L178.6 189.6L194.3 160.5L218.1 139.1L246.3 123.8L275.2 110.5L302.8 95.6L329.8 78.6L358.0 63.0L388.9 54.4L421.9 56.8L454.8 69.8L485.6 88.4L513.8 104.7L540.7 112.6L568.7 110.6L599.1 102.5L631.6 95.1L663.8 94.6L693.7 102.9L720.6 117.8L746.4 134.7L773.6 149.8L803.5 163.0L834.3 177.1L861.6 196.6L880.1 223.8L887.3 258.0L884.9 295.4L878.9 331.3L876.3 363.0L881.5 390.6L894.1 416.2L909.3 442.5L921.0 470.6Z"/></svg><svg class="ly" style="--i:8;--r:-1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path fill-rule="evenodd" d="M-2000-2000H3000V3000H-2000ZM1006.6 500.0L1002.0 535.1L998.3 570.0L995.8 605.4L992.8 641.3L986.1 676.9L972.5 710.4L950.4 739.5L920.6 762.8L886.2 780.6L851.3 794.8L819.5 808.6L792.9 825.3L770.9 846.7L751.4 872.8L731.5 900.9L708.5 927.5L681.6 949.4L651.0 964.7L618.2 974.2L584.7 980.3L551.1 986.1L517.3 994.0L482.4 1004.0L446.0 1013.8L408.4 1019.4L371.1 1016.9L336.3 1003.8L305.8 980.6L280.5 950.0L259.5 916.5L240.5 884.7L220.9 857.2L198.7 834.7L173.6 815.2L147.2 796.1L122.1 774.5L101.1 749.3L85.1 720.6L73.5 689.9L63.6 658.9L52.0 628.5L36.6 598.5L17.2 567.8L-3.7 535.2L-21.7 500.0L-32.1 462.8L-31.6 425.3L-19.6 389.6L1.7 357.1L28.1 328.2L55.1 301.9L79.4 276.3L100.0 250.1L118.4 222.8L137.1 195.5L158.8 170.5L184.6 149.7L214.1 134.1L245.4 122.5L276.1 112.2L304.7 99.6L331.1 81.8L356.5 58.4L383.2 31.4L412.7 4.9L445.8 -16.1L481.6 -27.7L518.5 -28.3L554.6 -19.5L589.0 -4.5L621.6 12.4L653.3 28.2L685.1 42.0L717.0 55.1L748.1 70.4L776.3 90.3L799.8 116.2L817.6 147.3L830.5 180.8L841.3 213.7L853.5 243.2L870.4 268.6L893.4 290.8L921.3 312.4L950.6 336.0L977.0 363.2L996.3 394.5L1006.9 428.8L1009.3 464.4Z"/></svg></div><i class="nz"></i></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Fondos

Ver todos: Fondos

Dónde usarlo

Un túnel de papel hecho con nueve hojas SVG apiladas. Cada hoja tiene una abertura ondulada, como recortada a mano, que se estrecha hacia el fondo, y una sombra la hace flotar sobre la siguiente. Las capas se balancean en sentidos alternos, una luz cálida brilla en el punto más hondo y un grano fino da textura al papel. Precioso para marcas infantiles, papelería y páginas que cuentan historias.

La hoja delantera toma el primer color y la del fondo el segundo, con las intermedias mezcladas por igual. El tercer color es la luz al final del túnel. Al mover el cursor, cada capa se desplaza según su profundidad y crea un paralaje suave.