Tunnel aus Papierschnitt
Neun Papierlagen mit welligen Öffnungen drehen sich langsam und fächern sich in der Tiefe auf, wenn sich der Cursor bewegt.
Einstellungen
Code
<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 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.
Mehr aus Hintergründe
Alle ansehen: HintergründeWofür du ihn nutzen kannst
Ein Papiertunnel aus neun gestapelten SVG-Bögen. Jeder Bogen hat eine wellige, wie von Hand geschnittene Öffnung, die nach hinten kleiner wird, und ein Schlagschatten lässt ihn über dem nächsten schweben. Die Lagen schwingen abwechselnd in entgegengesetzte Richtungen, ein warmes Licht leuchtet aus der Tiefe, und eine feine Körnung gibt dem Papier Struktur. Schön für Kindermarken, Schreibwaren und Storytelling.
Der vordere Bogen bekommt die erste Farbe, der hinterste die zweite, dazwischen wird gleichmäßig gemischt. Die dritte Farbe ist das Licht am Ende des Tunnels. Bewegst du den Cursor, verschiebt sich jede Lage je nach Tiefe und erzeugt eine sanfte Parallaxe.