<h2><small>Works in Firefox </small>❻</h2>
<div class=patterns id="sixth"></div>
#sixth {
	background: 
		url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text  y=%221em%22 font-size=%2270%22 fill=%22transparent%22 style=%22text-shadow: 0 0 %23e42100, -2px 2px 5px black, 0 0 6px white; ;%22>🏄‍♀️</text></svg>") white; 
	background-size: 60px 60px; 
}
.patterns {
	width: 300px; height: 300px;
	margin: auto; border: 40px white solid;
}

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

.msg {margin-top: 120px; text-align: center; } 

body { background: black; font-family:'crimson text'}

External CSS

  1. https://fonts.googleapis.com/css2?family=Crimson+Text&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.