<div id="design">
<p id="leftSide">A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T <span class="shape"></span>A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T </p>
<p id="rightSide">A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T <span class="shape"></span>A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T A C G T </p>

#design {
	border-radius: 50%;
	box-shadow: 6px 6px 20px silver;
	cursor: default;
	display: grid; grid: "1fr 1fr";
	margin: auto; margin-top: calc(50vh - 200px);
	overflow: hidden;
	user-select: none; -webkit-user-select: none;
	width: 400px; height: 400px;
}
p {
	background: white;
	font-family: 'Patua One', serif;
	margin: 0;
	text-align: justify;
}
span.shape {
	filter: drop-shadow(15px 15px 5px green);
	shape-margin: 10px;
	width: 75px; height: 150px;
}
p#leftSide>span.shape {
	--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' width='150px' height='150px' clip-path='url(%23emojiClipPath)' /> </svg>");
	float: right;
	background-image: var(--image-url);
	shape-outside: var(--image-url);
}
p#rightSide>span.shape {
	--image-url:url("data:image/svg+xml,<svg width='150px' height='150px' xmlns='http://www.w3.org/2000/svg'> <clipPath id='emojiClipPath'> <text x='-75px' y='130px'  font-size='130px'>🦎</text> </clipPath> <rect x='0' y='0' width='150px' height='150px' clip-path='url(%23emojiClipPath)' /> </svg>");
	float: left;
	background-image: var(--image-url);
	shape-outside: var(--image-url);
}



/* Finetuning & Firefox code */
p#rightSide { padding-left: 4px; }

p#rightSide>span.shape { margin-left: -4px; }

@supports (-moz-appearance: none){
	p#leftSide>span.shape{
		--image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150px'%3E%3CforeignObject width='150px' height='150px'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='width:150px;height:150px;line-height:150px;text-align:center;color:transparent;text-shadow: 0 0 black;font-size:130px;'%3E🦎%3C/div%3E%3C/foreignObject%3E%3C/svg%3E");
	}
	p#rightSide>span.shape{
		--image-url: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22150px%22 height=%22150px%22><foreignObject width=%22150px%22 height=%22150px%22><div xmlns=%22http://www.w3.org/1999/xhtml%22 style=%22width:150px;height:150px;line-height:150px;text-align:center;color:transparent;text-shadow: 0 0 black;font-size:130px;%22>🦎</div></foreignObject></svg>");
		background-position: 100%;
	}

	span.shape { shape-margin: 0; margin-top: 10px; }
}