![cosmic red cover image](https://camo.githubusercontent.com/d807392f1db3e25e8792dbb1dbf46f2ea720d5f687ffa31baf968edcb48a4c63/68747470733a2f2f6173736574732e636f646570656e2e696f2f3532373531322f7477697463685f636f7665722e6a70673f77696474683d31303030266865696768743d32303026666f726d61743d6175746f266669743d636f766572)
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 |
![Adam Argyle avatar](https://camo.githubusercontent.com/f0afbb4cba735561e7956b5b6c7254134675256b5c119ee171665c487cbadc68/68747470733a2f2f6173736574732e636f646570656e2e696f2f323538352f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313538303333303632332677696474683d3530) |
CSS , Animation |
Amelia Bellamy-Royds |
![Amelia Bellamy avatar](https://camo.githubusercontent.com/ce558db55580966fbebe369c602059b907f80a0b0a628369185bed135034ca7a/68747470733a2f2f6173736574732e636f646570656e2e696f2f39313532352f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d332677696474683d3530) |
SVG , CSS , Animation |
Ana Tudor |
![Ana Tudor avatar](https://camo.githubusercontent.com/33a4b1ed662bcc9d3b31bc96f46cef9b1a2f78f49a31e6c380fe8101cc1dfd82/68747470733a2f2f6173736574732e636f646570656e2e696f2f323031372f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d342677696474683d3530) |
Animation , Canvas , Sass , Javascript |
Cami Williams |
![Cami Williams avatar](https://camo.githubusercontent.com/fa017366a2601e0c1411032ab9f6532a73f0be9ce34acc7c52343629d5a6842d/68747470733a2f2f6173736574732e636f646570656e2e696f2f3635343939342f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d312677696474683d3530) |
CSS |
Cassie Evans |
![Cassie Evans avatar](https://camo.githubusercontent.com/56fbe4f9957e9c36f8b160240e401bc542db131c43311d45a1659b17da3ef604/68747470733a2f2f6173736574732e636f646570656e2e696f2f3735363838312f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313532343333313531372677696474683d3530) |
CSS , Animation , GSAP , SVG |
Cassidy Williams |
![Cassidy Williams avatar](https://camo.githubusercontent.com/dda052f867ccfea3f35acc3866ad2d824df7834b826913d6132589d6656eff05/68747470733a2f2f6173736574732e636f646570656e2e696f2f3234323735392f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313630323936343436362677696474683d3530) |
CSS , Animation |
Chris Coyier |
![Chris Coyier avatar](https://camo.githubusercontent.com/70fc72be9648fd76b450808b5828d08d818432be23feef8f9106db9948a3b769/68747470733a2f2f6173736574732e636f646570656e2e696f2f332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d34382677696474683d3530) |
SVG , CSS , Animation , Javascript |
Chris Gannon |
![Chris Gannon avatar](https://camo.githubusercontent.com/838ba585ddaf7d4e20a0c8b767c6afaf8cec987340114647b050d5cde8ef536a/68747470733a2f2f6173736574732e636f646570656e2e696f2f33353938342f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313534393237333539352677696474683d3530) |
SVG , Animation , GSAP |
Christina Gorton |
![Christina Gorton avatar](https://camo.githubusercontent.com/8ddbb09809680dd2f02bd42dcebefc19883d8904f050149cf5cca21ad202a205/68747470733a2f2f6173736574732e636f646570656e2e696f2f3738303539332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313632383335353335342677696474683d3530) |
SVG , Animation , GSAP , CSS |
Eva Santos |
![Eva Santos avatar](https://camo.githubusercontent.com/b8ba1e522f477817857db9741c36d6d0b1157da5af538907d3ec3924ff48a908/68747470733a2f2f6173736574732e636f646570656e2e696f2f3235383534322f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d31342677696474683d3530) |
Animation , CSS , SVG , Javascript |
Joan León |
![Joan León avatar](https://camo.githubusercontent.com/fb7e6c18eecdc69a4e01905c30847a267af8838982c6389e3ffb02b3912ddd88/68747470733a2f2f6173736574732e636f646570656e2e696f2f31343338312f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313537343837353738302677696474683d3530) |
Animation , CSS , SVG , Javascript |
Julia Muzafarova |
![Julia Muzafarova avatar](https://camo.githubusercontent.com/535c124c6be310a735098e16ad51e77dba6f518d9d42fc78c2ce588ac36a1e1c/68747470733a2f2f6173736574732e636f646570656e2e696f2f313332393533362f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313535343237373132392677696474683d3530) |
Animation , CSS |
Lea Rosema |
![Lea Rosema avatar](https://camo.githubusercontent.com/d8cc888b0bccca7140b2e466da45bb4899202664223c7a877f3273b0186f675c/68747470733a2f2f6173736574732e636f646570656e2e696f2f39303634372f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313539313437363935352677696474683d3530) |
WebGL , GLSL , SVG , Canvas , CSS |
Mandy Michael |
![Mandy Michael avatar](https://camo.githubusercontent.com/879a6c2867236aec6c2b14e2084e5c3c9be8837c5ee7a00fceaa30d27d9ef192/68747470733a2f2f6173736574732e636f646570656e2e696f2f3230393938312f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d312677696474683d3530) |
CSS , Effects , Animation |
Noel Delgado |
![Noel Delgado avatar](https://camo.githubusercontent.com/111dafddca41d936e13b173bb3bc3e89216bebd0f62a72994c1c1dd0b69fb5f2/68747470733a2f2f6173736574732e636f646570656e2e696f2f393437332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d332677696474683d3530) |
Animation , Canvas , CSS , SVG |
Rachel Bull |
![Rachel Bull avatar](https://camo.githubusercontent.com/2c018f05ec1d8a6cb07319f277b11219464abe38a00a406ea890404f78dad37c/68747470733a2f2f6173736574732e636f646570656e2e696f2f3332383537352f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d342677696474683d3530) |
CSS , Animation |
Rachel Nabors |
![Rachel Nabors avatar](https://camo.githubusercontent.com/b1cc39f5efe41a951845cb748b4d4ec48d13c9df58ab21f793e7e55a2a4848a8/68747470733a2f2f6173736574732e636f646570656e2e696f2f3634312f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313530333138323230392677696474683d3530) |
Animation , CSS , SVG , WAAPI |
Rachel Smith |
![Rachel Smith avatar](https://camo.githubusercontent.com/bbb0bbf0676d4c2db34dccc3a61594d19625149637b7b334c46ffcf779686425/68747470733a2f2f6173736574732e636f646570656e2e696f2f35333134382f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313534333436353739312677696474683d3530) |
Animation , Canvas , SVG , Particles , WebGL |
Sasha Tran |
![Sasha Tran avatar](https://camo.githubusercontent.com/cfb580a5acbfbd43eaf27b5bba98c414077ee1a64c63cbc0310a83e2b18712d0/68747470733a2f2f6173736574732e636f646570656e2e696f2f3834353930382f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313534363832353930302677696474683d3530) |
CSS , SVG , Animation |
Sara Soueidan |
![Sara Soueidan avatar](https://camo.githubusercontent.com/a2592b236e98028977ece9de54c8db1560389b092c0a2043b2511d833438e660/68747470733a2f2f6173736574732e636f646570656e2e696f2f393637342f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313535303438323030342677696474683d3530) |
SVG , CSS , Animation |
Sarah Drasner |
![Sarah Drasner avatar](https://camo.githubusercontent.com/570c82a36f826878d2bc97363b9c0f786378febfb98cd6343faa8aaa92adfb45/68747470733a2f2f6173736574732e636f646570656e2e696f2f32383936332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d342677696474683d3530) |
Animation , SVG , Javascript , GreenSock , GSAP , Canvas |
Sarah Fossheim |
![Sarah Fossheim avatar](https://camo.githubusercontent.com/2d288faa24ab52524a06f8f7d0758af1fe39542c5c808abcfc9ef65e49843f98/68747470733a2f2f6173736574732e636f646570656e2e696f2f333434353138332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313537333539373436382677696474683d3530) |
CSS , Animation |
Val Head |
![Val Head avatar](https://camo.githubusercontent.com/3e31972d53e06df26b1d52f2ee3f8dba67863eab166ca770b863be5626ce505c/68747470733a2f2f6173736574732e636f646570656e2e696f2f31333033342f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d312677696474683d3530) |
Animation , CSS , SVG , P5.js , GreenSock |
Yuán Chuān |
![Yuán Chuān avatar](https://camo.githubusercontent.com/e3973838622986be40b19100fa2ac2388f559d6b0171575e0fbe0bba5d0f2b48/68747470733a2f2f6173736574732e636f646570656e2e696f2f35323938322f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313632363237333936342677696474683d3530) |
SVG , CSS , Animation , GreenSock , Javascript |
Carmen Ansio | @carmenansio