Svg

Dev front

Color Generator – Kigen

Cet article présente un plugin Figma pour générer des palettes de couleurs basées sur Tailwind CSS. Le plugin permet de choisir des nuances de couleur spécifiées par des codes HEX, RGBA, HSL, et d'autres formats. Il facilite la création de contrastes adaptés pour les designs, tout en respectant les principes d'accessibilité. Ce générateur est utile pour les développeurs et designers qui cherchent à simplifier le processus de création de palettes de couleur esthétiques et fonctionnelles.

kigen.design

svg
"
Autre

Trivabble a 10 ans - LinuxFr.org

L'article présente les nouvelles fonctionnalités et les améliorations apportées au jeu Trivabble, un jeu de mots en réseau inspiré du Scrabble. Il souligne la contribution communautaire et les mises à jour pour la maintenance du code, y compris des améliorations d'interface et des options de personnalisation. Trivabble, bien que développé lentement, reste fonctionnel et continue d'évoluer avec le soutien des utilisateurs.

linuxfr.org

svg
"
Dev front

HakoTools — Design Tools

HakoTools est une plateforme qui centralise divers outils de design, permettant aux utilisateurs de tester et créer des typographies, palettes de couleurs et autres éléments graphiques pour leurs projets web. Elle inclut des fonctionnalités pour assurer l'accessibilité des designs, ainsi qu'une bibliothèque d'icônes et des outils pour personnaliser des arrière-plans et générer des gradients. Les utilisateurs peuvent s'inscrire pour recevoir des mises à jour sur de nouveaux outils.

adelinecourtois.fr

svg
Dev front

An Interactive Guide to SVG Paths • Josh W. Comeau

Cet article propose un guide interactif sur l'utilisation des chemins SVG, en expliquant comment dessiner des formes en utilisant des commandes spécifiques comme 'M' pour déplacer le 'stylo' et des courbes Bézier. Il aborde la syntaxe des chemins SVG et donne des conseils pour rendre cette syntaxe plus compréhensible. En plus de sa structure de base, l'article décrit comment utiliser des courbes quadratiques et cubiques, ainsi que les subtilités de l'utilisation de commandes en minuscules et en majuscules.

www.joshwcomeau.com

svg
Dev front

A Friendly Introduction to SVG • Josh W. Comeau

Cet article présente une introduction amicale aux SVG (Scalable Vector Graphics), une technologie d'illustration puissante et dynamique intégrable dans le développement web. L'auteur explique les fondamentaux des SVG, leur intégration dans des documents HTML, et la façon d'utiliser CSS et JavaScript pour manipuler et animer des éléments SVG. Des exemples de formes basiques (lignes, rectangles, cercles, ellipses et polygones) sont fournis pour illustrer comment créer et styliser des graphiques vectoriels.

www.joshwcomeau.com

svg
Dev front

Anime.js | JavaScript Animation Engine

Anime.js est une bibliothèque JavaScript rapide et polyvalente dédiée à l'animation sur le web. Elle propose une API intuitive permettant d'animer facilement divers éléments, avec des fonctionnalités avancées telles que le morphing de formes, le dessin de lignes et la synchronisation des animations à l'aide d'un observateur de défilement. L'API offre également des méthodes pour gérer les animations réactives et des options pour minimiser la taille du bundle en important uniquement les parties nécessaires.

animejs.com

svg
Dev front

Appliquer un masque SVG en CSS avec mask-image

Cet article explique comment utiliser la propriété 'mask-image' en CSS pour appliquer des formes SVG colorées autour d'un titre. Il détaille la technique, fournit le code LESS pour styliser le titre avec des icônes SVG masquées, et discute de la compatibilité entre navigateurs. Des améliorations et variantes sont également suggérées.

www.gerits-aurelien.be

svg
"
Autre

GIMP 3.0 RC1 est sorti - LinuxFr.org

L'annonce de la sortie de GIMP 3.0 RC1 souligne les nombreux changements et améliorations apportés, notamment une interface utilisateur adaptative avec des icônes vectorielles, une gestion des couleurs améliorée, et un nouveau design d'écran de démarrage. Cette version candidate permet à la communauté de tester le logiciel avant sa sortie finale, avec un appel à remonter les bugs détectés. Les contributions de différents artistes et développeurs sont mises avant, soulignant le travail collaboratif autour de GIMP.

linuxfr.org

svg
Dev front

Animer un bouton burger simple avec SVG et CSS

Cet article explique comment animer un bouton burger en utilisant SVG et CSS. Il détaille les étapes de création de l'icône en SVG et l'ajout de styles CSS pour réaliser des animations fluides. Le processus inclut également des considérations pour l'accessibilité et la gestion des événements via JavaScript, permettant au bouton de fonctionner comme un élément interactif. Les transitions sont expliquées en profondeur avec des instructions claires pour obtenir un résultat visuel harmonieux et efficace.

www.alsacreations.com

svg
Dev front

Optimiser le poids des images SVG

Cet article discute de l'importance d'optimiser le poids des images SVG sur le web, en expliquant les différentes techniques d'optimisation, y compris l'utilisation d'outils comme SVGO et SVGOMG. Il aborde également l'exportation d'images SVG depuis des outils de design comme Figma et souligne l'impact de la performance sur l'expérience utilisateur.

www.alsacreations.com

svg