Categories
Web development

Baggage Scan /SVG & JavaScript Animation

SVG luggage

Scan the luggage!

Demo:

To create the animation you need to have two images of the luggage (closed and open) in SVG/ png format (to practice 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);

Enjoy coding!

Read also:

SVG Draw on Scroll

SVG Handwriting Animation

SVG Path Drawing Animation

Categories
Web development

SVG Handwriting Animation

Practicing 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 on the website click here.

Demo:

Step1.

Draw your text

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

SVG Handwriting Animation

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!

Read also:

CSS Background Change Animation – Day & Night

CSS Umbrella (Open/Close on Click)

Categories
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 formats 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. 

An 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:

How to add SVG to HTML?
Images with height=”142″ width=”142″, and after resizing to height=”842″ width=”842″:
How to add SVG to HTML?
PNG is fussy if the pixel density is not high enough. SVG format can be scaled to any size without losing quality.
How to add SVG to HTML?
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.

SVG files
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.

How to add SVG to HTML?

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?

How to add SVG to HTML?

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

How to add SVG to HTML?

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 to 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 at the code first:

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

SVG path
*the HTML <svg>element is a container for SVG graphics.
SVG path
*and this part is nothing other than CSS.
SVG path
*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:

Hope this helps 🙂

Enjoy coding!

Read also:

How to resize an SVG image?

HTML SVG

Baggage Scan /SVG & JavaScript Animation

Categories
Web development

HTML SVG

The HTML <svg> tag is a container for SVG graphics. HTML <svg> is used to define graphics for the Web. SVG stands for Scalable Vector Graphics.

HTML SVG

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Example1 – draw a circle:

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="200">
  <circle cx="100" cy="100" r="60"
  stroke="#264653" stroke-width="6" fill="#2a9d8f" />
</svg>
 
</body>
</html>

Output:

SVG Circle

Example2 – draw a rectangle:

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="100">
  <rect width="300" height="100" 
  style="fill:#2a9d8f;stroke-width:10;stroke:#264653;" />
</svg>
 
</body>
</html>

Output:

SVG Rectangle

Example3 – draw a star.

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:#e9c46a;stroke:#e9c46a;stroke-width:5;fill-rule:#e9c46a;" />
</svg>
 
</body>
</html>

Output:

SVG Star

Example4 – SVG Logo

<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(42,157,143);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(233,196,106);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#gradient)" />
  <text fill="#264653" font-size="40" font-family="tahoma"
  x="60" y="85">Logo</text>
</svg>

</body>
</html>

Output:

SVG Logo

Differences Between SVG and Canvas:

SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with JavaScript).

SVG is XML-based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Note: Before you start to learn SVG you should have some basic understanding of the following: HTML and XML.

Enjoy coding!

Read also:

FAQ SVG

How to resize an SVG image?