WEB DESIGN

SVG and animation for a website

Find in this article examples of animations made by Snoweb with SVG for a website. These animations will allow to dynamize the design of the website while keeping it optimized.

Alexis Le BaronAlexis Le Baron

Alexis Le Baron

Web Developer at Snoweb
Published on 14 July 2021 (Updated on 2 April 2022)


1. Various SVG animation effects

1.1 Mask effect

The <clipPath> attribute of an SVG allows shapes to appear on a <g> group.

Example :

<clipPath id="my-id">
    <rect width="100" height="100"></rect>
</clipPath>

That we apply to a group :

<g clip-path="url(#my-id)">
	...
</g>

The <clipPath> allows groups of elements to appear/disappear :

  • cubes
  • light
  • stars
svg animation with mask
The code of this SVG animation is available on this link.

1.2 Wave effect

To have the effect of a wave, we use a <path> with a simple <animate> that will vary its direction :

<path d="...">
    <animate
        attributeName="d"
        dur="5s"
        begin="1s"
        values=" ... ; ... ; ... "
    />
</path>

Which gives us this: :

svg animation wave
The code of this SVG animation is available on this link.

1.3 Stroke effect

The attribute of an SVG can be either stroke or fill.

Here, we use a <path> with "stroke" to have a line, which allows us to play on its layout :

<path d="..." stroke-dashoffset="100%">
    <animate
	    attributeName="stroke-dasharray"
	    dur="20s"
	    values="80%;120%;80%"
	    repeatCount="indefinite"
    />
</path>

Example :

svg animation with stroke
The code of this SVG animation is available on this link.

1.4 Circle effect

To give the impression of filling a part of an SVG, it is possible to animate the radius of a <circle> element like this :

<circle cx="50" cy="100" r="0">
    <animate
        attributeName="r"
        dur="5s"
        values="0;50;0"
    />
</circle>

This gives us the following :

svg animation with circle

The code of this SVG animation is available on this link.

2. Lottie Animation

In this example of Lottie animation :

  • the illustrations were made on Illustrator
  • the animations on After Effect
  • the export of the animations in json thanks to Bodymovin
  • visualization and playback on this web page thanks toWagtail Lottie, an open source module of Wagtail made by Snoweb
The code of this SVG animation is available on this link.


3. Snoweb SVG library

The SVG library created by Snoweb gathers several types of SVG for various uses:

  • icon
  • block separator
  • block decoration
  • and many others

Note:

The Snoweb SVG library is available in three languages, French, English and German and the technical documentation is in English.

3.1 Using

This library has been designed to respect the optimization constraints of a website. Indeed, it is different from the current icon libraries. Snoweb SVG does not require to load all the files when loading the web page which, as we know, increases the loading time of the page.

When the page is loaded, Snoweb SVG only needs to load a CSS file that gathers all the mechanisms of :

  • colors
  • light and dark themes
  • animations

No Javascript code is used, either in the library, in its installation or in its use.

<!-- Colors and theme  -->
<link rel="stylesheet" href="https://static.snoweb.io/snowebsvg/dist/css/themes-0.0.87.css">
<!-- Animations -->
<link rel="stylesheet" href="https://static.snoweb.io/snowebsvg/dist/css/core-0.0.87.css">

To simplify the use of the library, Snoweb has thought of everything.

First of all, there is a Python module that allows to use the library with Django and Wagtail. Indeed, a simple command allows to import all the icons in the database. This action allows you to select in one click the desired icon when creating a web page.

# Adds SVGs to the database
python manage.py svg_build

# Display an SVG from the HTML of Django or Wagtail
{% load svg %}
{% svg_inline 'heroicons-lightbulb-basic' 'light' 100 100 %}

Second point, it is possible to use the SVGs of the library directly in HTML, by copying the SVG code available on the library.

Here is a simple example:

I want to get the Lightbulb icon. Here are the steps to follow:

1- I go to the library and in the search bar I write Lightbulb

2- I choose among the displayed icons the one I want to recover

snoweb svg library icons

3- I copy the HTML code

