How to create heart shape in react js?

November 27, 2024

Hi Friends 👋,

Welcome To aHoisting!

To create heart shape in react js, you have to use border-radius: 50px 50px 0 0; in .heart::before, .heart::after. It will create heart shape in react js.

Today, I am going to show you, how to create heart shape in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React from 'react';
import Heart from './Heart';
import './Home.css';
import "./App.css"

Step 3: Create a Component.

You can use className="heart" to create heart shape in react js.

<div className="heart"></div>;

Create heart shape example.

The below code is an example of a React. You have to import react and set border-radius: 50px 50px 0 0; in .heart::before, .heart::after. to create heart shape in react js.

App.js

import React from 'react';
import Heart from './Heart';
import "./App.css"

function App() {
    return (
        <div>
            <h1>Heart Shape Example</h1>
            <Heart />
        </div>
    );
}

export default App;

Heart.js

import React from 'react';
import './Home.css';

const Heart = () => {
    return <div className="heart"></div>;
};

export default Heart;

Heart.css

.heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin-top: 10px;
}

.heart::before, .heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: red;
}

.heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

App.css

@keyframes pulse {
    0%, 100% {
        transform: scale(1) rotate(-0deg);
    }
    50% {
        transform: scale(1.1) rotate(-0deg);
    }
}

.heart {
    animation: pulse 1s infinite;
}

In the above code example, I have used the border-radius: 50px 50px 0 0; to create heart shape in react js.

Check the output of the above code.

All the best 👍