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 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!

Categories
#SVG Web development

SVG Stroke & Fill Animation

Some time ago we went through the tutorial SVG Path Drawing Animation, today we can go a bit further and learn how to fill our strokes.

SVG Fill Animation
Do you like this image? Check more images in the store.
*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Add SVG

To create the animation you need to make sure that your SVG shape/path has a stroke. To see how to create basic shapes using SVG click here.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.58 239.81"><defs><style>.cls-1,.cls-6{fill:#1d1d1b;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#ededed;}.cls-3{fill:#dadada;}.cls-4{fill:#b2b2b2;}.cls-5{fill:none;stroke-linecap:round;}.cls-6{font-size:48px;font-family:MyriadPro-Regular, Myriad Pro;}</style></defs><title>css-2</title><g id="computer">
  
  <path class="cls-1" d="M73.18,2.5H247.61a29.13,29.13,0,0,1,29.13,29.13V150.15a0,0,0,0,1,0,0H44a0,0,0,0,1,0,0V31.63A29.13,29.13,0,0,1,73.18,2.5Z"/><polygon class="cls-2" points="263.08 137.22 58.68 137.22 58.31 26.04 262.71 26.04 263.08 137.22"/><path class="cls-3" d="M44.07,150.15H276.54a0,0,0,0,1,0,0v9a15.4,15.4,0,0,1-15.4,15.4H59.47a15.4,15.4,0,0,1-15.4-15.4v-9a0,0,0,0,1,0,0Z"/><circle class="cls-1" cx="159.29" cy="163.44" r="5.91"/><polygon class="cls-4" points="140.35 174.79 130.22 223.48 191.34 223.48 180.55 175.12 140.35 174.79"/><rect class="cls-4" x="107.91" y="224.34" width="101.64" height="9.15" rx="4.58"/><line class="cls-5" x1="2.5" y1="237.31" x2="201.58" y2="237.31"/><line class="cls-5" x1="267.31" y1="237.31" x2="330.08" y2="237.31"/><path class="cls-5" d="M472.26,525.58" transform="translate(-105.44 -288.27)"/><line class="cls-5" x1="214.5" y1="237.31" x2="253.49" y2="237.31"/></g>
  
  <g id="html"><text class="cls-6" transform="translate(105.71 98.8)"><tspan xml:space="preserve">  &lt;/&gt;</tspan></text></g></svg>

Step2.

Add CSS

body {
  background-color: #2a9d8f;
}

.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6 {
  stroke-dasharray: 1650;
  stroke-dashoffset: 1650;
  animation: draw 3.5s linear forwards;	
}

#html {
  position: absolute;
  transform: translateX(10px);
}

svg {
  position: absolute;
  top: 100px;
  left: 15%;
  width: 70%;
  height: 70%;
  fill-opacity: 0;
  
}

Step3.

Add CSS Animation

@keyframes draw {
          0% {
            stroke-dashoffset: 1650;
            }
          75% {
            stroke-dashoffset: 0;
            fill-opacity: 0;
          }
          95% {
            stroke-dashoffset: 0;
          }
          100% {
            fill-opacity: 1;
            stroke-dashoffset: 0;
          }
        }

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

Enjoy coding!