CSS Cat by ChatGPT

2 min readJun 5, 2024

I don’t see it is a cat.

/* https://chatgpt.com/g/g-i9TsPdTRx-html-css-builder/c/9e98f879-b4e9-4d11-8cb8-9c5e2432e33c */
/* Container for the cat illustration */
.cat {
  position: relative;
  width: 200px;
  height: 300px;
  margin: 0 auto;
}

/* Cat body */
.cat .body {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 120px;
  height: 180px;
  background: #D1BEB0;
  border-radius: 60px 60px 20px 20px;
  transform: translateX(-50%);
}

/* Cat head */
.cat .head {
  position: absolute;
  bottom: 150px;
  left: 50%;
  width: 100px;
  height: 100px;
  background: #D1BEB0;
  border-radius: 50%;
  transform: translateX(-50%);
}

/* Cat ears */
.cat .ear {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #D1BEB0;
  border-radius: 50% 50% 0 0;
}

.cat .ear.left {
  top: -15px;
  left: 20px;
  transform: rotate(-45deg);
}

.cat .ear.right {
  top: -15px;
  right: 20px;
  transform: rotate(45deg);
}

/* Cat eyes */
.cat .eye {
  position: absolute;
  top: 30px;
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
}

.cat .eye.left {
  left: 30px;
}

.cat .eye.right {
  right: 30px;
}

/* Cat nose */
.cat .nose {
  position: absolute;
  top: 55px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  transform: translateX(-50%);
}

/* Cat mouth */
.cat .mouth {
  position: absolute;
  top: 65px;
  left: 50%;
  width: 20px;
  height: 10px;
  border: 2px solid #000;
  border-top: none;
  border-radius: 0 0 20px 20px;
  transform: translateX(-50%);
}

/* Cat tail */
.cat .tail {
  position: absolute;
  bottom: 20px;
  right: -20px;
  width: 20px;
  height: 80px;
  background: #D1BEB0;
  border-radius: 50%;
  transform: rotate(45deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Cat</title>
    <link rel="stylesheet" href="cat.css">
    <style>
      h3 {
        text-align: center;
      }
    </style>
</head>
<body>
<h3>CSS Cat by ChatGPT</h3>
<div class="cat">
  <div class="body"></div>
  <div class="head">
    <div class="ear left"></div>
    <div class="ear right"></div>
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
  </div>
  <div class="tail"></div>
</div>

</body>
</html>

I hope one day A.I. can be able to generate the pretty CSS from the text or wordings.

CSS Cat by ChatGPT

Written by Sarit Ritwirune