<div id="wrapper"><b>Stegosaurus</b> were large, heavily built, herbivorous quadrupeds with rounded backs, short fore limbs, long hind limbs, and tails held high in the air. <span class="emoji"></span>Due to their distinctive combination of broad, upright plates and tail tipped with spikes, Stegosaurus is one of the most recognizable kinds of dinosaurs. The function of this array of plates and spikes has been the subject of much speculation among scientists. 
<div id="ffMessage" hidden>If you're viewing this in Firefox, you might not see the shape. </div>
	--image-url: url("data:image/svg+xml,<svg width='150px' height='150px' xmlns='http://www.w3.org/2000/svg'> <clipPath id='emojiClipPath'> <text x='0' y='130px'  font-size='130px'>🦕</text> </clipPath> <rect x='0' y='0' fill='green' width='150px' height='150px' clip-path='url(%23emojiClipPath)'/>  </svg>");
	background: var(--image-url);
	shape-outside: var(--image-url);
	float: left;
	width: 150px;height: 150px;
	margin-left: -6px;
#wrapper {
	margin: auto; margin-top: calc(50vh - 170px);
	text-align: justify;
	width: 280px; height: 340px;
body { font-family: "Sorts mill goudy"; }

@supports (-moz-user-focus: none) { /* Firefox */
	#ffMessage { display: block; margin: auto; width: 280px; color: blue; }

External CSS

  1. https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.