Bring you website to life with SVG animations
Tags: css, html, ux, webdev
Published: 2021-03-28 03:38:53

# What is a SVG?

`Scalable Vector Graphics` (`SVG`) are an `XML`-based markup language for describing **two-dimensional based vector graphics**. Compared to classic bitmapped image formats such as `JPEG` or `PNG`, `SVG`-format **vector images** can be rendered at any size **without loss of quality** and can be easily **localized** by **updating the text within them**, without the need of a graphical editor to do so.

`SVG`s can be **styled and animated** with `CSS` (slides). Basically, any transformation or transition animation that can be applied to an `HTML` element can also be applied to an `SVG` element.

# Demo

{% codepen https://codepen.io/ruppysuppy/pen/abpNjNP %}

# Getting Started

Paste the `SVG` directly in your `HTML` code

```html
<!-- 
Tick SVG
-->
<svg class="tick-svg" xmlns="http://www.w3.org/2000/svg" width="367.805" height="367.805" viewBox="0 0 367.805 367.805">
  <g transform="translate(0 0)">
    <path class="container" data-name="Path 1" d="M183.9,0A183.9,183.9,0,1,1,0,183.9H0A183.379,183.379,0,0,1,182.856,0Q183.38,0,183.9,0Z" />
    <path class="tick" data-name="Path 2" d="M285.78,133.225,155.168,263.837l-73.143-72.62,29.78-29.257L155.168,204.8,256,103.968Z" />
  </g>
</svg>

<!-- 
Particles SVG
-->
<svg class="particles-svg" xmlns="http://www.w3.org/2000/svg" width="758" height="758" viewBox="0 0 758 758">
  <g transform="translate(195.501 195)">
    <g transform="translate(716.499 -482.5) rotate(90)">
      <rect data-name="particle 4" width="27" height="110" rx="13.5" transform="translate(388.961 274.552) rotate(-45)" class="particle" />
      <rect data-name="particle 3" width="27" height="110" rx="13.5" transform="translate(847.166 732.758) rotate(-45)" class="particle" />
      <rect data-name="particle 2" width="27" height="110" rx="13.5" transform="translate(408.052 810.539) rotate(-135)" class="particle" />
      <rect data-name="particle 1" width="27" height="110" rx="13.5" transform="translate(866.258 352.334) rotate(-135)" class="particle" />
      <rect data-name="particle 4" width="27" height="110" rx="13.5" transform="translate(653 154)" class="particle" />
      <rect data-name="particle 3" width="27" height="110" rx="13.5" transform="translate(653 802)" class="particle" />
      <rect data-name="particle 2" width="27" height="110" rx="13.5" transform="translate(287.5 546.5) rotate(-90)" class="particle" />
      <rect data-name="particle 1" width="27" height="110" rx="13.5" transform="translate(935.5 546.5) rotate(-90)" class="particle" />
    </g>
  </g>
</svg>
```

# Animating the SVG

You can animate the `SVG`s using `CSS` selectors and adding the required properties. One important thing to keep in mind is to reset the **transform origin** (to the **center** in most cases) as the default is `0 0`, which is the top left.

```css
.svg-part-selector {
  transform-origin: center; /* or any other value */
}
```

First lets add the keyframe animations

```css
@keyframes zoom {
  0%,
  5% {
    transform: scale(0);
  }
  20%,
  80% {
    transform: scale(1);
  }
  95%,
  100% {
    transform: scale(0);
  }
}

@keyframes spin-zoom {
  0%,
  20% {
    transform: scale(0) rotateZ(0deg);
  }
  40%,
  60% {
    transform: scale(1) rotateZ(360deg);
  }
  80%,
  100% {
    transform: scale(0) rotateZ(0deg);
  }
}

@keyframes burst {
  0%,
  20% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    transform: scale(1);
    opacity: 0;
  }
  80%,
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
```

Tick Animation & Styling

```css
.tick-svg {
  width: 100px;
  height: 100px;
}

.container {
  fill: #3bb54a;
  transform-origin: center;
  animation: zoom 2s ease-in-out 0s infinite forwards;
}

.tick {
  fill: #ffffff;
  transform-origin: center;
  animation: spin-zoom 2s ease 0s infinite forwards;
}
```

Particle Animation & Styling

```css
.particles-svg {
  width: 180px;
  height: 180px;
  position: absolute;
  z-index: -1;
  animation: burst 2s ease 0s infinite forwards;
}

.particle {
  fill: #fe0;
}
```

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Reference

### CSS Tricks

1. [A Guide to SVG Animations](https://css-tricks.com/guide-svg-animations-smil/)

### MDN Web Docs

1. [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)

### Youtube

1. [Learn To Build An SVG Animation With CSS](https://www.youtube.com/watch?v=gWai7fYp9PY&t=73s)
2. [Make Awesome SVG Animations with CSS](https://www.youtube.com/watch?v=UTHgr6NLeEw)

# Thanks for reading

Reach out to me on:

-   [Portfolio](https://tapajyoti-bose.web.app)
-   [GitHub](https://github.com/ruppysuppy)
-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose-429a601a0)