--- title: Best SVG posts of 2023 | daily.dev description: The most upvoted SVG posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/svg/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/svg/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best SVG posts of 2023 | daily.dev og:description: The most upvoted SVG posts of 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of SVG — 2023 1. 1 [](/posts/svg-tutorial-6zkocwjmr "SVG Tutorial") Article Hacker News · 3y SVG Tutorial Learn to code SVG images step by step. Topics include drawing basic shapes, using clip-path, and creating background patterns with SVG and CSS. 370 17 2. 2 [](/posts/adding-custom-html-and-css-to-github-readme-yb6cg9w26 "Adding custom HTML and CSS to GitHub README") Article Changelog · 4y Adding custom HTML and CSS to GitHub README Learn how to add custom HTML and CSS to your GitHub README using SVG. 114 29 3. 3 [](/posts/how-to-create-a-meteor-effect-with-react-and-tailwindcss-71pj6sfpu "How to Create a Meteor Effect with React and TailwindCSS") Article freeCodeCamp · 3y How to Create a Meteor Effect with React and TailwindCSS A Meteor is basically a UI element with a head and a tail that has a gradient. In the image, the background lines are what I call meteors. We are going to animate these lines to go from the left side of the card container to the right side, giving an illusion of a meteor shower. 103 14 4. 4 [](/posts/the-case-against-self-closing-tags-in-html-0s7fgyjyl "The case against self-closing tags in HTML") Article Jake Archibald · 3y The case against self-closing tags in HTML JakeArchibald.com: The case against self-closing tags in HTML. 86 10 5. 5 [](/posts/best-animation-libraries-for-react--ouommm60g "Best Animation Libraries For React🎉") Article Community Picks · 3y Best Animation Libraries For React🎉 React-spring is a spring-physics-based animation library that should cover most of your UI-related animation needs. Framer Motion is a production-ready motion library for React. Green Sock has over 5,500 GitHub stars and 54k weekly NPM downloads. 84 5 6. 6 [](/posts/animated-svg-logo-dujgsalel "Animated SVG Logo") Article Anthony Fu · 3y Animated SVG Logo The first time I saw such stroke animations in SVG is the Material Line Icons by Vjacheslav Trushkin. The animation is done by moving the dash on strokes, while my Logo is a vector outline with multiple control points. The only downside is that the stroke is evenly thick everywhere, making it looks less like a signature. 67 1 7. 7 [](/posts/coding-randomized-zelda-patterns-a9vrxmgvh "Coding Randomized Zelda Patterns") Article Community Picks · 3y Coding Randomized Zelda Patterns The pattern is even used on the official game website. I really enjoy creating procedurally generated artwork using JavaScript and SVGs. We’ll use JavaScript to reduce repetition in our code and allow us to randomize the placement of these shapes. We can reproduce these shapes using the SVG “ vector graphic” format. 62 2 8. 8 [](/posts/flowbite-icons---430-free-and-open-source-svg-icons-yzbrlbskw "Flowbite Icons - 430+ free and open-source SVG icons") Article Product Hunt · 3y Flowbite Icons - 430+ free and open-source SVG icons Flowbite Icons - 430+ free and open-source SVG icons with outline and solid styles built for Tailwind CSS with support for React (JSX) and Figma. This is the latest launch from Flowbite See Flowbite’s 5 previous launches. 62 3 9. 9 [](/posts/css-in-real-life--5fkfvcr9x "CSS { In Real Life }") Article CSS {IRL} · 3y CSS { In Real Life } Parcel is my go-to bundler. Utopia provides configurable set of CSS custom properties for fluid sizing and typography, with options to use a modular scale. Tiny PNG Build tools can be configured to compress images, but we can reduce energy use even more by not uploading large images in the first place. 47 3 10. 10 [](/posts/the-new-font-face-syntax-pw3exmomu "The new @font-face syntax") Article Community Picks · 3y The new @font-face syntax The new @font-face syntax has also been supported since Safari 17, Firefox 106 and Chrome 108\. The new syntax looks like this: What’s changed? Instead of using strings, we use keywords. There are certain technical capabilities of fonts that the file type alone doesn't tell us. 46 4 11. 11 [](/posts/making-svg-loading-spinners-an-interactive-guide-vnv0k68x5 "Making SVG Loading Spinners: An Interactive Guide") Article Community Picks · 3y Making SVG Loading Spinners: An Interactive Guide This article provides an interactive guide on making SVG loading spinners. It explains how to draw a circle, use stroke-dasharray to make the circle incomplete, and rotate the circle using CSS. 42 12. 12 [](/posts/on-scroll-svg-filter-effect-pauq9tupd "On-Scroll SVG Filter Effect") Article Codrops · 3y On-Scroll SVG Filter Effect The demo is to animate a mask shape that has a turbulence filter applied to it. Magically, this results in an apparent animation of the whole distortion around the image. We also use the Flip plugin to animate the split title to another place in the content while doing this. 36 4 13. 13 [](/posts/creating-svg-animations-using-tailwind-css-931he1pdt "Creating SVG Animations Using Tailwind CSS") Article Semaphore · 3y Creating SVG Animations Using Tailwind CSS SVGs are a vector-based graphics file format that allows graphics to be displayed at any size without losing quality. For the use of illustrations, icons, and logos on websites and applications, SVGs have proven to be an invaluable resource. For this tutorial, we will use a heart SvG icon from Hero icons. 35 2 14. 14 [](/posts/breaking-up-with-svg-in-js-in-2023-lymn0fbdn "Breaking Up with SVG-in-JS in 2023") Article Community Picks · 3y Breaking Up with SVG-in-JS in 2023 The most expensive form of sprite sheet: costs a minimum of 3x more than other techniques. This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused. SVGs in JS have a cost and SVGs do not belong into your JS bundle. 31 15. 15 [](/posts/how-to-make-a-clickable-svg-map-with-html-and-css-5aocnh3dv "How to Make a Clickable SVG Map With HTML and CSS") Article freeCodeCamp · 4y How to Make a Clickable SVG Map With HTML and CSS Learn how to make a clickable SVG map with HTML and CSS. Discover the benefits of SVG maps, add interactivity with CSS, and link areas of the map to external webpages. 29 1 16. 16 [](/posts/frontend-creative-coding-brrytdswi "Frontend & creative coding") Article Community Picks · 3y Frontend & creative coding An event that tracks those pesky gray bars 19\. Jun 2023 Simple colorful logging in Node.js is an easy way to add some color to your node scripts. Mar 2023 Draw SVG rope using JavaScript 23. 28 2 17. 17 [](/posts/changing-colors-in-an-svg-element-using-css-and-javascript-dglga074d "Changing Colors in an SVG Element Using CSS and JavaScript") Article Kirupa · 3y Changing Colors in an SVG Element Using CSS and JavaScript Learn how to change colors in an SVG element using CSS and JavaScript. Understand the different approaches and techniques for modifying the appearance of SVG elements. Discover the flexibility and advantages of using CSS and JavaScript to customize SVG images. 24 18. 18 [](/posts/iconbundler-65eoouzs4 "iconbundler") Article Community Picks · 3y iconbundler Use the Figma plugin to export icons directly from your design Export React, Vue and Svelte components directly from Figma. Click here to see how SVGs are getting optimized and converted and get optimized. 23 19. 19 [](/posts/gooey-cursor-effect-uvoibrrmq "Gooey Cursor Effect") Article Codrops · 3y Gooey Cursor Effect The other day I visited Lorenzo Dal Dasso’s fantastic website and had a lot of fun with the cool cursor effect. The idea is simple: create lots of boxes and when we hover with the cursor, show them. Also apply a nice SVG gooey filter to them. Changing the filter and blend mode creates lovely variations. 21 2 20. 20 [](/posts/how-to-create-a-slick-animation-from-stranger-things-yurrrjjnt "How to create a slick animation from Stranger Things") Article DEV · 3y How to create a slick animation from Stranger Things The title sequence is a 52 second sequence, so I will not recreate it entirely. It is a closeup of the scattered letters of the title slowly drawn together. The font used for the title is ITC Benguiat. The font was used on the cover of countless Stephen King novels. 20 1 21. 21 [](/posts/use-svg-sprite-icons-in-react-e7wloeek6 "Use svg sprite icons in React") Article Community Picks · 3y Use svg sprite icons in React The best way to use icons is ansvg spritesheet. This is one of the oldest tactics to optimize image loading. Instead of loading many small images, we load a single image and use code to display only the part we need. We will also build a React component that displays a specific icon by name with full type safe autocomplete. 18 22. 22 [](/posts/frontend-rewind-2023-day-11-abiucnjbi "Frontend Rewind 2023 – Day 11") Article Codrops · 3y Frontend Rewind 2023 – Day 11 The article discusses the history of Saturnalia, introduces Framer Training as a course for designing and building modern websites, and shares a tutorial on creating a rubber button with HTML, CSS, and SVG. 14 23. 23 [](/posts/how-to-use-svg-in-react-3ftpylkt4 "How to Use SVG in React") Article Telerik · 3y How to Use SVG in React Learn how to use SVG in a React application with different methods including inline usage, using SVG with the img tag, SVG as a reusable React component, and SVG sprites. 13 24. 24 [](/posts/css-tools-testing-svg-media-3wr2752vx "CSS Tools, Testing, SVG/Media") Article Web Tools Weekly · 4y CSS Tools, Testing, SVG/Media A Fine Start taps into this raw, unassuming power by transforming your new tab page into a minimal list of links. You can also view a gallery of existing mood-based options for Tailwind projects. A small set of CSS generators include text and box shadows, CSS glow, CSS text glow, and unique underlines. 13 1 [See all SVG archives](/tags/svg/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/svg/best-of/2023#page","url":"https://daily.dev/tags/svg/best-of/2023","name":"Best SVG Posts of 2023","description":"The most upvoted SVG posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/svg/best-of/2023#items","numberOfItems":24,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/svg-tutorial-6zkocwjmr","name":"SVG Tutorial"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/adding-custom-html-and-css-to-github-readme-yb6cg9w26","name":"Adding custom HTML and CSS to GitHub README"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/how-to-create-a-meteor-effect-with-react-and-tailwindcss-71pj6sfpu","name":"How to Create a Meteor Effect with React and TailwindCSS"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-case-against-self-closing-tags-in-html-0s7fgyjyl","name":"The case against self-closing tags in HTML"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/best-animation-libraries-for-react--ouommm60g","name":"Best Animation Libraries For React🎉"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/animated-svg-logo-dujgsalel","name":"Animated SVG Logo"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/coding-randomized-zelda-patterns-a9vrxmgvh","name":"Coding Randomized Zelda Patterns"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/flowbite-icons---430-free-and-open-source-svg-icons-yzbrlbskw","name":"Flowbite Icons - 430+ free and open-source SVG icons"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/css-in-real-life--5fkfvcr9x","name":"CSS { In Real Life }"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/the-new-font-face-syntax-pw3exmomu","name":"The new @font-face syntax"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/making-svg-loading-spinners-an-interactive-guide-vnv0k68x5","name":"Making SVG Loading Spinners: An Interactive Guide"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/on-scroll-svg-filter-effect-pauq9tupd","name":"On-Scroll SVG Filter Effect"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/creating-svg-animations-using-tailwind-css-931he1pdt","name":"Creating SVG Animations Using Tailwind CSS"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/breaking-up-with-svg-in-js-in-2023-lymn0fbdn","name":"Breaking Up with SVG-in-JS in 2023"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/how-to-make-a-clickable-svg-map-with-html-and-css-5aocnh3dv","name":"How to Make a Clickable SVG Map With HTML and CSS"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/frontend-creative-coding-brrytdswi","name":"Frontend & creative coding"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/changing-colors-in-an-svg-element-using-css-and-javascript-dglga074d","name":"Changing Colors in an SVG Element Using CSS and JavaScript"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/iconbundler-65eoouzs4","name":"iconbundler"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/gooey-cursor-effect-uvoibrrmq","name":"Gooey Cursor Effect"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/how-to-create-a-slick-animation-from-stranger-things-yurrrjjnt","name":"How to create a slick animation from Stranger Things"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/use-svg-sprite-icons-in-react-e7wloeek6","name":"Use svg sprite icons in React"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/frontend-rewind-2023-day-11-abiucnjbi","name":"Frontend Rewind 2023 – Day 11"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/how-to-use-svg-in-react-3ftpylkt4","name":"How to Use SVG in React"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/css-tools-testing-svg-media-3wr2752vx","name":"CSS Tools, Testing, SVG/Media"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"SVG","item":"https://daily.dev/tags/svg"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/svg/best-of"},{"@type":"ListItem","position":5,"name":"2023"}]}]} ```