Best of SVG â 2023
- 1
- 2
- 3
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.
- 4
- 5
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.
- 6
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.
- 7
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.
- 8
- 9
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.
- 10
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.
- 11
- 12
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.
- 13
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.
- 14
- 15
- 16
- 17
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.
- 18
- 19
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.
- 20
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.
- 21
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.
- 22
- 23
- 24
Web Tools Weekly·3y
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.
