indra

<!doctype html5>
<html>
    <head>
        <title>Indra</title>
    </head>
    <style>
        :root
        {
            --sharingan:400px;
            --cir-top:calc(var(--sharingan)/2.29);
            --cir-shape:calc(var(--sharingan)/8);
            --shadow:calc(var(--sharingan)/10);
            --r:calc(var(--sharingan)/2);
        }
        #sharingan
        {
            position:absolute;
            border:20px solid black;
            background:red;
            width:var(--sharingan);
            height:var(--sharingan);
            margin-top:3%;
            margin-left:3%;
            border-radius:50%;
        }
        #c
        {
            position:absolute;
            border:0px solid  blue;
            margin-left:-0.1%;
            margin-top:-2%;
            width:var(--sharingan);
            height:var(--sharingan);

            border-radius:50%;
        }
        #incir
        {
            position:absolute;
            background: black;
            border-radius:50%;
            top:var(--cir-top);
            left:var(--cir-top);
            width:var(--cir-shape);
            height:var(--cir-shape);
            box-shadow:0 0 var(--shadow) 10px black;
        }


        @keyframes ro
        {
            from{transform:rotate(0deg)}
            to{transform:rotate(360deg)}
        }
        #cans
        {
            position:absolute;
            border:0px solid white;
            width:100%;
            height:100%;
            border-radius:50%;
             margin-top:3%;
            margin-left:0%;
        }

    </style>

    <body bgcolor="#585858">
        <div id="sharingan">
            <div id="c" style="animation:ro 2s ease-in-out infinite">
                <!div id="incir"><!/div>
                <canvas id="cans" width="500"height="500" >

                </canvas>

            </div>
        </div>
        <script>
        var c = document.getElementById("cans");
        var ctx = c.getContext("2d");
        var b =c.getContext("2d");
        ctx.beginPath();
        ctx.arc(280,250,230,0*Math.PI,1*Math.PI);
        ctx.lineWidth=10;
        ctx.stroke();
        ctx.arc(240,250,190,1*Math.PI,2*Math.PI)
        ctx.stroke();
        ctx.arc(280,250,150,2*Math.PI,1*Math.PI)
        ctx.stroke();
        ctx.arc(240,250,110,1*Math.PI,2*Math.PI)
        ctx.stroke();
        ctx.arc(280,250,70,2*Math.PI,1*Math.PI)
        ctx.stroke();
        ctx.arc(240,250,30,1*Math.PI,1.5*Math.PI)
        ctx.stroke();

        b.beginPath();
        b.arc(240,245,30,0*Math.PI,2*Math.PI)
        b.fill();
    </script>
    </body>

</html>