JSFiddle - React, Tailwind, and code Playground

HTML

<svg id='mysvg' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 400 400'>
    <circle
        fill='#000000'
        stroke='#000000'
        stroke-width='10'
        cx='105'
        cy='105'
        r='90'></circle>
    <circle
        fill='none'
        stroke='#0000FF'
        stroke-width='10'
        cx='300'
        cy='105'
        r='90' ></circle>
</svg>
<div id="mydiv"></div>

CSS

#mysvg, div {
    float: left;
    width: 10em;
    height: 10em;
}

div {
    outline: 2px dashed red;
    background-size: cover;
    background-image:  url("data:image/svg+xml;utf8,%3Csvg%20id%3D%27mysvg%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20400%20400%27%3E%20%20%20%20%20%3Ccircle%20%20%20%20%20%20%20%20%20fill%3D%27%23000000%27%20%20%20%20%20%20%20%20%20stroke%3D%27%23000000%27%20%20%20%20%20%20%20%20%20stroke-width%3D%2710%27%20%20%20%20%20%20%20%20%20cx%3D%27105%27%20%20%20%20%20%20%20%20%20cy%3D%27105%27%20%20%20%20%20%20%20%20%20r%3D%2790%27%3E%3C/circle%3E%20%20%20%20%20%3Ccircle%20%20%20%20%20%20%20%20%20fill%3D%27none%27%20%20%20%20%20%20%20%20%20stroke%3D%27%230000FF%27%20%20%20%20%20%20%20%20%20stroke-width%3D%2710%27%20%20%20%20%20%20%20%20%20cx%3D%27300%27%20%20%20%20%20%20%20%20%20cy%3D%27105%27%20%20%20%20%20%20%20%20%20r%3D%2790%27%20%3E%3C/circle%3E%20%3C/svg%3E");
}