Emre Duzgunterminal3.hashnode.dev·Aug 28, 2023SVG wonders: How to enhance UX with interactive drawersIn the ever-evolving landscape of web design, the integration of Scalable Vector Graphics (SVGs) has introduced a new realm of creative possibilities. In this blog, we will explore the combination of SVGs and interactive drawers in detail, offering a...Discuss·6 likesCSS
Shawshawneither.hashnode.dev·Jun 20, 2023Smooth Sun/Moon Animation with SVG MasksDark mode has thankfully become a fairly standard feature across the web over the past few years. While adding it to a recent webapp I was building, I wanted to create a slick little animated icon for the toggle button. It turned out to be fairly str...Discuss·48 readsSVG
Nicolas Bouvrettenbouvrette.hashnode.dev·Jun 18, 2023Dynamic SVG images using Next.jsSVG has emerged as a dominant image format, offering unparalleled flexibility and scalability for today’s web development landscape. From its humble beginnings to its widespread adoption, SVG has undergone significant evolution and now plays a pivota...Discuss·11 likes·60 readsSVG
Taofeek Ibrahim (CodingAlgorithm)codingalgorithm.hashnode.dev·Apr 29, 2023Build In Public: Day 002: SVG AnimationAs soon as I started working on the project right on the first screen (onboarding screen - the cover picture -) I hit on an implementation I have to take a tutorial for, SVG animation. I had worked with svg before, a couple of years ago, but since ...Discuss·56 readsReactnative
NANCY YADAVforVelocity IIIT Dharwadblog.velocityclub.live·Apr 8, 2023SVG for Web GraphicsScalable Vector Graphics, or SVG, is a markup language used for describing two-dimensional vector graphics. SVG images are made up of mathematical equations that can be scaled infinitely without losing quality. SVG is a versatile and popular format f...Discuss·2 likes·103 readsFrontend Development
Mustapha Rufai mrufai.com·Mar 4, 2023How To Make Interactive SVG Map With HTML & CSSIf you're looking to create an interactive map of a country, follow these steps: Obtain an SVG map of the country: You can download one from websites like Wikipedia. If you can't find the exact SVG you need, consider asking a designer friend or usin...Discuss·490 readsHTML5
Emamuzo Omokitiemaomokiti.hashnode.dev·Feb 16, 2023Learn How to Add Motion to Your React App with SVG AnimationThis tutorial will teach you how to animate an SVG (Scalable Vector Graphics) in your React Application. Prerequisites To follow along in this tutorial, you'll need the following. Know your way around Figma App. Good Knowledge of CSS Animation. Ba...Discuss·99 readsanimation
Vihanga nivarthanablog.vihanga.dev·Nov 2, 2022Make your applications more attractive using SVG animationsWhat is SVG? Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. [ from Wikipedia ] Every image created has two types. They are Ras...Discuss·4 likes·128 readsSVG
Victoria Adedayovictoriaadedayo.hashnode.dev·Sep 22, 2022SVG Animation (with tutorial examples)What is an SVG? 🤔 SVGs are scalable vector graphics. They are XML-based vector image formats, much like how HTML(Hyper Text Markup Language) works. It defines different elements for familiar geometric shapes that can be combined in XML(eXtensible Ma...Chidimma Nwanya and 1 other are discussing this2 people are discussing thisDiscuss·14 likes·292 readsCSS
Noël Cserépyblog.noelcserepy.com·Sep 20, 2022FeaturedHow to Animate SVG Paths with Framer MotionIf you're looking for some flair when fading in a logo or want to give loading animations some spice, SVG path animations are just the thing! Framer motion makes it easy for you to create great looking path animations for your React project. Let's se...Devkant Swargiary and 3 others are discussing this4 people are discussing thisDiscuss·53 likes·21.0K readsframer-motionGreat article. I used the same trick to build doodlerbook. I have a question. I have been trying to prototype a duolingo exercise. Would love to know how can I implement it with framer motion and react ? 8
