Best of SVG — 2024

  1. 1
    Video
    Avatar of communityCommunity Picks·2y

    4 UI Design Tools I Can't Live Without

    Discover four design resources that can help you create beautiful web applications. Learn about tools for creating SVGs, finding color palettes, and improving animations on your website.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    Building an adaptive favicon

    Learn how to build an adaptive favicon using SVG, which allows for scalability, small file size, and embedded styling for light and dark themes.

  3. 3
    Article
    Avatar of codropsCodrops·2y

    Scroll-based SVG Filter Animations on Text

    SVG filters offer powerful effects for web design. The author explores different scroll-triggered filter effects, inspired by the EDITORA website. Traditionally, SVG filters were applied to SVG text, but this experiment uses HTML headings. A demo is available for further exploration. The post encourages readers to experiment with SVG filters and provides additional resources for inspiration.

  4. 4
    Video
    Avatar of lundeveloperLun Dev Code·2y

    Multilayer Parallax Scroll Animation with HTML and GSAP

    The post provides a detailed guide on creating a multilayer parallax scroll animation using HTML, GSAP, and SVG. It emphasizes the benefits of using SVG for maintaining fixed positions of images across different screen sizes and guides viewers through the steps of setting up the animation, integrating GSAP for animations, and triggering animations based on scroll events.

  5. 5
    Article
    Avatar of devsquadDev Squad·2y

    Animate SVGs Without Code! 🚀 Meet SVGator – Your New Animation Toolkit 🖌️✨

    SVGator allows you to animate SVG designs without any coding through a drag-and-drop interface. You can create interactive animations triggered by clicks and scrolls, and export them in various formats like SVG, Lottie, GIF, or video. It's ideal for enhancing UI/UX on both web and mobile platforms.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    Animated masked SVG Path

    The post discusses using HTML and CSS preprocessors to streamline web development, particularly focusing on animating SVG paths with masks. It advises on linking resources securely via https, using preprocessors like Pug and Sass for enhanced HTML and CSS authoring, and provides practical tips for including external CSS and JavaScript in CodePen projects.

  7. 7
    Article
    Avatar of webtoolsweeklyWeb Tools Weekly·2y

    JavaScript Utilities, SVG, React Native

    Issue #588 highlights various JavaScript utilities for Node.js and the browser, including caching, regex timing, and file handling libraries. It also features tools for working with media like SVG and video, as well as React Native components for mobile development. Additionally, the post promotes products for handling design systems, ticket reselling, and AI music generation.

  8. 8
    Article
    Avatar of devtoDEV·2y

    The Ultimate Guide to Free SVG Generators

    Discover free SVG generators that can elevate your designs with minimal effort. Explore tools for creating neon sign effects, clay-style emojis, smooth blurry backgrounds, wave patterns, iconic SVG icons, organic shapes, custom SVG shapes, unique wave patterns, and complex pattern designs.

  9. 9
    Article
    Avatar of communityCommunity Picks·2y

    SVG Filter Maker

    A tool to dynamically build an SVG filter with a GUI called SVG Filter Maker. It simplifies the process of working with SVG filters.

  10. 10
    Article
    Avatar of frontendmastersFrontend Masters·2y

    Icônes

    Icônes is a site with tens of thousands of free-to-use icons. It provides an alternate UI to Iconify and offers various exporting options for the icons.

  11. 11
    Article
    Avatar of communityCommunity Picks·2y

    The Art of Data Visualization: Exploring D3.js

    Explore the power of D3.js, a JavaScript library for creating dynamic and interactive data visualizations. Learn about data binding, SVG manipulation, and data manipulation utilities provided by D3.js.

  12. 12
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    SVG Toggle Button Tutorial – How to Handle Dark Mode with CSS and JavaScript

    Learn how to handle dark mode in CSS and JavaScript and create a toggle button with SVG to override the default behavior. Code a sun and moon icon with SVG.

  13. 13
    Article
    Avatar of communityCommunity Picks·2y

    console.delight – Frontend Masters Boost

    Discover how you can use CSS, SVGs, and HTML in console messages to create unique effects. Find out the differences between console.log and console.info. Explore the capabilities and limitations of non-text elements in the console.

  14. 14
    Article
    Avatar of communityCommunity Picks·2y

    SVG.js v3.2

    SVG.js is a lightweight JavaScript library for manipulating and animating SVGs. It boasts no dependencies, a minimal size, high speed, and an easy-to-read syntax. It supports complex animations, has a modular structure for painless extension, and offers various plugins and a unified API.

  15. 15
    Article
    Avatar of lnLaravel News·2y

    A Zero-dependency SVG Chart Library for PHP

    The maantje/charts package by Jamie Schouten is a zero-dependency PHP library for generating SVG charts. It offers a simple and intuitive API for creating various chart types including line, bar, stacked, and mixed charts. The package is lightweight, customizable, and outputs pure SVG, which can be embedded in PDFs. Detailed installation instructions and source code are available on GitHub.

  16. 16
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to use the Fullscreen API in JavaScript

    Learn how to use the Fullscreen API in JavaScript to display a game or any HTML element in fullscreen mode. Discover how to enter fullscreen mode, style the fullscreen, display games with the canvas element in fullscreen, and how to exit fullscreen. Also, learn how to create a fullscreen toggle button with SVG.

  17. 17
    Video
    Avatar of t3dotggTheo - t3․gg·2y

    This tool annoyed me (so I built a free version)

    The author shares their frustration with existing tools for converting SVG to PNG. They introduce two free and open-source tools they've created to address this issue. Additionally, they give a demonstration of bolt.new, another tool sponsored by StackBlitz, and highlight the features and issues of various other conversion tools. The post encourages developers to build solutions for their unique problems and to contribute to open-source projects.

  18. 18
    Article
    Avatar of smashingSmashing Magazine·2y

    SVG Coding Examples: Useful Recipes For Writing Vectors By Hand — Smashing Magazine

    Learn practical tips for hand-coding SVGs, including creating simple shapes like rectangles, circles, and lines. Explore SVG coordinate systems, the <viewBox> attribute, and techniques for coding SVG with JavaScript. Enhance your SVGs with accessible attributes and group elements to manage transformations and repetitions efficiently.

  19. 19
    Article
    Avatar of smashingSmashing Magazine·2y

    Creating Custom Lottie Animations With SVGator — Smashing Magazine

    SVGator introduces comprehensive support for Lottie files, enhancing its versatility as a one-stop tool for vector animations. The platform now supports exporting in various video and image formats alongside Lottie, catering to a wide array of user needs. Users can test SVGator's functionalities for free, with the option to start projects from existing Lottie files or create new animations from scratch. It offers seamless integration with web and mobile applications, making it a valuable tool for developers and designers.

See all SVG archives