Bookmarks that I ❤️
| Blogs and Magazines |
Courses |
Design Tools |
Dev Tools |
Palette Colors |
CSS |
CSS Layout Generator |
Design Systems |
Free Games |
SVG Intro |
SVG Tools |
SVG Filters |
SVG Generators |
Icons |
Focus Time |
Codepen Collections |
People you should follow on codepen |
| Link |
Comments |
Tags |
| Smashing Magazine |
Cool articles for improving design and development skills |
Animation, SVG, Javascript, GreenSock, GSAP, Newsletter |
| CSS Tricks |
Keep up to date on webdev with articles and guides |
Animation, SVG, Javascript, GreenSock, GSAP, Newsletter |
| CSS In Real Life |
Tips, tricks and tutorials on the web’s most beautiful language |
CSS, Animation, Accessibility |
| Modern CSS |
Modern CSS Solutions for Old CSS Problems |
CSS, Animation, WebDev, SVG, Javascript |
| Frontend Horse |
Learn frontend development tricks from some of the web’s best creative developers |
CSS, Animation, WebDev, Articles, Newsletter |
| Hey Designer |
Daily curated design knowledge |
CSS, Animation, Design, SVG |
| Link |
Comments |
Tags |
| Visbug |
Open source browser design tools |
Design, Tool |
| Resources for designers |
The Best Curated Resources for designers |
Design, Tool |
| Link |
Comments |
Tags |
| Wappalyzer |
Find out the technology stack of any website |
Development, Tool |
| Chrome DevTools |
Record panel |
Development, Tool |
| Create Figma plugins |
How to develop Figma plugins |
Development, Tool |
| What devs need |
Tools Collection |
Development, Tool, Collection |
| DevDocs |
DevDocs combines multiple API documentations in a fast, organized, and searchable interface |
Development, Tool, Collection |
| Toolhunt |
Quality devtools that are changing the game |
Development, Tool, Collection |
| Link |
Comments |
Tags |
| Scale |
A generative way to create color scales |
Design, Tool, Color |
| cccolor |
cccolor a clean & simple color picker for web designers |
Design, Tool, Color |
| Link |
Comments |
Tags |
| Learn CSS |
Learn with web.dev |
CSS, Course |
| Layout Patterns |
Snippets in CSS |
CSS, Course |
| CSS Layout |
Popular layouts and patterns made with CSS |
CSS, Snippet |
| CSS background patterns |
A collection of 100+ free css patterns |
CSS, Patterns |
| CSS Animations |
CSS animations course |
CSS, Animations, Learn, Course |
| CSS Triggers |
CSS triggers |
CSS, Performance |
| CSS Gradient |
CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites |
CSS, Generator |
| CSS Keyframes |
Create basic or complex CSS @keyframe animations with a visual timeline editor similar to video-editing software |
CSS, Animations, Learn, Course |
| CSS Button Generator |
Create CSS Buttons with this tool |
CSS, Tool |
| Link |
Comments |
Tags |
| Storybook |
Design Systems for Devs |
Design Systems, Course |
| DS Engineering |
The complete guide about design systems: Engineering |
Design Systems, Article |
| Link |
Comments |
Tags |
| CSS Selectors |
Learn CSS Selectors |
CSS, Game, Learn |
| Cant Unsee |
Select the design that is most correct |
UI, Game, Learn |
| CSS Grid Garden |
Learn CSS Grid with this game where you write CSS code to grow your carrot garden |
UI, Game, Learn, Layout |
| Flexbox Froggy |
Learn Flexbox with this game where you help Froggy and friends by writing CSS code |
UI, Game, Learn, Layout |
| Link |
Comments |
Tags |
| Alligator |
Where to get started with SVG and our curated list of resources |
Animation, SVG, CSS, Learn |
| CSS Tricks |
Everything You Need To Know About SVG |
Animation, SVG, CSS, Learn |
| I hate tomatoes |
A list of useful SVG resources, that helped me while learning how to create, export, optimize, embed and animate SVGs |
Animation, SVG, CSS, Learn |
| MDN |
This tutorial aims to explain the internals of SVG and is packed with technical details |
Animation, SVG, CSS, Learn |
| Dev Docs |
Getting Started with SVG |
Animation, SVG, Learn |
| SVG on the web |
SVG on the Web a Practical Guide |
Animation, SVG, CSS, Learn |
| Cubic Bezier |
A better tool for cubic-bezier() easing |
Animation, SVG, CSS, Tool |
| Link |
Comments |
Tags |
| SVG Artista |
Super handy SVG drawing tool |
Animation, SVG, Javascript |
| Animista |
Animista is a place where you can play with a collection of pre-madre CSS animations |
Animation, SVG, Javascript |
| SVG path visualizer |
Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands |
Animation, SVG |
| Essential SVG tools |
Article with SVG tools explained |
Animation, SVG |
| Image to SVG |
A PWA to convert raster images to SVG vector graphics |
SVG |
| SVG to React |
SVGR let you transform SVG into React components everywhere |
SVG |
| Warp SVG |
A simple online tool that allows you to warp, bend, and distort SVG files |
SVG |
| SVG editor |
Online SVG editor |
SVG, Tool |
| Link |
Comments |
Tags |
| SVG filters |
Learn how you can use the powerful SVG filter primitive |
SVG, CSS, Effects |
| SVG Animated text fills |
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG |
SVG, CSS, Effects, Animation |
| SVG Animated text fills Demos |
SVG text with animated dashed stroke pattern |
SVG, CSS, Effects, Animation |
| Link |
Comments |
Tags |
| bbburst |
SVG generator for confetti-like explosions of shapes |
Animation, SVG, Javascript |
| Pixel Art Generator |
Draw your pixel art |
Design, Tool |
| SVG Generator |
Generate unique SVG design assets for websites |
SVG, Tool |
| Hero Patterns |
A collection of repeatable SVG background patterns for you to use on your web projects |
SVG, Tool |
| SVG Waves |
Generate SVG Waves |
SVG, Tool |
| SVG Bg |
Generate SVG Bg |
SVG, Tool |
| SVG Backgrounds |
Generate SVG Backgrounds |
SVG, Tool |
| Link |
Comments |
Tags |
| SVG icons |
Which SVG technique performs best for way too many icons? |
SVG, icons |
| SVG sprites generator |
Drop SVG files to create the Sprite |
SVG, icons, sprite |
| Lordicons |
Lordicon is a beautifully designed and animated icon set with a powerful library and endless integration options |
SVG, icons |
| Iconoir |
Iconoir is one of the biggest open source libraries with currently 974 SVG Icons |
SVG, icons |
| Icon CSS |
Open-source CSS, SVG and Figma UI Icons available in SVG Sprite, styled-components, NPM & API |
SVG, icons, CSS |
| Heroicons |
eautiful hand-crafted SVG icons, by the makers of Tailwind CSS |
SVG, icons |
| Boxicons |
Simple vector icons carefully crafted for designers & developers |
SVG, icons |
| Link |
Comments |
Tags |
| Soundrop |
You can use this tool to build a sound mix that will help you become more productive, focused, or relaxed |
Music, Focus |
| Link |
Comments |
Tags |
| SVG inspiration |
Workshop: Advanced SVG Animations by Sarah Drasner |
SVG, Codepen |
| SVG animations |
My Favorite SVG Animations by Sarah Drasner |
SVG, Animation, Codepen |
| SVG resources |
SVG Resources by Sarah Drasner |
SVG, Animation, Codepen |
People you should follow on codepen
| Link |
Avatar |
Tags |
| Adam Argyle |
 |
