JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div class="picture-frame">
  <div class="picture-frame">
    <div class="picture-frame">
      <div class="picture-frame">
        <div class="picture-frame">
          <div class="picture-frame">
            <div class="picture-frame">
              <div class="picture-frame">
                <div class="picture-frame">
                  <div class="picture-frame">
                    <div class="picture-frame">
                      <div class="picture-frame">
                        <div class="picture-frame">
                          <div class="picture-frame">
                            <div class="picture-frame">
                              <div class="picture-frame">
                              </div>
                            </div>
                          </div>
                        </div>

CSS

body {
  height: calc(100vh - 20px);
  overflow: hidden;
}

.picture-frame {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  border-left: 0px solid black;
  border-right: 15px solid firebrick;
  animation: droste 10s infinite alternate;
  border-radius: 50%;
}

@keyframes droste {
  from {
    width: 0%;
    height: 0%;
  }
  to {
    width: 100%;
    height: 100%;
  }
}