Categories
#SVG Web development

Round text animation on Scroll

Lately, I posted the SVG tutorial, how to move the text on the path (to see the tutorial click here), today I’ll show you another SVG text effect, how to move SVG text on the circle path by mouse scrolling.

animate a text on the circle

Animation:

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

What do you need to do?

  1. Add SVG
  2. Add CSS
  3. Add JavaScript

Step1.

Add SVG

Add an SVG shape (circle), and the text:

<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)"/>

   <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape" startOffset="500px" id="textPath">Scroll to move a text on the circle.</textPath>
      
    </text>
</svg>

Step2.

Add CSS

Style the text and the circle:

body {
  height: 200vh;  
}

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

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

Step3.

Add JavaScript

const textPath = document.querySelector("#textPath");

const a = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", event => {
  let percent = (a[st]||b[st]) / ((a[sh]||b[sh]) - a.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 5) + 500)
});

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

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 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 JavaScript Web development

Before & After – how to compare two images with JavaScript?

Today you’ll learn how to create a slider that compares two images.

before and after
Do you like this image? Check more images in the store.

Animation(move the slider to compare images):

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

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

Add your images:

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="https://lenadesign.org/wp-content/uploads/2020/08/makeup.jpg" width="640" height="480">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="https://lenadesign.org/wp-content/uploads/2020/08/no-makeup.jpg" width="640" height="480">
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background, and the container:

body {
  background-color: #eae2b7;
  display: flex; 
  align-items: center;
  justify-content: center;
  height: 100vh; 
}

.img-comp-container {
  left:-50px;
  position: relative;
  height: 480px; 
  width: 640px;
  border: 10px solid #e63946;
}

Set the position of the images:

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}

.img-comp-img img {
  display:block;
  vertical-align:middle;
}

Style the slider:

.img-comp-slider {
  position: absolute;
  cursor: ew-resize;
  width: 3px;
  height: 480px;
  background-color: white;
  color: white;
}

.img-comp-slider:after {
  content:"";
  position: absolute;
  top: 240px;
  left:-40px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 40px solid #48bfe3;
  border-bottom: 30px solid transparent;  
}

.img-comp-slider:before {
  content:"";
  position: absolute;
  top: 240px;
  left:3px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-left: 40px solid #48bfe3;
  border-bottom: 30px solid transparent;  
  
}

.img-comp-slider:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

Step3.

Add JavaScript

function initComparisons() {
  var x, i;
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    w = img.offsetWidth;
    h = img.offsetHeight;
    img.style.width = (w / 2) + "px";
    
    /*slider:*/
    slider = document.createElement("DIV");
    slider.style.zIndex = "10";
    slider.setAttribute("class", "img-comp-slider");
    img.parentElement.insertBefore(slider, img);
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    slider.addEventListener("mousedown", slideReady);
    window.addEventListener("mouseup", slideFinish);
    slider.addEventListener("touchstart", slideReady);
    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      
      e.preventDefault();
      clicked = 1;
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      if (clicked == 0) return false;
      pos = getCursorPos(e)
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      a = img.getBoundingClientRect();
      x = e.pageX - a.left;
      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      img.style.width = x + "px";
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}

initComparisons();

To see the live output check my Codepen.

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!

Categories
#SVG JavaScript Web development

Baggage Scan /SVG & JavaScript Animation

SVG luggage

Scan the luggage!

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

To create the animation you need to have two images of the luggage (closed and open) in SVG/ png format (to practise only you can use mine which I drew in Adobe Illustrator CC) and follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript
luggage
luggage inside

Step1.

Add HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <rect width="100%" height="auto" fill="#ffb4a2"/>
  <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://lenadesign.org/wp-content/uploads/2020/06/luggage.png?w=640" width="100%" height="100%" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="mask">
      <circle id="scan" cx="50%" cy="50%" r="8%" />
    </clipPath>
  </defs>
  <g clip-path="url(#mask)">
    <rect width="100%" height="100%" fill="#434373"/>
    <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://lenadesign.org/wp-content/uploads/2020/06/luggage-inside.png?w=640" width="100%" height="100%" />
  </g>
