Olubisi Idris Ayindeidrisolubisi.hashnode.net·Apr 21, 2021FeaturedHow to Build a Clock with JavaScript and SVGJavaScript is a programming language that lets you create complex web page features. On the other hand, Scalable Vector Graphics (SVG) is a two-dimensional vector image format based on the Extensible Markup Language (XML). It supports interactivity a...Sandeep Panda Test and 3 others are discussing this4 people are discussing thisDiscuss·96 likes·1.0K readsTutorialsJavaScriptThank you 😊 3
Rishabh Rathodrishabhrathod.hashnode.net·Dec 12, 2020Implementing MIUI's Wave Animation 🌊 Using React Native Reanimated v2After the MIUI 12 upgrade, I just loved playing the new smooth animations 😍 and as a developer, was excited to know how to implement it 🤔. The first thing I did was google "Wave Animation Can it be done in react-native? " 😬 and got a close resul...Maximilian Kaske and 1 other are discussing this2 people are discussing thisDiscuss·63 likes·2.3K readsReact Native
Noël Cserépynoelcserepy.hashnode.net·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 s...Devkant Swargiary and 1 other are discussing this2 people are discussing thisDiscuss·48 likes·6.2K readsframer-motion
NANCY YADAVforVelocity IIIT Dharwadvelocity-1679156379018.hashnode.net·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·1 like·52 readsFrontend Development
Mustapha Rufai howtobuildx.hashnode.net·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·126 readsHTML5
Emamuzo Omokitiemaomokiti.hashnode.net·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·39 readsanimation
Vihanga nivarthanavihanga.hashnode.net·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·3 likes·95 readsSVG
Victoria Adedayovictoriaadedayo.hashnode.net·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·246 readsCSS
Noël Cserépynoelcserepy.hashnode.net·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 s...Devkant Swargiary and 1 other are discussing this2 people are discussing thisDiscuss·48 likes·6.2K readsframer-motion
David Pengdavipon.hashnode.net·Jun 3, 2022Build a Svelte Component To Draw SVG On HoverIn this post, I'll share my journey of building a reusable Svelte component to draw SVG on hover. Begin by trying to reduce boilerplate in my work project and publishing my first npm package. It's great if you've already known below things: Svelte T...Discuss·430 readsSvelteSvelte
Rob Sutclifferobsutcliffe.hashnode.net·May 4, 2022Create An Animated SVG Icon With Motion.JSIn this tutorial, we'll create a simple checkbox that transforms from a circle to a tick. As we create this we'll learn a little bit about motion.js and a little about SVGs too. You will need basic knowledge of React to follow along Check out the f...Discuss·203 readsSVG Animation
Samaila BalaforOpen Replay's Technical Blogopenreplay.hashnode.net·Apr 28, 2022Working with SVGs in React NativeScalable Vector Graphic (SVG) is an image format that uses vector graphics to display the image you see. They are now popular among developers because they scale to any resolution other advantages of SVGs include: Easily Editable: SVG files can be c...Discuss·158 readsReact Native
Ahmed Essamahmedessam-1645712019741.hashnode.net·Feb 28, 2022SVG AnimationsSVG animations are one of the most powerful things in animations. But before kicking into the way to do it, let's pass by some CSS properties that we are going to use. stroke-dasharray creates dashes between the figure and the higher the number is th...Discuss·40 readsCSS Animation
