JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<svg viewBox="0 0 600 330">
					<filter id="conform" x="-50%" y="-50%" width="200%" height="200%">
						<feImage xlink:href="https://p337.p2.n0.cdn.getcloudapp.com/items/bLudY0WP/16a139b1-09d9-40a8-bfe5-c469537c3995.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage>
						<!-- desaturate the image -->
						<feColorMatrix type="saturate" values="0" result="IMAGE" />
						<!-- decrease level of details so the effect on text is more realistic -->
						<feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur>
						<!-- use the displacement map to distort the text -->
						<feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap>
						<!-- add the image as a background behind the text again -->
						<feImage xlink:href="img/dm.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage>
						<feColorMatrix in="TEXTURED_TEXT" result="TEXTURED_TEXT_2" type="matrix" values="1 0 0 0 0 
							   0 1 0 0 0 
							   0 0 1 0 0 
							   0 0 0 .9 0" />
						<!--  blend the text with the background image -->
						<feBlend in="BG" in2="TEXTURED_TEXT_2" mode="multiply" result="BLENDED_TEXT"></feBlend>
						<!-- layer the text on top of the background image -->
						<feMerge>
							<feMergeNode in="BG"></feMergeNode>
							<feMergeNode in="BLENDED_TEXT"></feMergeNode>
						</feMerge>
					</filter>
					<text dx="60" dy="200" font-size="10em" filter="url(#conform)" fill="#00826C">organic</text>
					<!-- <g filter="url(#conform)">
			  				<text dx="60" dy="200" font-size="10em" transform="translate(0 30) rotate(-5)" fill="#00826C">organic</text>
		 				 </g> -->
				</svg>