JSFiddle - React, Tailwind, and code Playground

by Mikhail

HTML

<a href="http://marcdasing.de/2015/11/02/der-vermeer-sensor/" title="" rel="bookmark">  
			<svg id="main810" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" onload="startup810(evt)" height="168" ><defs id="defs810"><pattern  x="-142" y="-54" id="pattern810" width="200" height="160" patternUnits="userSpaceOnUse" patternTransform="rotate(-5)"><image id="image810" preserveAspectRatio="none" height="160" width="200" xlink:href="http://marcdasing.de/wp-content/uploads/2015/11/vermeer_square-200x160.jpg"></image></pattern></defs></svg></a>

CSS

@font-face {
	font-family: 'MatryoshkaL';
	src: url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3E39_0_0.eot?#iefix') format('embedded-opentype'), url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3E3A_0_0.woff2') format('woff2'), url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3E3A_0_0.woff') format('woff'), url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3E3A_0_0.ttf') format('truetype'), url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3E3A_0_0.svg#wf') format('svg');
}
@font-face {
	font-family: 'NeuzeitGro-Bla';
	src: url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3D64_0_0.eot');
	src: url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3D64_0_0.eot?#iefix') format('embedded-opentype'), url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3D64_0_0.woff2') format('woff2'), url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3D64_0_0.woff') format('woff'), url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3D64_0_0.ttf') format('truetype'), url('http://marcdasing.de/wp-content/themes/typo/webfonts/2E3D64_0_0.svg#wf') format('svg');
}

JavaScript

var startup810 = function (evt) {
					var svgNS = "http://www.w3.org/2000/svg";
					var txtNode = document.createTextNode("E");
					text = document.createElementNS(svgNS,"text");
					text.setAttributeNS(null,"x",5);
					text.setAttributeNS(null,"y",130); 
					text.setAttributeNS(null,"style","font-family:MatryoshkaL; font-size:185px;");
					text.setAttributeNS(null,"fill","url(#pattern810)");
					text.appendChild(txtNode);                                                
					document.getElementById("main810").appendChild(text);
					
					var width;
					width = text.getComputedTextLength() +3;
					var elem = evt.target;
					elem.setAttribute("width", + Math.round(width));
				}