SVG Brilliance 10 exemples inspirants du Web

Les graphiques vectoriels évolutifs (SVG) ne nécessitent aucune introduction pour les concepteurs Web. Ils s’agrandissent et s’agrandissent de manière très nette, s’agencent bien avec les animations, ils constituent un format puissant pour les icônes et bien plus encore. Ce billet d’inspiration fait partie d’une série en cours chez Envato Tuts +, qui rassemble une liste de dix sites Web qui font une utilisation inspirante de SVG dans un sens technique ou créatif..

Waark

Waark est un studio Web créatif qui est fier de créer des sites Web élégants et fonctionnels conçus sur mesure. Lors de sa première sortie, il a pris d'assaut la communauté avec tous ses mouvements glorieux et à la fine pointe, exploitant Canvas et, bien sûr, SVG.

waaark.com

Certains de mes mouvements préférés se produisent dans ces types de séquences de chargement où le graphique du milieu prend vie au chargement de la page et continue avec des mouvements subtils. Il est également bon de noter que la plupart des animations SVG utilisent la bibliothèque GreenSock. Assurez-vous de regarder cette vidéo postée par I Hate Tomatoes en train de se déconstruire plus en détail:

Supremo's Typeterms

Type Terms est un aide-mémoire typographique animé. Si vous débutez dans la typographie ou si vous souhaitez simplement rafraîchir votre mémoire, Type Terms est l'outil idéal pour vous..

www.supremo.tv/typeterms/

Une utilisation vraiment inspirante de SVG pour enseigner la terminologie typographique. Chaque caractère de la leçon appelle l'attention sur la durée de la discussion, ce qui facilite l'identification de ce qui est présenté. Bien que je ne considère pas ce site comme techniquement inspirant, je trouve son utilisation très créative. La plupart des exemples de mouvement SVG sont des bits divisés, utilisant CSS pour le mouvement.

Cuberto

Cuberto est une agence de création numérique basée au Royaume-Uni. Elle constitue une équipe attentive au design et au mouvement. La façon dont le site Web Cuberto utilise SVG est tout simplement magnifique. des simples mouvements de lettre au minuscule indicateur de souris permettant à l'utilisateur de faire défiler.

cuberto.com

Chaque mouvement des lettres est 100% SVG. Cuberto utilise le masquage pour créer chaque caractère avec une texture séparée. Un site très inspirant et une utilisation créative de SVG et du mouvement. Une note finale est que les fanatiques de GreenSock seront ravis de savoir que GSAP est utilisé. Impressionnant.

Horizon

Horizon est ce qu’on appelle un «backend JavaScript en temps réel» qui permet de créer et de déployer rapidement à l’aide d’une API simple..

horizon.io

Ce que je préfère dans ce site, et vraiment le seul endroit qui utilise SVG, ce sont les écrans qui contiennent une scène en mouvement. Ceci utilise GSAP et une série de masques et de chemins de clips. L’autre aspect que j’ai vraiment aimé découvrir est le fait que vous pouvez imbriquer un SVG dans un SVG! Incroyable!

SVG Porn

Où allez-vous quand vous voulez des logos SVG de qualité? SVG Porn bien sûr! Une grande collection de logos pour les développeurs, les éditeurs et les concepteurs couvrant un large éventail de catégories. 

svgporn.com

C'est simple, intuitif et pertinent. SVG Porn fournit un espace pour les logos SVG (y compris cet exemple familier ci-dessus) qui sont ouverts au public et qui sont optimisés (après avoir supprimé les chemins dupliqués, sans regroupement excessif, sans définition vide, sans charpie, etc.) et disponibles sur GitHub..

Icônes de réaction

Cet outil particulier montre comment créer des graphiques générés de manière mathématique avec SVG, JavaScript et React.

jxnblk.com/react-icons/#live-demo

En utilisant chaque curseur, un utilisateur peut mettre à jour les points de chemin SVG et même changer le diamètre.

