JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="shape-interconnected">
  <div class="square"></div>
  <div class="circle"></div>
</div>

CSS

:root {
  --size: 250px;
}

BODY {
  background: black;
  min-height: 100%;
}

*, ::after, ::before {
    box-sizing: border-box;
}

.shape-interconnected {
  background: black;
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: shape-interconnected 2s infinite;
}


.shape-interconnected > .square {
  width: calc(var(--size) * 0.4);
  height: calc(var(--size) * 0.4);
  background: transparent;
  position: absolute;
  overflow: hidden;
  right: 0;
  top: 0;
}

.shape-interconnected > .square::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 5px solid white;
  border-radius: 50%;
  position: absolute;
  top: 150%;
  right: 150%;
  animation: circle-interconnected 2s infinite;
}

.shape-interconnected > .square::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 5px solid white;
  position: relative;
}

.shape-interconnected > .circle {
  width: calc(var(--size) * 0.4);
  height: calc(var(--size) * 0.4);
  position: absolute;
  bottom: 0;
  left: 0;
}

.shape-interconnected > .circle::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 5px solid white;
  border-radius: 50%;
  position: relative;
}

@keyframes shape-interconnected {
  0% {
    width: var(--size);
    height: var(--size);
  }
  50% {
    width: calc(var(--size) * 0.6);
    height: calc(var(--size) * 0.6);
  }
  100% {
    width: var(--size);
    height: var(--size);
  }
}

@keyframes circle-interconnected {
  0% {
    top: 150%;
    right: 150%;
  }
  50% {
    top: 50%;
    right: 50%;
  }
  100% {
    top: 150%;
    right: 150%;
  }
}