JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<div class="circle a">   
    <div class="mc-name">SVG</div>
    <div class="circle bg-gray b">
        <div class="circle bg-black d box-main">
            <div class="box bg-red b1">
                <div class="box bg-black b3"></div>
            </div>
            <div class="box bg-red b2">
                <div class="box bg-black b3"></div>
            </div>
        </div>
    </div>
</div>

CSS

body{background-color: black; font-family: monospace}
.circle{border: 1px solid gray; border-radius: 50%;}
.box{width: 200px; height: 8px; position: fixed; outline: 1px solid black;}

.bg-red{background-color: red;}
.bg-gray{background-color: gray;}
.bg-black{background-color: black;}

.a{width: 300px; height: 300px;}
.b{width: 280px; height: 280px; margin-top: 10px; margin-left: 10px;}
.d{width: 270px; height: 270px; margin-top: 5px; margin-left: 5px;}

.b1{margin-top: 131px; margin-left: 35px; transform: rotate(0deg);}
.b2{margin-top: 131px; margin-left: 35px; transform: rotate(90deg);}
.b3{width: 150px; margin: 0px auto; position: relative;}

.box-main{transform: rotate(44deg); transition: all 1s ease-out; background: black;}
.box-main:hover{transform: rotate(214deg); transition: all 1s ease-out;}
.mc-name{color: white; display: inline-block; position: fixed; margin-top: 150px; margin-left: 135px; z-index: 2; font-size: 20px;}