JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Keyboard + NumPad
=================
ALT + 7 = •
ALT + 9 = ○
ALT + 1 = ☺
ALT + 2 = ☻
ALT + 15 = ☼
-->


<div id="holder">
<div id="box">
    <div class="ball" style="left:20px;top:10px">•</div>
    <div class="ball" style="right:40px;bottom:40px">•</div>
    <div class="ball" style="left:60px;bottom:10px">•</div>
    <div class="ball" style="left:100px;top:50px">•</div>
    <div class="ball" style="right:90px;bottom:60px">•</div>
    <div class="ball" style="left:150px;top:80px">•</div>
    <div class="ball" style="right:20px;top:10px">•</div>
    
</div>
  <div class="ballbig" style="right:272px;top:100px">•</div>
</div>


<br /><br /><br />

All ASCII Characters below have same color and same 100px size.<br />
That said, depending on character used your CSS is different.
<div class="ASCIIcharacters">
    • 
    ○ 
    ☺ 
    ☻ 
    ☼ 
</div>

CSS

#box {
            width: 300px;
            height: 300px;
            
            position: relative;
            margin: auto;
            margin-top: 100px;
            animation:mymove 2s infinite; 
            
            /* Firefox */
            -moz-animation:mymove 2s infinite;
            
            /* Safari and Chrome */
            -webkit-animation:mymove 2s infinite;
    
            animation-timing-function:linear;
            -moz-animation-timing-function:linear; /* Firefox */
            -webkit-animation-timing-function:linear; /* Safari and Chrome */
        }
        
        .ball {
            width: 30px;
            height: 30px; 
            color: blue;  /* MOD: Use background color here for silhouette of text-shadow. e.g. use color white */
            position: absolute;
            font-size: 130px;
            text-shadow: 7px 0px 4px #ff0000; /* Create shadow for ball. Reminder: Circle is TEXT! :-D   */

            /* Alternate Ball Appearance | Show a Blurry Ball! */
            /* Use large h-offset so it's not clipped by circle AND use MOD above to realize blurred circle! */
            /* text-shadow: 40px 0px 4px #0000ff; */  

        }
        
        .ballbig {
            font-size: 1000px;
            text-shadow: 3px 3px 10px #EFEFEF;
            color: red;
            position: absolute;
            margin: auto;
            margin-top: -525px;  /* Random value used (i.e., not calculated for placement ) */
            left: 210px;
            text-align: center;
  
            -webkit-transition: all 0.6s ease;  /* Chrome and Safari */
            -moz-transition: all 0.6s ease;     /* Firefox */
            -ms-transition: all 0.6s ease;      /* IE 9 */
            -o-transition: all 0.6s ease;       /* Opera */
            transition: all 0.6s ease;          /* W3C */

            -webkit-transform: scale(0.25);
            -moz-transform: scale(0.25);
            -ms-transform: scale(0.25);
           ...