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 Baron
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 :
The code of this SVG animation is available on this link.
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: :
The code of this SVG animation is available on this link.
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 :
The code of this SVG animation is available on this link.
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 :
In this example of Lottie animation :
The code of this SVG animation is available on this link.
The SVG library created by Snoweb gathers several types of SVG for various uses:
Note:
The Snoweb SVG library is available in three languages, French, English and German and the technical documentation is in English.
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 :
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.
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
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!
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 :
You will surely notice it, but I prefer to indicate it to you, for each icon, there are 5 variants in the library:
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 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.
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.
The Brand collection includes the icons of 22 brands most used on websites. These are mostly social networks, such as Linkedin, Facebook and Twitter.
If you are looking for number icons to list things, the Number collection is for you! You will find numbers from 0 to 9.
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!
Snoweb-SVG allows you to make your website more modern and more pleasant to browse thanks to its icons and its block separators.
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.
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!
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
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:
Find all our articles on the web design of your website.
Anne-Laure Compain
Alexis Le Baron
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
