<figure>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</figure>

		html, body {
			margin:0;
			padding:0;
      background: #000;
      overflow: hidden;
		}

		figure {
			margin:0;
			padding:0;
			position: absolute;
			display: block;
			top: 50%;
			left: 50%;
			width: 60vw;
			height: 60vw;
			animation: 7s anim linear infinite;
      transform-origin: right center;
      margin: -30vw 0 0 -60vw;
      backface-visibility: hidden;
		}

		figure div {
			width: 60vw;
			height: 60vw;
			position: absolute;
      top: 0;
      left: 0;
			border-radius: 60vw;
      transform-origin: right center;
      backface-visibility: hidden;
		}

    @for $i from 1 through 10 {
      figure div:nth-child(#{$i}) {
        z-index: 10-$i;
        box-shadow: 8.05vw 20.5vw 0 0 lighten(#A60000, 10-$i) inset;
        transform: rotate(#{36 * $i}deg) translate3d(0,0,0);
      }
    }

		@keyframes anim {
			0% {
				transform: rotate(0deg) translate3d(0,0,0);
			}
			100% {
				transform: rotate(360deg) translate3d(0,0,0);
			}
		}