CSS, Animation |
| Amelia Bellamy-Royds |
 |
SVG, CSS, Animation |
| Ana Tudor |
 |
Animation, Canvas, Sass, Javascript |
| Cami Williams |
 |
CSS |
| Cassie Evans |
 |
CSS, Animation, GSAP, SVG |
| Cassidy Williams |
 |
CSS, Animation |
| Chris Coyier |
 |
SVG, CSS, Animation, Javascript |
| Chris Gannon |
 |
SVG, Animation, GSAP |
| Christina Gorton |
 |
SVG, Animation, GSAP, CSS |
| Eva Santos |
 |
Animation, CSS, SVG, Javascript |
| Joan León |
 |
Animation, CSS, SVG, Javascript |
| Julia Muzafarova |
 |
Animation, CSS |
| Lea Rosema |
 |
WebGL, GLSL, SVG, Canvas, CSS |
| Mandy Michael |
 |
CSS, Effects, Animation |
| Noel Delgado |
 |
Animation, Canvas, CSS, SVG |
| Rachel Bull |
 |
CSS, Animation |
| Rachel Nabors |
 |
Animation, CSS, SVG, WAAPI |
| Rachel Smith |
 |
Animation, Canvas, SVG, Particles, WebGL |
| Sasha Tran |
 |
CSS, SVG, Animation |
| Sara Soueidan |
 |
SVG, CSS, Animation |
| Sarah Drasner |
 |
Animation, SVG, Javascript, GreenSock, GSAP, Canvas |
| Sarah Fossheim |
 |
CSS, Animation |
| Val Head |
 |
Animation, CSS, SVG, P5.js, GreenSock |
| Yuán Chuān |
 |
SVG, CSS, Animation, GreenSock, Javascript |
Carmen Ansio | @carmenansio
