<!--
Adapted from <code>
https://codepen.io/prather-mcs/pen/rOoKYo
</code>
-->
<html>

<head>
  <meta charset="utf-8">
</head>


<body>

  <p>This uses html symbol encoding: <span class="big">&#x25A6;</span></p>
  
  <p>Let's make a symbol of one color: <span class="big color1">&#x25B6;</span></p>
  
  <p>And another of another color: <span class="big color2">&#x25C6;</span></p>
  
  <span class="big">&#x25A6;</span>&nbsp;<sup><sup><span class="med color1">&#x25B6;</span></sup></sup><span class="big color2">&#x25C6;</span>

</body>

</html>
.big {font-size: 78px;}
.med{font-size: 48px;}
.small{font-size: 30px;}

.color1 {
  color: #f00;
}

.color2 {
  color: #00f;
}
function main() {
  return;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.