Best of SVG — July 2023
- 1
- 2
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.
- 3
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.
- 4
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.
- 5
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.