</svg>

Step2.

Add CSS

body {
  background-color:#ffb4a2;
  height: 100vh;  
}

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

Step3.

Add JavaScript

var svgElement = document.querySelector("svg");
var maskedElement = document.querySelector("#scan");
var svgPoint = svgElement.createSVGPoint();

function cursorPoint(e, svg) {
    svgPoint.x = e.clientX;
    svgPoint.y = e.clientY;
    return svgPoint.matrixTransform(svg.getScreenCTM().inverse());
}

function update(svgCoords) {
    maskedElement.setAttribute('cx', svgCoords.x);
    maskedElement.setAttribute('cy', svgCoords.y);
}

window.addEventListener('mousemove', function(e) {
  update(cursorPoint(e, svgElement));
}, false);

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.targetTouches[0];
    if (touch) {
        update(cursorPoint(touch, svgElement));
    }
}, false);

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

Enjoy coding!

Categories
#SVG Web development

SVG Handwriting Animation

Practising SVG Path drawing I created the SVG Handwriting Animation.

SVG Handwriting Animation

I’ve tried several ways to make this animation, and I found (in my opinion) the easiest way is to create the text in Adobe Illustrator (or any different program which creates SVG’s) by using the path tools like the Pen tool, or the Pencil tool.

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

Step1.

Draw your text

This time I used the Pencil tool, and renamed each path (like on the image below, I drew letter L and I named this path as an L). This will make the animation easier to set up later.

I drew the letters one by one but if you want to draw more letters on the same path that will be okay too.

Draw your text and export it like an SVG.(To see how to create an SVG file click here).

Step2.

Add the HTML and paste your SVG code into it:

