svg newbie: drawing a domino using html and css

My project is to draw the domino 1x6, in which each of the two squares has a height and width of 100px and 3px solid black border. Each dot has a diameter of 20px. I have to use flex.

My attempt is:
---------------------------------------------------------------------- 
<span id=row>
    <span id=b1>
    <?xml version="1.0" standalone="no"?>
    <svg width="94" height="94" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="47" cy="47" r="10" fill="black"/>
    </svg>
    </span>
    <span id=b2>
    <?xml version="1.0" standalone="no"?>
    <svg width="94" height="94" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="10" cy="10" r="10" fill="black"/>
        <circle cx="84" cy="10" r="10" fill="black"/>
        <circle cx="10" cy="47" r="10" fill="black"/>
        <circle cx="84" cy="47" r="10" fill="black"/>
        <circle cx="10" cy="84" r="10" fill="black"/>
        <circle cx="84" cy="84" r="10" fill="black"/>
    </svg>
    </span>
</span>
------------------------------------------------------------------------
#row {
    display: flex;
    flex-direction: row;
}
#b1 {
    margin: 0px;
    width: 94px;
    height: 94px;
    border: solid black 3px;
    padding: 0px;
}
#b2 {
    margin: 0px;
    width: 94px;
    height: 94px;
    border: solid black 3px;
    padding: 0px;
}
--------------------------------------------------------------------------
This results in the domino looking mostly as intended, except each *outline* of the dots is slightly incorrect.  I'm unsure of they are too large or too small, or incorrectly located.  Unclear about what the problem is.  I was provided with an image to match.  Unfortunately, I could not include it.

Thanks for any suggestions,

--lh