<h2>❹</h2>
<div class=patterns id="fourth"></div>

#fourth {
	background: 
		url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><foreignObject width=%22100px%22 height=%22100px%22><div xmlns=%22http://www.w3.org/1999/xhtml%22 style=%22color:transparent;background:linear-gradient(45deg, blue 20%, fuchsia);background-clip:text;-webkit-background-clip:text;font-size:70px%22>💬</div></foreignObject></svg>") white; 
	background-size: 60px 60px; 
}

.patterns {
	width: 300px; height: 300px;
	margin: auto; border: 40px white solid;
}

body { background: black; }

h2 { margin: auto; margin-top: 60px; width: 370px; text-align: right; background: yellow; padding-right: 10px;  }