<div id="container">
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285.84 73.32"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><title>lenastanley</title><path id="L" class="cls-1" d="M109.68,101.19c1.09,5.41,6.88,9,12.4,8.87s10.6-3.21,14.52-7.1c1.82-1.81,3.52-3.94,3.92-6.47s-.9-5.5-3.39-6.15a5.31,5.31,0,0,0-4.69,1.34,12.14,12.14,0,0,0-2.83,4.18c-5.73,12.48-4,27.77-11.35,39.37a13.56,13.56,0,0,1-4,4.32,6.65,6.65,0,0,1-5.66.87c-3.45-1.21-4.62-5.89-3.14-9.23s4.79-5.48,8.15-6.93c4.7-2,10-3.1,15-2s9.64,4.64,11.15,9.55-.81,10.95-5.58,12.85" transform="translate(-103.33 -88.71)"/><path id="E" class="cls-1" d="M154,127.24a15.13,15.13,0,0,0,6.2-2.32c1.77-1.34,2.93-3.76,2.13-5.84s-3.48-3.15-5.72-2.65a9.37,9.37,0,0,0-5.36,4,17.26,17.26,0,0,0-3,11.81,7.87,7.87,0,0,0,1.85,4.62,6.47,6.47,0,0,0,5.85,1.6,12.8,12.8,0,0,0,5.55-2.9" transform="translate(-103.33 -88.71)"/><path id="N" class="cls-1" d="M170.47,115.52c1.94,3.42,1.81,7.63,1,11.47s-1.56,7.08-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.5-7.54,5.67-9.67,1.28-.87,3.07-1.36,4.32-.45a4.59,4.59,0,0,1,1.45,3.13,43.49,43.49,0,0,1-.68,17.12l.28-.62" transform="translate(-103.33 -88.71)"/><path id="A" class="cls-1" d="M210.05,138.29a16.72,16.72,0,0,1-.49-8.35,74.74,74.74,0,0,0,1.18-8.38,6.47,6.47,0,0,0-1.36-4.8,4.93,4.93,0,0,0-4.8-1.07,10.56,10.56,0,0,0-4.33,2.71c-3.58,3.41-6.19,8.15-5.93,13.08.11,2.12.86,4.37,2.61,5.56a4.69,4.69,0,0,0,7.26-3.18" transform="translate(-103.33 -88.71)"/><path id="S" class="cls-1" d="M263.55,91.6a11.16,11.16,0,0,0-7.92,9,4.59,4.59,0,0,0,1.12,4.2,3.42,3.42,0,0,0,4.72-.76,5,5,0,0,0,.21-5.07,9.18,9.18,0,0,0-3.79-3.67c-3.76-2.15-8.58-2.7-12.46-.77s-6.42,6.59-5.29,10.77c.88,3.26,3.68,5.69,6.7,7.22s6.34,2.35,9.46,3.68,6.14,3.31,7.64,6.34a10.65,10.65,0,0,1-.8,10.26,14.2,14.2,0,0,1-8.68,5.91,21.83,21.83,0,0,1-10.65-.33c-3.31-.87-6.6-2.43-8.59-5.21s-2.24-7,.12-9.44a8.48,8.48,0,0,1,5.13-2.27,14.31,14.31,0,0,1,9.19,26.42" transform="translate(-103.33 -88.71)"/><path id="T" class="cls-1" d="M280.38,107c-2,7.37-4,14.83-4.25,22.46a18,18,0,0,0,.91,7.16c.42,1.09,1.2,2.23,2.37,2.32" transform="translate(-103.33 -88.71)"/><path id="T2" class="cls-1" d="M272.26,116.93a27,27,0,0,1,11.69-.07" transform="translate(-103.33 -88.71)"/><path id="A2" class="cls-1" d="M303.78,139.29a16.77,16.77,0,0,1-.48-8.36,76.78,76.78,0,0,0,1.18-8.38c0-1.71-.17-3.57-1.36-4.8a5,5,0,0,0-4.81-1.07A10.58,10.58,0,0,0,294,119.4c-3.59,3.4-6.2,8.15-5.94,13.08.11,2.12.86,4.36,2.62,5.55a4.75,4.75,0,0,0,4.5.42,4.8,4.8,0,0,0,2.76-3.59" transform="translate(-103.33 -88.71)"/><path id="N2" class="cls-1" d="M315,115.69c1.93,3.41,1.81,7.63,1,11.46s-1.56,7.09-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.49-7.54,5.66-9.68,1.28-.86,3.08-1.36,4.33-.45a4.61,4.61,0,0,1,1.44,3.14,43.69,43.69,0,0,1-.67,17.12l.27-.63" transform="translate(-103.33 -88.71)"/><path id="L2" data-name="L" class="cls-1" d="M345.1,96.4c-.3,11.8-4.39,23.33-4.06,35.13a15.66,15.66,0,0,0,1.58,7.26" transform="translate(-103.33 -88.71)"/><path id="E2" class="cls-1" d="M355.85,127.4a15.12,15.12,0,0,0,6.2-2.31c1.77-1.35,2.93-3.77,2.13-5.84s-3.48-3.15-5.72-2.66a9.43,9.43,0,0,0-5.36,4,17.29,17.29,0,0,0-3,11.8,7.92,7.92,0,0,0,1.86,4.62,6.47,6.47,0,0,0,5.85,1.61,12.71,12.71,0,0,0,5.55-2.91" transform="translate(-103.33 -88.71)"/><path id="Y"class="cls-1" d="M373.08,115.75a29.75,29.75,0,0,0-.38,16.7c.52,1.89,1.42,3.94,3.26,4.61a4.61,4.61,0,0,0,4.57-1.22,12,12,0,0,0,2.58-4.21A69.17,69.17,0,0,0,387.62,116l-1.46,13.43a84.83,84.83,0,0,1-2.53,15,28.46,28.46,0,0,1-7.56,13,11.54,11.54,0,0,1-5.4,3,6.09,6.09,0,0,1-5.75-1.72c-1.85-2.17-1.35-5.66.47-7.85s4.63-3.29,7.4-4a16.16,16.16,0,0,1,8.67-.07c2.78.89,5.26,3.18,5.72,6.07l.49-.49" transform="translate(-103.33 -88.71)"/></svg>
</div>

Step3.

Add CSS

Set up the colour and the position of your background, and the elements:

body {
  background-color: #FFD4CA; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

#container {
  position: relative;
  cursor:pointer;
  width: 100%;
  max-width: 400px;
  left:-200px;
}

