太极图有没有更简洁的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2-5</title>
    <style type="text/css">
        div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            width: 400px;
            height: 400px;
            margin: auto;
            border: 1px solid red;
            border-bottom: 200px solid red;
            border-radius: 50%;
            transform-origin: 50% 50%;
            animation-name: rotate;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            /*此处写代码*/
        }        div::after{
             content: ""; display: block;
             position: absolute;
             top:100px; left: -1px;
             box-sizing: border-box;
             width: 199px; height: 199px;
             border-top: 101px solid red;
             border-radius: 50%;
         }         div::before{
             content: ""; display: block;
             position: absolute;
             top:100px; left: 199px;
             box-sizing: border-box;
             width: 199px; height: 199px;
             border-bottom: 101px solid white;
             border-radius: 50%;
         }         div > span{
             position: absolute;
             width: 40px; height: 40px;
             display: block;
             border-radius: 50%;
         }         div > span:first-of-type{
             z-index: 10000;
             left: 70px; top: 150px;
             background: white;
         }
          div > span:last-of-type{
             z-index: 10000;
             left: 270px; top: 150px;
             background: red;
         }         @keyframes rotate{
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
         }    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
    </div>
</body>
</html>