<svg class="svg-snoweb svg-theme-light" 
         height="100" preserveaspectratio="xMidYMid meet" 
         viewbox="0 0 100 100" 
         width="100" 
         x="0" 
         xmlns="http://www.w3.org/2000/svg" y="0">
   <path class="svg-stroke-primary" 
              d="M40.3,70.8H59.7M50,12.6v4.1m26.5,6.8-3,3M87.4,50H83.3M16.7,50H12.6M26.5,26.5l-3-3M35.3,64.7a20.8,20.8,0,1,1,29.4,0L62.4,67a14.1,14.1,0,0,0-4.1,9.9v2.2a8.3,8.3,0,0,1-16.6,0V76.9A14.1,14.1,0,0,0,37.6,67Z" 
              fill="none" 
              stroke-linecap="round" 
              stroke-linejoin="round" 
              stroke-width="8">
   </path>
</svg>

Congratulations, you have recovered the Lightbulb icon!

snoweb svg library icons

3.2 Settings

The settings of the Snoweb SVG library are rich and allow you to test the icons with new colors, a new background or a glassmorphism effect.

For more details, in the settings, you can :

  • View the library in dark or light mode
  • Discover the icons with a glassmorphism effect
  • Change the colors of the icons
  • Change the background color with a solid color or a gradient
changement-couleur-icon-light

3.3 Collections

You will surely notice it, but I prefer to indicate it to you, for each icon, there are 5 variants in the library:

  • basic : it is the icon drawn in outline "stroke".
  • small : this is the icon in fill
  • rect : it adds a square in the background of the icon. A fill animation is made when the mouse passes over this icon
  • circle : this adds a circle in the background of the icon. A fill animation is done when the mouse passes over this icon
  • line : this adds a line below the icon. A fill animation is done when the mouse passes over this icon

In addition, and as indicated above, on some icons there is an animation when the mouse passes over them. By choice of optimization, this animation is light and made in CSS.

  • HEROICONS

Heroicons is an open source icon library created by Tailwind. It gathers the essential icons that a website might need. However, these icons are still very general. That's why Snoweb has designed its own icons and put them in the Northenlight collection.

  • NORTHENLIGHT

As previously mentioned, Northenlight is a collection of icons designed by Snoweb. In fact, according to the needs of its customers, Snoweb creates more specific icons according to the sectors of activity and which are not found in Heroicons.

  • BRAND

The Brand collection includes the icons of 22 brands most used on websites. These are mostly social networks, such as Linkedin, Facebook and Twitter.

  • NUMBERS

If you are looking for number icons to list things, the Number collection is for you! You will find numbers from 0 to 9.

  • SEPARATOR_BOTTOM and SEPARATOR_TOP

The separator_bottom and separator_top are used to separate blocks. For example, between a white block and a blue block, you may decide to add a wave separator to make the passage between the two blocks more visually pleasant.

See an example of a separator just below!
SVG for the web

Snoweb-SVG allows you to make your website more modern and more pleasant to browse thanks to its icons and its block separators.

icons
+ 1 500
separators
+ 50
patterns
+ 115
Need advice on SVGsand their animations
  • DECORATOR

The Decorator collection includes graphic elements that can be added to blocks to decorate them. They are simple shapes like squares, triangles or circles but also more elaborate shapes like clouds or sets of dots.

  • HEROPATTERN

Do you know what a pattern is? A pattern is a motif made in such a way that it can be reproduced over and over again without forming a break between each reproduction. In its library, Snoweb offers you more than 150 different patterns to decorate the background of your web pages or your blocks!

  • BACKGROUND

The Background collection provides animated or not graphic elements that you can put in the background of a block or a web page.


For more information, here is the list of Snoweb SVG links

4. Conclusion

SVG is an essential tool in the web and it allows you to make your website more dynamic and attractive! So think about using it for your icons, for your logo but also for your illustrations. And for the most creative among us, SVGs will come to life and animate thanks to Bodymovin or CSS.

Here is what you need to remember:

  • For a simple and optimal animation of an SVG ➡️ SMIL or CSS
  • For a more complex animation of an SVG ➡️ Lottie
  • To have an optimized and varied icon library ➡️ Snoweb-SVG
I need help in web design for theredesign of my website