svg-filter-paper

<svg width="300" height="300" viewBox="0 0 300 300">
  <defs>
    <filter id="paperEffect">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="0.04"
        numOctaves="5"
        result="noise"
      />
      <feDiffuseLighting
        in="noise"
        lightingColor="#fff"
        surfaceScale="2"
        result="texture"
      >
        <feDistantLight azimuth="45" elevation="60" />
      </feDiffuseLighting>

      <feTurbulence
        type="turbulence"
        baseFrequency="0.05"
        numOctaves="3"
        seed="5"
        result="tornNoise"
      />
      <feDisplacementMap
        in="SourceGraphic"
        in2="tornNoise"
        scale="10"
        xChannelSelector="R"
        yChannelSelector="G"
        result="tornEdges"
      />

      <feBlend
        in="texture"
        in2="tornEdges"
        mode="multiply"
        result="combined"
      />
    </filter>
  </defs>

  <rect
    x="10"
    y="10"
    width="280"
    height="280"
    fill="#ffffff"
    filter="url(#paperEffect)"
  />
</svg>

this doesn't seem to be working for me embedded as a tiled background, could you show an example?

this doesn't seem to be working for me embedded as a tiled background, could you show an example?

https://v39.livecodes.io/?x=code/N4IgLglmA2CmIC4QFUB2kawCYAIAKATgPYBWsAxmCADQhawDO5BEADpEaoiDSABawAhlm4AeALawwgnOT6CCDKQF4AOigAqAMQC0ADnU4A9AD5VqCVJmpBktSABuEWAHdWRAmEPlOYWOnsXCCwwPmV6J3JYHSCQvmocCFQoCEFoHSY02GUARgA6AAZDU14+MHFoAEEwMEVuaEFUAHN7f28GhgZ7dV5pJoZEAG0AXVpBSggHWABRLCgPbnEFAGsAV1ZeJYI1jYRQBubVwSb4JDKK3h90fyokUQYHJpxY0PsAZgKikBwBCCay96fQxOVwAISIAA97AUcDCPnCgSAzKgcDhRPQAGYMZGo1GiDEQaB+AiJLD2ViCViwAjTDEYiheJHmXG4-GwDSrAgAI1WcFQUWZLNxYAAnlT7BiCONpNAAHJECBKdSCoU4LmCJRaAiwACOq385BF0MKABZlSjVThUKtxAB5SiCKZddQAVnNlpw2oYvLA9lQCqVIBVuNMwbx9IAIhA6aslAAZP5lJJNMO4pJ+gOwd2W6CJyDNADCRGgHnsAGI6Rjs6rvQQMeNYABlchZewAJmrQq9PvsfghYE5WaDFpZOMtbKjDGk6AT-zAOEEAC8IOJVq91Ca3d9YHAHIIOKh7AA2L7GMcs0RGSPRjGx2CzpPNZGptkc7m8g1ZkdC0Xi9QD98+QFYcPXVTVtT1A0jXUApCi3VNUWtO0HSdd5OxZJRsHseDvxZbsiV7DxUHlRUh1TUNcLRa8GFYBookkdAAFlKQQxJD3URsiE5KIAHEpVYPgIHIdC01QNtCIIYjMxE1FMjgewci+ViIQLeRUFQHdGx3BlS3UAAlGScBFVTGg06AtLgShdJAHjDPw31-yI2YTgYESKJfelQT5LBWPTf9YH7QdDKScTHMk5zGEM8QiHoexVyJNhoBFOzGB7dQfHELkkmwNzzzRK9CWJMdL0xbFzEFURtUoYMoXURTO2gkB6pA3EXjCdQ2z0JTv1+Od2y6zsCWgaBy0rStBsK6l7E5aAAAoywpKkaTpBkAEpswoy8HiaEwQAAX1oKcRTgRB9kaJojhObhyE6S5fBubh9sO5g2FuM7DmOU4QBIR0NRe9g7uudBHoOkAjrgBgBCkAYEBGZ6WHYGG4ZAG6GEIRgpEe2hWGIKJOg8JHRhR2MwCIcQtJqZMYeAUGV3cTxqdB39GFOpnGDAamQAOC7Pu4ZmmARqhaCuPxgaQJ7HGpBgIE4bg3gATl6Ihi05-xBC5OARCQNJoF4aVJi+q4GGLeBDukAcYZRkslBEPa9qAA

But how can I tile this as a background. That's the question :)

this doesn't seem to be working for me embedded as a tiled background, could you show an example?

https://claude.site/artifacts/b6c946c6-0546-4aa9-a2ce-5d7b6fc633cc

https://codepen.io/imhalid/pen/WbeEomq