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 |

Blogs and Magazines

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

---

Courses

Link	Comments	Tags
Coding for Designers	Demystifying Code and Learning JavaScript	Coding, Course

---

Design Tools

Link	Comments	Tags
Visbug	Open source browser design tools	Design, Tool
Resources for designers	The Best Curated Resources for designers	Design, Tool

---

Dev Tools

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

---

Palette Colors

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

---

CSS

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

---

CSS Layout Generator

Link	Comments	Tags
CSS Grid Generator	CSS Grid Generator	CSS, Course

---

Design Systems

Link	Comments	Tags
Storybook	Design Systems for Devs	Design Systems, Course
DS Engineering	The complete guide about design systems: Engineering	Design Systems, Article

---

Free Games

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

---

SVG Intro

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

---

SVG Tools

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

---

SVG Filters

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

---

SVG Generators

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

---

Icons

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

---

Focus Time

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

---

Codepen Collections

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