Paper Grain SVG background, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/kDF5OCN6r7mb/amnt.svg" alt="Paper Grain" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"><rect width="1600" height="900" fill="#F3EBD9"/><defs><pattern id="paper" width="283" height="241" patternUnits="userSpaceOnUse"><g fill="#C9BEA7" opacity=".38"><circle cx="18" cy="31" r=".8"/><circle cx="91" cy="16" r=".65"/><circle cx="169" cy="44" r=".8"/><circle cx="251" cy="27" r=".6"/><circle cx="55" cy="103" r=".7"/><circle cx="133" cy="88" r=".9"/><circle cx="220" cy="112" r=".7"/><circle cx="271" cy="157" r=".8"/><circle cx="24" cy="190" r=".65"/><circle cx="104" cy="174" r=".8"/><circle cx="184" cy="207" r=".7"/><circle cx="246" cy="225" r=".85"/><circle cx="72" cy="230" r=".6"/></g><g fill="#FFFFFF" opacity=".54"><circle cx="48" cy="53" r=".7"/><circle cx="147" cy="22" r=".8"/><circle cx="238" cy="76" r=".65"/><circle cx="14" cy="139" r=".7"/><circle cx="174" cy="130" r=".8"/><circle cx="81" cy="151" r=".65"/><circle cx="211" cy="184" r=".75"/></g><g fill="none" stroke="#BDB29D" stroke-width=".8" stroke-linecap="round" opacity=".38"><path d="m31 73 4 1"/><path d="m112 56 3-2"/><path d="m206 29 5 1"/><path d="m263 103 3-2"/><path d="m72 119 4 2"/><path d="m151 159 5-1"/><path d="m42 216 3-2"/><path d="m230 151 4 2"/><path d="m126 218 4-1"/></g><g fill="none" stroke="#FFFFFF" stroke-width=".8" stroke-linecap="round" opacity=".55"><path d="m68 27 4-1"/><path d="m189 78 3 2"/><path d="m35 163 4-1"/><path d="m247 201 3-2"/><path d="m117 135 3 1"/></g></pattern></defs><rect width="1600" height="900" fill="url(#paper)"/></svg>

.paper-grain {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/kDF5OCN6r7mb/amnt.svg");
  background-size: contain;
}

import PaperGrainSvg from "./paper-grain.jsx"; // from the React tab above

<PaperGrainSvg width={48} height={48} />