Asked by Alex

Since Valentine's day is nearing, make a html file that shows a beating heart.

All Answers 1

Answered by GPT-5 mini AI
Here's a single self-contained HTML file that shows a beating heart. Save it as something like heart.html and open it in a browser.

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Beating Heart — Valentine's</title>
<style>
:root{
--heart-size: 140px; /* adjust this to scale the heart */
--heart-color: #ff2d6d;
--bg1: #ffdde1;
--bg2: #ff9a9e;
}

/* Basic page layout */
html,body{
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

body{
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.25), transparent 10%),
linear-gradient(135deg, var(--bg1), var(--bg2));
overflow: hidden;
}

/* Container to center content and optionally show greeting */
.wrap{
text-align: center;
color: #fff;
}

h1{
margin: 0 0 20px;
font-size: 1.25rem;
letter-spacing: 0.02em;
text-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

/* Heart shape using pseudo-elements */
.heart {
width: var(--heart-size);
height: calc(var(--heart-size) * 0.9);
background: var(--heart-color);
position: relative;
transform: rotate(-45deg);
transform-origin: center;
margin: 0 auto;
border-radius: 8px 8px 0 0; /* small rounding to smooth edges when rotated */
box-shadow:
0 12px 30px rgba(255,45,109,0.18),
0 2px 6px rgba(0,0,0,0.18),
inset 0 -6px 18px rgba(0,0,0,0.06);
filter: drop-shadow(0 8px 20px rgba(255,45,109,0.12));
animation: beat 1.2s infinite cubic-bezier(.4,0,.2,1);
}

.heart::before,
.heart::after {
content: "";
position: absolute;
width: var(--heart-size);
height: var(--heart-size);
background: var(--heart-color);
border-radius: 50%;
top: -50%;
left: 0;
}

.heart::after {
left: 50%;
top: 0;
}

/* soft glow that pulses slightly with the beat */
.heart::after,
.heart::before,
.heart {
transition: box-shadow .2s;
}

/* Add a subtle inner shine using an overlay pseudo-element on the wrapper */
.heart-gloss {
position: absolute;
width: 60%;
height: 40%;
top: 22%;
left: 15%;
background: rgba(255,255,255,0.12);
transform: rotate(-45deg);
border-radius: 50%;
filter: blur(6px);
pointer-events: none;
}

/* Heart beating keyframes (mimics two quick beats then rest) */
@keyframes beat {
0% { transform: rotate(-45deg) scale(1); }
6% { transform: rotate(-45deg) scale(1.15); }
12% { transform: rotate(-45deg) scale(1); }
20% { transform: rotate(-45deg) scale(1.12); }
26% { transform: rotate(-45deg) scale(1); }
100% { transform: rotate(-45deg) scale(1); }
}

/* Greeting text pulse (subtle) */
.greeting {
display: inline-block;
transform-origin: center;
animation: textPulse 1.2s infinite cubic-bezier(.4,0,.2,1);
margin-top: 18px;
font-weight: 600;
font-size: 1rem;
}
@keyframes textPulse {
0% { transform: scale(1); opacity: 0.98; }
6% { transform: scale(1.02); opacity: 1; }
12%{ transform: scale(1); opacity: 0.98; }
20%{ transform: scale(1.01); opacity: 1; }
100%{ transform: scale(1); opacity: 0.98; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.heart, .greeting { animation: none; }
}

/* Responsive sizing on small screens */
@media (max-width: 420px) {
:root { --heart-size: 100px; }
h1 { font-size: 1rem; }
}
</style>
</head>
<body>
<div class="wrap" aria-label="Beating heart">
<h1 class="greeting">Happy Valentine's Day</h1>
<div style="position:relative; width:var(--heart-size); height:calc(var(--heart-size) * 0.9); margin: 18px auto 0;">
<div class="heart" role="img" aria-hidden="true"></div>
<div class="heart-gloss" aria-hidden="true"></div>
</div>
</div>
</body>
</html>
```

Notes:
- Change --heart-size or --heart-color in :root to resize or recolor the heart.
- The animation respects users' "Reduce motion" preference.
- You can remove the greeting line if you want only the heart.