svg {
  width: 100%;
  max-width: 400px;
  padding: 150px; 
  
}

Add your letters(paths):

#L  {
        stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards;
}

To each letter, I added the animation – duration time and animation-delay to make handwriting smoother.

#E {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards .8s;
}

#N {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 1.1s;
}

#A {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 1.3s;
}

#S {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.4s linear forwards 1.8s;
}

#T {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.3s;
}

#T2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.3s;
}

#A2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.6s;
}

#N2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.9s;
}

#L2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.2s;
}

#E2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.5s;
}

#Y {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.8s;
}

Step4.

Add CSS Animation

Add the @keyframes:

@keyframes lena {
	0% {
        stroke-width: 3;
		stroke-dashoffset: 600;
	}
    
    14% {
        stroke-width: 3;
    }
    
    15% {
        stroke-width: 3;
    }
    
	100% {
		stroke-dashoffset: 0;
	}
}

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

Enjoy coding!

Categories
#SVG Web development

SVG Path Drawing Animation

Path Drawing Animation

The <path> element is used to define a path. It can draw anything you like!

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

To create SVG Path Drawing Animation we’ll use the same SVG path from the tutorial – SVG Draw on Scroll (which I created in Adobe Illustrator).

Step1.

Add HTML

Get a SVG path (make sure that your shape has a stroke).

SVG Path drawing
<svg id="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.43 311.23"><defs><style>.cls-1{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style></defs><title>heart</title><path class="cls-1" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-163.24 -86.84)"/></svg>

Step2.

Add CSS

We will use the stroke-dasharray property for creating dashes in the stroke of SVG shapes, and also a stroke-dashoffset property to define the location along an SVG path where the dash of a stroke will begin.

