#heart Archives - Lena Design

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 🙂

Example1 – Moving text on a circle:

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

Example2 – Moving text on a heart path:

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

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!

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:

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:

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!