Self love

index.html

<h1>ALL BOOBS ARE GOOD BOOBS</h1>
<div id="container">
  <div></div>
  <div></div>
</div>

<a href="https://twitter.com/rominamartinlib" target="_blank">
  <svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
    <path d="
    M 630, 425
    A 195, 195 0 0 1 331, 600
    A 142, 142 0 0 0 428, 570
    A  70,  70 0 0 1 370, 523
    A  70,  70 0 0 0 401, 521
    A  70,  70 0 0 1 344, 455
    A  70,  70 0 0 0 372, 460
    A  70,  70 0 0 1 354, 370
    A 195, 195 0 0 0 495, 442
    A  67,  67 0 0 1 611, 380
    A 117, 117 0 0 0 654, 363
    A  65,  65 0 0 1 623, 401
    A 117, 117 0 0 0 662, 390
    A  65,  65 0 0 1 630, 425
    Z" style="fill:#3BA9EE;" />
  </svg>
</a>

script.js

const container = document.getElementById("container");

const all = ["zero", "one", "two", "three", "four", "five"];

let current = 0;

setInterval(() => {
  current = current < all.length - 1 ? current + 1 : 0;
  container.className = "";
  container.classList.add(all[current]);
}, 1000);

self-love.markdown

Self love

I'm not as well educated as I should in some relevant matters, however I'm doing my best to improve at it.

Every shape of our body is naturally perfect, we just have to accept it.

A Pen by Romina on CodePen.

License.

style.css

:root {
  --body_bg: #fff;
  --container_bg: #b8a0cf;
  --main: rgba(0, 0, 0, 0.5);
  --main_light: rgba(255, 255, 255, 0.5);
  --zero_dim: 60px;
  --one_dim: 60px;
  --two_dim: 60px;
  --three_dim: 60px;
  --four_dim: 20px;

  --one_gap: 2;
  --three_gap: 2;
  --one_grades_l: -35deg;
  --one_grades_r: -55deg;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--body_bg);
  flex-direction: column;
  text-align: center;
}

h1 {
  font-family: "Yusei Magic", sans-serif;
  color: #543864;
  font-size: 1.2rem;
  text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.75);
}

#container {
  width: 350px;
  height: 175px;
  background-color: var(--container_bg);
  /*   filter: brightness(90%); */
  border-radius: 4px;
  box-shadow: 1px 1px 10px #4e3d53;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  min-height: 150px;
  /*   gap: 10px; */
  transition: all linear 0.25s;
}

#container div {
  /*   gap failing in safari */
  margin: 10px;
}

.zero div {
  position: relative;
  width: var(--zero_dim);
  height: var(--zero_dim);
  border: 5px solid var(--main);
  border-top: none;
  border-radius: 0 0 var(--zero_dim) var(--zero_dim);
  transition: all linear 0.25s;
}
.zero div::after {
  content: "";
  position: absolute;
  width: calc(var(--zero_dim) * 0.2);
  height: calc(var(--zero_dim) * 0.2);
  background-color: var(--main);
  /*   filter: brightness(75%); */
  left: 40%;
  bottom: calc(var(--zero_dim) * -0.275);
  border-radius: 0 0 50% 50%;
}

#container.one div {
  margin: calc(var(--one_dim) / var(--one_gap));
}
#container.three div {
  margin: calc(var(--three_dim) / var(--three_gap));
}
#container.four div {
  margin: 60px;
}
#container.five div {
  margin: calc(var(--three_dim) / var(--three_gap));
}

.one div {
  position: relative;
  width: var(--one_dim);
  height: var(--one_dim);
  border: 5px solid var(--main);
  border-top: none;
  border-right: none;
  border-radius: 0 0 0 var(--one_dim);
  transition: all linear 0.25s;
}
.one div:first-child {
  transform: rotate(var(--one_grades_l));
}
.one div:nth-child(2) {
  transform: rotate(var(--one_grades_r));
}
.one div::after {
  content: "";
  position: absolute;
  width: calc(var(--one_dim) * 0.1);
  height: calc(var(--one_dim) * 0.1);
  background-color: var(--main);
  border-radius: 50%;
  bottom: calc(40% + calc(var(--one_dim) * 0.05));
  left: calc(40% + calc(var(--one_dim) * 0.05));
}

.two div {
  width: var(--two_dim);
  height: var(--two_dim);
  border-radius: 50%;
  border: 5px solid var(--main);
  position: relative;
  transition: all linear 0.25s;
}
.two div::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--two_dim) * 0.25);
  height: calc(var(--two_dim) * 0.25);
  background-color: var(--main);
  margin-left: calc(var(--two_dim) * -0.125);
  margin-top: calc(var(--two_dim) * -0.125);
  border-radius: 50%;
}
.two div::after {
  content: "";
  position: absolute;
  width: calc(var(--two_dim) * 0.1);
  height: calc(var(--two_dim) * 0.1);
  background-color: var(--main_light);
  border-radius: 50%;
  bottom: calc(40% + calc(var(--two_dim) * 0.05));
  left: calc(40% + calc(var(--two_dim) * 0.05));
}

.three div {
  position: relative;
  width: var(--three_dim);
  height: var(--three_dim);
  border: 5px solid var(--main);
  border-top: none;
  border-right: none;
  border-radius: 0 0 0 var(--three_dim);
  transition: all linear 0.25s;
  transform: rotate(-35deg);
}
.three div:nth-child(2) {
  border-radius: 0;
  border: none;
  transform: rotate(-10deg);
  height: 5px;
  background: var(--main);
}
.three div:nth-child(2)::before {
  content: "";
  position: absolute;
  height: 15px;
  width: 5px;
  left: 25%;
  top: -5px;
  background: var(--main);
}
.three div:nth-child(2)::after {
  content: "";
  position: absolute;
  height: 15px;
  width: 5px;
  right: 25%;
  top: -5px;
  background: var(--main);
}

.four div {
  position: relative;
  width: var(--four_dim);
  height: var(--four_dim);
  border-radius: 50%;
  transition: all linear 0.25s;
  background: var(--main);
}

.five div {
  position: relative;
  border-radius: 0;
  border: none;
  width: var(--three_dim);
  height: 5px;
  background: var(--main);
}
.five div::before {
  content: "";
  position: absolute;
  height: 15px;
  width: 5px;
  left: 25%;
  top: -5px;
  background: var(--main);
}
.five div::after {
  content: "";
  position: absolute;
  height: 15px;
  width: 5px;
  right: 25%;
  top: -5px;
  background: var(--main);
}

a {
  position: absolute;
  top: 10px;
  left: 10px;
}

svg {
  height: 1.5rem;
}

styles

<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&amp;display=swap" rel="stylesheet" />