Catégories
Astuces et Design

Packs de conception: le site ultime des SVG

Si vous recherchez des images et des modèles – ce qui ne l'est pas de nos jours – Design Bundles est un guichet unique pour des offres sur toutes sortes de ressources de conception. Des ressources de conception gratuites aux éléments premium, vous trouverez une vaste collection d'outils qui vous faciliteront la vie de conception. […]

Catégories
Astuces et Design

Comment obtenir une animation d'écriture avec des traits SVG irréguliers

Je voulais faire une animation d'écriture manuscrite pour les polices de calligraphie – le genre où les mots s'animent comme s'ils étaient écrits par un stylo invisible. Parce que les polices de calligraphie ont des largeurs de trait inégales (elles ne sont même pas des traits en termes de SVG), il était presque impossible de […]

Catégories
Astuces et Design

Qu'est-ce que l'animation SVG? – Magazine Smashing

Nous parlons d'animation SVG. Comment les images vectorielles, JavaScript et CSS peuvent-ils tous fonctionner ensemble pour fournir des animations graphiques attrayantes? Drew McLellan parle à l'expert SVG Cassie Evans pour le savoir. Aujourd'hui, nous parlons d'animation SVG. Comment les images vectorielles, JavaScript et CSS peuvent-ils tous fonctionner ensemble pour fournir des animations graphiques attrayantes? J'ai […]

Catégories
Astuces et Design

Comment simplifier le code SVG à l'aide de formes de base

Il existe différentes manières de travailler avec les icônes, mais la meilleure solution inclut toujours SVG, qu'il soit implémenté en ligne ou lié en tant que fichier image. C'est parce qu'ils sont «dessinés» dans le code, ce qui les rend flexibles, adaptables et évolutifs dans n'importe quel contexte. Mais lorsque vous travaillez avec SVG, il […]

Catégories
Astuces et Design

Morphing SVG avec react-spring | Astuces CSS

Je suis intrigué par l’effet de morphing depuis que je suis enfant. Il y a quelque chose dans une animation qui change de forme qui capte toujours mon attention. La première fois que j'ai vu le morphing m'a laissé me demander «Wow, comment ont-ils fait ça?«Depuis, j’ai créé des démos et écrit un article sur […]

Catégories
Astuces et Design

Faisons de l'art génératif que nous pouvons exporter au format SVG et PNG

Disons que vous êtes un designer. Cool. Vous avez été embauché pour faire des travaux de conception pour une conférence. Toutes sortes de trucs. Site Internet. Horaires imprimés. Grandes affiches pour les chambres. Diapositives Preroll. Vous l'appelez. Vous proposez donc une esthétique pour tout cela – une ambiance de design qui lie le tout et […]

Catégories
Astuces et Design

SVG 101: Qu'est-ce que SVG?

Bien qu'il ait été conçu à la fin des années 1990, SVG est à bien des égards le format de fichier «vilain petit canard» qui a grandi pour devenir un cygne. Mal pris en charge et largement ignoré pour la plupart des années 2000, depuis environ 2017, tous les navigateurs Web modernes ont rendu SVG […]

Catégories
Astuces et Design

The Making of: le site d'animation SVG Million Devs de Netlify

L'article suivant décrit le processus de création du microsite Million Developers pour Netlify. Ce projet a été construit par quelques personnes et nous avons capturé certaines parties du processus de construction ici – en nous concentrant principalement sur les aspects de l'animation, au cas où certains seraient utiles à d'autres qui construisent des expériences similaires. […]

Catégories
Astuces et Design

16 animations SVG impressionnantes – 1stWebDesigner

Connaissez-vous les animations SVG? Sinon, vous devriez vraiment prendre le temps de le faire. Au cas où vous ne le sauriez pas, ces superbes animations peuvent être utilisées sur n'importe quel site Web pour ajouter du caractère, de l'intérêt et de l'interactivité. Ils peuvent être utilisés pour les écrans de chargement, les menus et d'autres […]

Catégories
Astuces et Design

Un système d'icônes SVG semblable à une police pour Vue

La gestion d'une collection personnalisée d'icônes dans une application Vue peut parfois être difficile. Une police d'icônes est facile à utiliser, mais pour la personnalisation, vous devez vous fier à des générateurs de polices tiers et les conflits de fusion peuvent être pénibles à résoudre car les polices sont des fichiers binaires. L'utilisation de fichiers […]

Catégories
Astuces et Design

SVG, favicons et toutes les choses amusantes que nous pouvons faire avec eux

Les favicons sont les petites icônes que vous voyez dans l'onglet de votre navigateur. Ils vous aident à comprendre de quel site il s'agit lorsque vous parcourez les signets et les onglets ouverts de votre navigateur. Ils font partie intégrante de l'histoire d'Internet et sont capables d'effectuer quelques trucs sympas. Une toute nouvelle astuce est […]