Tag: #heart

Categories
CSS Web development

CSS Heart Shape & Heartbeat Animation

Last year I posted the tutorial Fast & easy CSS Valentine’s Day Animation (Heartbeat), were to create the heartbeat I used the .png file. Today I will show you how to create the heart shape and heartbeat animation using just pure CSS.

heartbeat
Do you like this gif? Check more gifs in the store.
*animation opened in the Firefox browser.
*to see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
      <div class="heart"></div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #fae1dd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  
.container {
  position: relative;
  animation: .8s beat infinite;
}

Create the heart:

.heart {
  position: relative;
  background-color: red;
  display: inline-block;
  height: 60px;
  top:0;
  left:0;
  transform: rotate(-45deg);
  width:60px;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: red;
  border-radius:50%;
  height: 60px;
  width: 60px;
  position: absolute;
  width: 60px;
  }
  
.heart:before {
  top:-30px;
  left:0;}
  
.heart:after {
  left:30px;
  top:0;}

Step3.

Add CSS Animation

@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
#SVG Web development

Moving text on an SVG path

Yesterday I posted a tutorial – how to create the text on a path in Adobe Illustrator (you can watch also the video tutorial), so if you want to create a simply SVG text on a path you can take a look at these tutorials, however, if you want to add some animation and move the text on the path follow the steps below 🙂

SVG text on a circle

Example1 – Moving text on a circle:

*animation opened in the Safari browser.
*to see the live output of the animation on the website click here.

Demo:

Example2 – Moving text on a heart path:

*animation opened in the Safari browser.
*to see the live output of the animation on the website click here.

Demo:

Step1.

Add a SVG path/ shape

In this tutorial we’ll create text on the circle (add a SVG path to the body section, to see more about the SVG path click here.):

<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
 
  <path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>

Step2.

Add CSS/ Style the circle

.shape {
  fill:none;
  stroke:#1d1d1b;
}

#tutorial {
  position: relative;
  overflow: visible;
  width: 15%;
  left: 40%;
  top: 100px;
  transform: rotate(-120deg);
}

Step3.

Add the text( body section)

  <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape">SVG moving text on the circle.</textPath>

Step4.

Add SVG Animation

  <animate attributeName="font-size" dur="10s" values="8;31" repeatCount="indefinite"></animate>
    </text>
</svg>

To see the live output of the animation click here and here.

Enjoy coding!

Categories
CSS Web development

CSS Shapes

With CSS you can create a lot of shapes. Today I’ll show you how to create different shapes using pure CSS.

Let’s start from the easy ones:

  1. Square
.square {
      width: 100px;
      height: 100px;
      background: blue;
    }

2. Rectangle

.rectangle {
      width: 200px;
      height: 100px;
      background: blue;
    }

3. Circle

.circle {
      width: 100px;
      height: 100px;
      background: blue;
      border-radius: 50%;
    }

4. Triangle

.triangle {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid blue;
    }

5. Trapezoid 

    .trapezoid {
      border-bottom: 100px solid blue;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      height: 0;
      width: 100px;
    }

A bit more difficult shapes:

  1. Star
.star {
      top: 50px;
      margin: 50px 0;
      position: relative;
      display: block;
      color: red;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid yellow;
      border-left: 100px solid transparent;
      transform: rotate(35deg);
    }
    .star:before {
      border-bottom: 80px solid yellow;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }
    .star:after {
      position: absolute;
      display: block;
      color: red;
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid yellow;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

2. Diamond

.diamond {
      border-style: solid;
      border-color: transparent transparent lightblue transparent;
      border-width: 0 25px 25px 25px;
      height: 0;
      width: 50px;
      box-sizing: content-box;
      position: relative;
      margin: 20px 0 50px 0;
    }
    .diamond:after {
      content: "";
      position: absolute;
      top: 25px;
      left: -25px;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: lightblue transparent transparent transparent;
      border-width: 70px 50px 0 50px;
    }

3. Heart

.heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    .heart:before,
    .heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }

Valentine’s day is coming so as a bonus, I’ll show you what will happen when you add scale transform to your heart code.

Add wrapper to your HTML code:

<div class="heart-wrapper">
  <div class="heart"></div>
</div>

and add a heart-wrapper element and the hover to CSS:

.heart-wrapper {
  cursor: pointer;
  
  width: 200px;
  height: 160px;
  transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
}
.heart-wrapper:hover {
  transform-origin: 50% 50%;
  transform: scale(1.3);
}

And you’ll get:

Enjoy coding!