Ceci est utilisé pour créer des graphiques parfaits à partir de pixels, issus de calculs mathématiques, que la plupart des applications ne peuvent obtenir correctement. J'aime ces types d'outils qui affichent du code lors de la mise à jour et deviennent presque magiques à mesure que le graphique se transforme et se déforme lorsque vous déplacez chaque curseur. Vraiment inspirant et vraiment fantastique.

Fleximize Squad

Fleximize est une entreprise qui propose des prêts financiers aux petites entreprises avec pour mission de révolutionner le monde du financement des entreprises..

Fleximize Squad est une expérience ludique entièrement basée sur des animations SVG. À travers trois histoires différentes liées, les utilisateurs peuvent accéder à un moyen intelligent de demander un prêt.

fleximize.com/mission

Ce site époustouflant associe audio, mouvement SVG et, bien sûr, utilisation de GreenSock. Il s’agit d’une expérience très linéaire. Ne vous attendez donc pas à appuyer sur le bouton Précédent avec ce monstre, mais c’est toujours un exemple fantastique que vous apprécierez pendant des jours avec l’inspecteur DevTools ouvert..

Mo.js

Le projet Mo.js de LegoMushroom est une bibliothèque permettant de créer des animations et des effets rapides et soyeux pour le Web..

Ce que je trouve vraiment inspirant dans ce projet, c’est l’utilisation de la physique dans le mouvement, comme les flous, les rebondissements, et bien plus encore - plus elle est open source et tout le monde peut contribuer à l’amélioration du code caché. Ai-je mentionné qu'il combine également l'audio? Vérifiez ce projet immédiatement!

Démos: https://github.com/legomushroom/mojs#demos

Trulia: CV de location

Trulia est une ressource immobilière mobile et en ligne qui facilite la recherche d'une maison en fournissant aux acheteurs, aux locataires et aux vendeurs les informations dont ils ont besoin pour prendre des décisions éclairées en ce qui concerne le lieu de résidence..

www.trulia.com/rent/rental-resume

Parfois, les mouvements les plus satisfaisants sont ceux qui sont subtils, et dans ce cas, c’est précisément ce qui a attiré mon attention. Cette animation SVG (conçue par Jon Campos, animée par Sarah Drasner) montre bien l’idée de soumettre un CV et décrit visuellement les étapes de la simplicité de la soumission d’un formulaire. Tellement génial que ce soit chaque bit SVG et GreenSock.

Génération SVG

Vous voulez des motifs SVG géniaux pour votre prochain projet? SVG Generation est un endroit idéal pour obtenir ces informations et les personnaliser avant de les télécharger. Créez n'importe quoi à partir de zig-zags, bobines, cubes, bandes et bien plus encore. Même les jeans:

www.svgeneration.com/recipes/Blue-Jean

Personnalisez les paramètres tels que les couleurs de trait, la taille et les remplissages. Un projet tueur qui est également open-source sur GitHub. Vous pouvez acheter un autre excellent modéliste SVG de Philip Rogers basé sur la Pattern Gallery de Lea Verou CSS3.

Circulus & SVG Coordinate System Viewer

Tous ceux qui comprennent SVG connaissent le travail de Sara. J'ai choisi ces deux démonstrations car je les trouve vraiment utiles dans tous les sens de l'éducation et sous forme de projet.

Si vous avez du mal à comprendre ce que l'attribut viewBox ne cherche pas plus loin. Cette démo supprimera le mystère qu'est viewBox et vous montrera en temps réel comment les valeurs affectent le résultat. Travail exceptionnel Sara!

sarasoueidan.com/demos/interactive-svg-coordinate-system/

Circulus est un autre outil de démonstration en temps réel qui peut également être utilisé pour inclure le résultat dans votre projet. Les menus Circle sont très branchés, surtout quand vous pouvez les voir créés et personnalisés juste devant vous!

Conclusion

SVG est tout autour de nous sur le Web ces jours-ci! Dites-nous quels sites Web inspirants sur lesquels vous avez remarqué le génie SVG et consultez ces ressources d'apprentissage sur Tuts + pour vous mettre à niveau: