Ying & Yang Cats with hover effect using HTML and CSS

In the whimsical world of web design, combining creativity and interactivity can lead to delightful surprises. Picture this: a pair of adorable yin and yang cats gracefully floating on your webpage, their tails intertwined in a mesmerizing dance.

In this blog post, we embark on a charming journey to create yin and yang cats with a captivating hover effect using only HTML and CSS. By tapping into the magic of these core web technologies, we’ll unlock the secrets to infusing your website with charm and whimsy.

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen Yin & yang cats by Mikael Ainalem (@ainalem) on CodePen.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Ying & Yang Cats with hover effect using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<div class="box">
  <div class="activator white"></div>
  <div class="activator black"></div>
  <div class="drop"></div>
  <svg class="cats" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" height="300" width="300">
    <path d="M198.63 43.54c-8.535-4.018 3.727 22.035-12.55 45.9-20.702 30.36-48.977 21.085-41.787 33.538 6.11 10.582 14.963 5.18 22.04 1.094 14.174-8.184 27.137-10.15 28.113 3.987 1.042 15.096-20.733 19.503-38.7 21.456-14.98 1.746-26.072.598-39.257 7.506-7.503 3.93-12.945 8.577-11.272 16.88 1.543 7.663 6.38 9.685 14.245 8.033 14.377-3.02 29.986-17.01 35.77-5.653 5.19 10.192-17.612 11.026-28.038 18.733-13.19 9.75-18.697 22.952-23.197 36.583-1.806 5.473-6.094 20.647-2.37 25.047 11.313 2.326 21.947-8.24 31.515-4.824 9.426 3.366 18.753 8.822 24.982 16.656 6.99 8.79.88 29.34 11.896 31.524 91.172-57.992 104.09-103.495 104.09-139.778 0-46.43-24.75-92.793-75.48-116.68z" fill="#f2f2f2" />
    <path d="M101.38 256.46c8.535 4.018-3.726-22.035 12.55-45.9 20.703-30.36 48.978-21.085 41.788-33.538-6.11-10.582-14.963-5.18-22.04-1.094-14.174 8.184-27.138 10.148-28.113-3.987-1.042-15.096 20.732-19.503 38.7-21.456 14.978-1.746 26.072-.598 39.257-7.506 7.502-3.93 12.943-8.578 11.27-16.88-1.543-7.663-6.38-9.685-14.244-8.033-14.378 3.02-29.987 17.01-35.77 5.653-5.19-10.192 17.612-11.026 28.037-18.733 13.19-9.75 18.697-22.952 23.197-36.583 1.807-5.473 6.094-20.647 2.372-25.047-11.314-2.326-21.948 8.24-31.517 4.824-9.425-3.366-18.752-8.822-24.98-16.656-6.992-8.79-.88-29.34-11.897-31.524C38.82 57.99 25.9 103.495 25.9 139.778c0 46.43 24.75 92.793 75.48 116.68z" fill="#1a1a1a" />
    <path d="M110.677 57.635s-1.826 3.912 2.206 7.82c4.032 3.91 7.86.79 7.86.79M143.635 85.076s-1.826 3.912 2.206 7.82c4.032 3.91 7.86.79 7.86.79" fill="none" stroke="#ececec" stroke-width="6.774" stroke-linecap="round" />
    <path d="M104.733 80.926s3.077 8.615 6.49 10.237c3.416 1.623 10.488-1.248 10.488-1.248l3.996-4.744 5.243-.25-6.742-3.494 1.498 3.745-4.245 5.494s.47 8.58 2.997 10.736c2.53 2.157 8.74 1 8.74 1" fill="none" stroke="#ececec" stroke-width="6.774" stroke-linecap="round" stroke-linejoin="round" />
    <g stroke="#1a1a1a" fill="none" stroke-width="6" stroke-linecap="round">
      <path d="M189.063 252.215s1.826-3.912-2.206-7.82c-4.032-3.91-7.86-.79-7.86-.79M156.105 224.773s1.826-3.91-2.206-7.82c-4.033-3.91-7.862-.79-7.862-.79" stroke-width="6.77406" />
      <path d="M195.007 228.923s-3.077-8.614-6.492-10.236c-3.414-1.623-10.486 1.248-10.486 1.248l-3.996 4.744-5.243.25 6.742 3.494-1.498-3.745 4.245-5.494s-.47-8.58-2.997-10.736c-2.53-2.157-8.74-1-8.74-1" stroke-linejoin="round" stroke-width="6.77406" />
    </g>
  </svg>
</div>
<div class="text">Yin & yang cats</div>

CSS Code

Create a file style.css and paste the code below.

body {
  align-items: center;
  background-color: #f9abab;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  font-weight: 900;
  height: 100vh;
  justify-content: center;
  margin: 0;
}

.box {
  --box-width: 300px;
  /* background-color: #f9f; */
  border-radius: 50%;
  /* Chromium work-around */
  clip-path: circle(150px at 150px);
  height: var(--box-width);
  overflow: hidden;
  position: relative;
  width: var(--box-width);
}

.activator {
  height: 100%;
  position: absolute;
  width: 100%;
}

.activator.white {
  clip-path: polygon(
    35.66% 85.67%,
    44.99% 83.13%,
    54.08% 90.2%,
    55.1% 101.27%,
    64.89% 94.58%,
    74.59% 86.97%,
    82.83% 78.07%,
    88.86% 67.82%,
    91.48% 56.61%,
    90.3% 42.78%,
    86.06% 31.29%,
    77.45% 21.44%,
    67.34% 14.67%
  );
}

.activator.black {
  /* background-color: red; */
  clip-path: polygon(
    35% 86%,
    23% 79.33%,
    15.86% 70.67%,
    11.63% 61.78%,
    8.63% 52.71%,
    8.45% 43.74%,
    10.78% 32.35%,
    16.65% 22.15%,
    26.05% 12.86%,
    34.44% 6.24%,
    44.4% 0%,
    47.15% 11%,
    56.69% 17.26%,
    66.57% 14.04%
  );
}

.activator:hover {
  /* Safari work-around */
  clip-path: circle(150px at 150px);
  cursor: alias;
  z-index: 1;
}

.drop {
  background-color: #ffffff00;
  height: 100%;
  pointer-events: none;
  position: absolute;
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.cats {
  pointer-events: none;
  position: absolute;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.activator.black:hover ~ .drop {
  background-color: #f2f2f2;
}

.activator.black:hover ~ .cats {
  transform: translateX(45px) translateY(95px) scale(1.4) rotate(0deg);
}

.activator.white:hover ~ .drop {
  background-color: #1a1a1a;
}

.activator.white:hover ~ .cats {
  transform: translateX(45px) translateY(95px) scale(1.4) rotate(180deg);
}

.text {
  font-size: 32px;
  font-weight: 600;
  margin-top: 32px;
}