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.