body {
  background-color: #2a9d8f; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

svg {
  width: 100%;
  max-width: 400px;
  padding: 150px;
  
}

.cls-1{
       stroke-width: 3px;
       stroke-dasharray: 1200;
       stroke-dashoffset: 1200;
       animation: draw 3s linear forwards infinite;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

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

Enjoy coding!

Categories
#SVG Web development

SVG Draw on Scroll

SVG Draw on Scroll

Using SVG and JavaScript to draw a heart on scroll. Note that it has to be a <path> element:

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

Step1.

Add HTML

Get a SVG path

To make this animation working it has to be a path (any other of SVG elements won’t work).

To create an animation I drew a path (heart) in Adobe Illustrator. To read more about SVG and learn how to create a SVG file click here and here.

<div class="container">
<div class="text"><h1>Scroll to draw</h1></div>
  
  
<svg id="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.43 311.23"><defs><style>.heart{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style></defs><title>heart</title><path id="heart1" class="heart" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-163.24 -86.84)"/></svg>
  
</div>

Step2.

Add CSS

body {
  background: linear-gradient(141deg, #f0f3bd 0%, #02c39a 51%, #00a896 75%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5000px;
  
}

.container {
  position: relative; 
}

svg {
  stroke-width: 2px;
  position: fixed;
  width: 200px;
  height: auto;
  margin:0;
  top: 30%;
  left: 45%;
}

.text {
  position: absolute;
  top:-2500px;
  display: block;
  color: white;
  width:400px;
  left:-100px;
  text-shadow: 1px 1px 1px black;
}

Step3.

Add JavaScript

const svg = document.getElementById("heart1");
const length = svg.getTotalLength();


svg.style.strokeDasharray = length;

svg.style.strokeDashoffset = length;

window.addEventListener("scroll", function () {
  const scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  const draw = length * scrollpercent;

  svg.style.strokeDashoffset = length - draw;

});

To see the live output check my Codepen.

Enjoy coding!

Categories
#SVG Web development

SVG vs PNG/ How to add SVG to HTML?/ FAQ SVG

Most of us know that when building stuff for the website, optimizing HTML, CSS, JavaScript or whatever else is good — but if you don’t optimize images, all other efforts will be in vain, and your website won’t look good.

SVG Introduction

If you follow my blog, for sure you noticed that in many tutorials I am using images in .png format, however, there is also a different image format that works well with the web page – SVG .

Why am I choosing PNGs and SVGs?

These formats support transparency, which does not support .jpg.

SVG and PNG both are a type of image format to store images. so…what’s the difference between a PNG and SVG

PNG (Portable Network Graphics) file is a raster or bitmap image file format. A raster image is made up of a fixed number of  pixels [or building blocks] that form a complete image. 

The image cannot be enlarged without distortion occurring. (When you zoom in on a raster image, the pixels become visibly grainy.) Common raster image files include png, jpg and gif formats. 

A SVG (Scalable Vector Graphics) file is a vector image file format. A vector image uses geometric forms such as points, lines, curves and shapes (polygons) to represent different parts of the image as discrete objects. These forms can be individually edited. A vector image remains crisp and clear at any resolution or size.

Example:

Images with height=”142″ width=”142″, and after resizing to height=”842″ width=”842″:
PNG is fussy if the pixel density is not high enough. SVG format, can be scaled to any size without losing quality.
On the left side an image in .png format, on the right side .svg.

Of course, as usual, it depends on you, which format you prefer, however, always you can try using another one, and have a look at how it works with your web page.

If the sample above convinced you to try to use SVG let’s go further!

For sure you have lots of questions now! Here are some answers on the most frequent one:

FAQ SVG:

From where I can get SVG files?

You can find some free stocks of SVG images on Internet, or you can create them by yourself.

In which program I can create an SVG file?

Personally I am using Adobe Illustrator, but if you don’t want to pay for the software you can use a free program like Inkscape to create SVG files.

How to create an SVG file in Adobe Illustrator?

Create your image in Adobe Illustrator.

Tip: try to always give a name to the layer, you can easily later make any changes in SVG code (more about SVG code you will find below).

Go to File->Export->Export As… and choose format SVG.

by pressing the option Show Code you can see the code of your SVG (or you can open it in any HTML editor later):

How to add SVG to HTML?

You can do as I did in the example above, by using <img> element:

or copy the SVG code directly into HTML. You can read more about HTML SVG also here.

How to paste SVG code into HTML?

If you don’t want to do any changes with your image you can easily choose the first method (by <img> tag )to add your SVG file, but if you want to animate your image with CSS, or JavaScript you should go for method two:

Let’s take a look on code first:

You do not need to be afraid of these numbers, you don’t need them for now.

*the HTML <svg>element is a container for SVG graphics.
*and this part is nothing other than CSS.
*SVG code pasted and opened in Adobe Dreamweaver CC editor (you can use any HTML editor to edit the code!).

How to animate SVG?

To animate SVG you can use CSS, or JavaScript. Let’s try to animate our dot with CSS:

Example:

To our green dot I added the animation – Jelly, and @keyframes:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
	<style>.cls-1{fill:#009640;}
		.cls-2{fill:#2fac66;}
		.cls-3{fill:#fff;}
	    	.cls-4{fill:#1d1d1b;}
		
		svg {
             width: 100%;
             max-width: 300px;
	     padding: 50px;
	     animation: jelly 0.5s infinite;
			}
  
			@keyframes jelly {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
}
	</style>
</head>

<body>
	<svg id="ball" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.18 126.18"><defs>
		</defs><title>ball</title><circle class="cls-1" cx="63.09" cy="63.09" r="63.09"/><circle class="cls-2" cx="60.97" cy="61.97" r="59.97"/><circle class="cls-3" cx="44.79" cy="49.74" r="15.18"/><circle class="cls-3" cx="80.92" cy="49.74" r="15.18"/><circle class="cls-4" cx="83.77" cy="55.5" r="9.42"/><circle class="cls-4" cx="47.12" cy="55.5" r="9.42"/><path class="cls-4" d="M234.32,209.25c0,13.43-11.93,24.31-26.65,24.31S181,222.68,181,209.25" transform="translate(-145.58 -137.79)"/></svg>
</body>
</html>

Output:

This SVG only has one layer, if you have an image with more layers you can animate and style each layer separately.

To see the live example go to lenastanley.com.

Hope this helps 🙂

Enjoy coding!