❤️ Valentine's Day! | Heart Shape (CSS) & Confetti Animation 💫
Tags: webdev, javascript, tutorial, animation
Published: 2024-02-13 22:42:48

## Valentine's Day | Heart Shape (CSS) & Confetti Animation

> Project here:
> https://the-best-codes.github.io/projects/vdayHeart/

{% codesandbox rfm9gz %}

*Not working?*
[![Edit angry-dawn-rfm9gz](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/angry-dawn-rfm9gz?file=%2Findex.html%3A176%2C10)


----



Hey everyone! Happy Valentine's Day! As a developer, what better way to celebrate than with some creative code? Today, I'm excited to share a fun project I made: a **pulsating, clickable heart shape in CSS, complete with heart-shaped confetti on click!** This project is all about playing with different web technologies and having a little fun along the way.

**Why This Project?**

Sometimes, code is more than just functionality. It can be a canvas for expression, a playground for experimentation, and a way to explore the possibilities of web development. This project embodies that spirit. Here's why I created it:

* **CSS creativity:** Pushing the limits of what's possible with CSS is always fun. This project uses gradients, clip-paths, and animations to create a unique heart shape that feels dynamic and engaging.
* **JavaScript for interactivity:** While the heart itself is made with CSS, JavaScript adds a layer of interactivity. Clicking the heart reveals a hidden message and triggers a burst of heart-shaped confetti, making the experience more engaging.
* **Learning with fun:** Let's be honest, coding can be challenging. But when you tie it to a fun theme and creative outcome, it becomes more enjoyable and motivating. This project is a reminder that learning can be playful and fulfilling.

**How It Works:**

Let's delve into the code and see how the magic happens:

**The Heart Shape:**

* **CSS magic:** The `.heart` class uses a radial gradient to create a red circle, clipped into a heart shape using `clip-path`. [clip-path docs](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path)
* **Animation:** The background gradient animates with `animation: moveGradient` to add a subtle, pulsating effect.
* **Interactive JS:** Clicking the heart toggles the `clicked` class, scaling it up and revealing a hidden message inside.

**Heart-Shaped Confetti:**

* **Third-party library:** The `canvas-confetti` library simplifies confetti creation.
* **Customizing the hearts:** The `confetti.shapeFromText` function creates heart-shaped confetti using an emoji.
* **Triggering the celebration:** Clicking the heart fires the `createConfetti` function, filling the screen with lovey-dovey confetti.


## A deeper look at the code

Now, let's dive deeper into the code and explain its inner workings:

**HTML Structure:**

* The HTML consists of a basic structure with a `div.center` containing the heart element (`div.heart`) and its hidden message (`p#textInner`).
* The confetti script (`<script src="..."></script>`) is included after the main content.

**CSS Styling:**

* The `.heart` class:
    * `display: inline-block`: Ensures the heart stays within the flow of the content.
    * `width: 200px; aspect-ratio: 1;`: Sets the size and aspect ratio of the heart.
    * `border-image`: Creates a radial gradient that transitions from red to black, forming the heart shape.
    * `clip-path`: Defines the heart shape by clipping away unwanted areas from the gradient.
    * `transition: transform 0.3s ease;`: Enables smooth scaling animation on hover and click.
* The `.heart:hover` state:
    * `transform: scale(1.2);`: Scales the heart up slightly on hover for a subtle highlight.
* The `.heart.clicked` state:
    * `transform: scale(1.3);`: Scales the heart up further on click for emphasis.
    * `p#textInner.clicked > .heart-text { color: white !important; }`: Forces the hidden message text to white when clicked, ensuring visibility against the red background.
* The `.heart-text` class:
    * Styles the hidden message text within the heart.
    * `transition: all 0.3s ease;`: Enables smooth opacity transition when the message is revealed.
* The `.instructions` class:
    * Styles the instructions text that appears on hover.
    * `opacity: 0;`: Initially hides the instructions.
    * The `.heart:hover .instructions` state:
        * `transform: translate(0, -20px); opacity: 1;`: Reveals the instructions on hover.
    * The `.heart.clicked .instructions` state:
        * `opacity: 0;`: Hides the instructions again when the heart is clicked.

**JavaScript Functionality:**

* The `toggle` function:
    * Takes a clicked heart element as input.
    * Toggles the `clicked` class on the element, triggering the visual changes based on the CSS styles.
    * If clicked, shows the hidden message and triggers confetti.
    * If unclicked, hides the message.
* The `createConfetti` function:
    * Creates a canvas element and gets its drawing context.
    * Defines a heart-shaped emoji using the `confetti.shapeFromText` function.
    * Calls the `confetti` function with various options:
        * `particleCount`: Number of confetti particles (adjust for performance).
        * `scalar`: Size of the confetti particles.
        * `angle`: Angle of the confetti launch.
        * `spread`: Spread of the confetti launch.
        * `startVelocity`: Initial velocity of the confetti particles.
        * `decay`: Decay rate of the confetti particles' movement.
        * `shapes`: Array containing the heart-shaped emoji.
        * `origin`: Where the confetti originates from (within the heart).
        * `zIndex`: Ensures the confetti appears behind the heart element.

### Pro tip:

Add the CSS declaration `filter: drop-shadow(0 -10px 25px rgb(255, 255, 255));` to the **`.center`** class to add a blurred shadow to the heart.
Experiment with different blur radii and colors!



![Heart with blur](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lukga6s595y802owlxe7.png)





----


## **Conclusion:**

This project demonstrates that code can be both functional and artistic. It highlights the power of combining CSS, JavaScript, and third-party libraries to create engaging and interactive experiences. While this code serves as a fun Valentine's Day project, remember that the core principles of CSS animation, interactivity, and creativity can be applied to various web development endeavors. So, experiment, explore, and most importantly, have fun coding!


_All codes in this post are by BestCodes. No more than 60% of the post content is AI generated. (I did use AI a bit on this one. I needed some help putting my code into words. 😆)_

----

_By [BestCodes](https://the-best-codes.github.io/?dev.to_vday)_

### 💜 I love you, DEV! 💜