JSFiddle - React, Tailwind, and code Playground

by unloco

HTML

<svg class="dsn-design-text dsn-design-item dsn-wrapped" preserveAspectRatio="none" viewBox="0 -275.3599853515625 511.0199890136719 342.7200012207031" width="511.0199890136719" height="342.7200012207031">
                    <defs>
                        <filter id="texture4051" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
                            <feImage href="https://dev.net/git/presta17_designer/designer/color/small.jpg" result="texture-img" width="256" height="256"></feImage>
                            <feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile"></feTile>
                            <feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"></feComposite>
                            <feBlend in="SourceGraphic" in2="composite" mode="multiply"></feBlend>
                        </filter>
                    </defs>

<g >
                    <text class="dsn-text-value" font-size="300" font-family="'Arial'" filter="url(#texture4051)" x="0" y="0" text-anchor="middle" stroke="#ff0000" stroke-width="0px" stroke-opacity="1" fill-opacity="1"><tspan x="50%" dy="0">‎123‎</tspan>
                    </g>
                    </text>
                </svg>

CSS

body{background: #000}