![cosmic red cover image](https://camo.githubusercontent.com/92de177bf5347ef0ef24c45de59b5534f2e71651fdd0993b897ed8d1645ef3b7/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/54e49017a92cb61c6b70976de5fde1d87567dd734b73b426c8392205bf98d445/68747470733a2f2f6173736574732e636f646570656e2e696f2f323538352f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313538303333303632332677696474683d3530) |
CSS , Animation |
Amelia Bellamy-Royds |
![Amelia Bellamy avatar](https://camo.githubusercontent.com/0b6c9d9330e989e0e2d9210c0fb293f03eed4d8593f3cda3d1f9c7d1c169a724/68747470733a2f2f6173736574732e636f646570656e2e696f2f39313532352f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d332677696474683d3530) |
SVG , CSS , Animation |
Ana Tudor |
![Ana Tudor avatar](https://camo.githubusercontent.com/8c99a6eb43fa5867011e088d4487a7b91850dd916419c5ed623aa6ad75d2f0d0/68747470733a2f2f6173736574732e636f646570656e2e696f2f323031372f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d342677696474683d3530) |
Animation , Canvas , Sass , Javascript |
Cami Williams |
![Cami Williams avatar](https://camo.githubusercontent.com/7776e2734eb8add49e888fb74aceff2bf64a267dc5411ecc07249515ccb83a14/68747470733a2f2f6173736574732e636f646570656e2e696f2f3635343939342f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d312677696474683d3530) |
CSS |
Cassie Evans |
![Cassie Evans avatar](https://camo.githubusercontent.com/d13418ce3e978c6f19557f3a809b2ddb9dd6863014e9aa8ae00fdc7dad08eaf8/68747470733a2f2f6173736574732e636f646570656e2e696f2f3735363838312f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313532343333313531372677696474683d3530) |
CSS , Animation , GSAP , SVG |
Cassidy Williams |
![Cassidy Williams avatar](https://camo.githubusercontent.com/fe8792900d3b54b7dc43b8ba5ea68d50484983a2d255028d879232727a6ed88e/68747470733a2f2f6173736574732e636f646570656e2e696f2f3234323735392f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313630323936343436362677696474683d3530) |
CSS , Animation |
Chris Coyier |
![Chris Coyier avatar](https://camo.githubusercontent.com/5a13ce1884f419f3a9fd268d18c771679a38a3da876e956fe08f4afdc7bc0acc/68747470733a2f2f6173736574732e636f646570656e2e696f2f332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d34382677696474683d3530) |
SVG , CSS , Animation , Javascript |
Chris Gannon |
![Chris Gannon avatar](https://camo.githubusercontent.com/28c3a491a0829375cee7c5609580cc37ebc5985faeb03295e7bea1fe635ffbb2/68747470733a2f2f6173736574732e636f646570656e2e696f2f33353938342f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313534393237333539352677696474683d3530) |
SVG , Animation , GSAP |
Christina Gorton |
![Christina Gorton avatar](https://camo.githubusercontent.com/bc2ef3858544fc8fd9319f63ae40b0126b352ada40cafbe3a471e52cf9baa216/68747470733a2f2f6173736574732e636f646570656e2e696f2f3738303539332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313632383335353335342677696474683d3530) |
SVG , Animation , GSAP , CSS |
Eva Santos |
![Eva Santos avatar](https://camo.githubusercontent.com/60f192a8ca1e479e574d3077dbb560244ef52995a11bbc832d3006495e2e9ec5/68747470733a2f2f6173736574732e636f646570656e2e696f2f3235383534322f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d31342677696474683d3530) |
Animation , CSS , SVG , Javascript |
Joan León |
![Joan León avatar](https://camo.githubusercontent.com/3b34790cc302d44a6450fa48b8d212785f06bd1f7dcd7dc4abab0974df836af3/68747470733a2f2f6173736574732e636f646570656e2e696f2f31343338312f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313537343837353738302677696474683d3530) |
Animation , CSS , SVG , Javascript |
Julia Muzafarova |
![Julia Muzafarova avatar](https://camo.githubusercontent.com/6107c8160f0a94b697b4a10de15d6c505803a2f4fe726e36af9b89817d24cd73/68747470733a2f2f6173736574732e636f646570656e2e696f2f313332393533362f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313535343237373132392677696474683d3530) |
Animation , CSS |
Lea Rosema |
![Lea Rosema avatar](https://camo.githubusercontent.com/b49764cc046314fd4471ab3ccc217ff8765c5d688ea1779e2d1f979033237959/68747470733a2f2f6173736574732e636f646570656e2e696f2f39303634372f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313539313437363935352677696474683d3530) |
WebGL , GLSL , SVG , Canvas , CSS |
Mandy Michael |
![Mandy Michael avatar](https://camo.githubusercontent.com/9db04aacef85242804600d4245ba3a788b037f94b14a684a81f7b7aa039e859e/68747470733a2f2f6173736574732e636f646570656e2e696f2f3230393938312f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d312677696474683d3530) |
CSS , Effects , Animation |
Noel Delgado |
![Noel Delgado avatar](https://camo.githubusercontent.com/6d6f6f067661fda28cc00e49d71b7d8bb24d3de119b9f3877cd0b94f2e6a94b0/68747470733a2f2f6173736574732e636f646570656e2e696f2f393437332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d332677696474683d3530) |
Animation , Canvas , CSS , SVG |
Rachel Bull |
![Rachel Bull avatar](https://camo.githubusercontent.com/7224c2a2b89cb9c1c35f75d5557bc08c38746311b7a1f1ca8d094941ed04b211/68747470733a2f2f6173736574732e636f646570656e2e696f2f3332383537352f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d342677696474683d3530) |
CSS , Animation |
Rachel Nabors |
![Rachel Nabors avatar](https://camo.githubusercontent.com/d316bc919ff3c9e42ed462e5eaa103beaefb3a98267afc645946bae74d8cde34/68747470733a2f2f6173736574732e636f646570656e2e696f2f3634312f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313530333138323230392677696474683d3530) |
Animation , CSS , SVG , WAAPI |
Rachel Smith |
![Rachel Smith avatar](https://camo.githubusercontent.com/e70df7bc7b44e062dee44eb944dca0932f1a9b792b2babf670536db8c8dd1609/68747470733a2f2f6173736574732e636f646570656e2e696f2f35333134382f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313534333436353739312677696474683d3530) |
Animation , Canvas , SVG , Particles , WebGL |
Sasha Tran |
![Sasha Tran avatar](https://camo.githubusercontent.com/b6155079d4559770a933aef9c2c4aa48eeeb5ef99d199920f19f1b56645c3139/68747470733a2f2f6173736574732e636f646570656e2e696f2f3834353930382f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313534363832353930302677696474683d3530) |
CSS , SVG , Animation |
Sara Soueidan |
![Sara Soueidan avatar](https://camo.githubusercontent.com/e00c2284757feabef716ebd3011a1d40107dd984574a629bdba14f8c723b21fa/68747470733a2f2f6173736574732e636f646570656e2e696f2f393637342f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313535303438323030342677696474683d3530) |
SVG , CSS , Animation |
Sarah Drasner |
![Sarah Drasner avatar](https://camo.githubusercontent.com/7d18017e21fc46828ab25df1aed499605d01a8e6a3cebc86c2f67d01b20b5524/68747470733a2f2f6173736574732e636f646570656e2e696f2f32383936332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d342677696474683d3530) |
Animation , SVG , Javascript , GreenSock , GSAP , Canvas |
Sarah Fossheim |
![Sarah Fossheim avatar](https://camo.githubusercontent.com/6419daf7264f77286b6a9422d403e0e1740e02c3946cd9849fea5e2aa92db154/68747470733a2f2f6173736574732e636f646570656e2e696f2f333434353138332f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313537333539373436382677696474683d3530) |
CSS , Animation |
Val Head |
![Val Head avatar](https://camo.githubusercontent.com/c4b3e596aa0d1afbd851dfc368161f66e345282b6e954bad60ce8578fb55e8f6/68747470733a2f2f6173736574732e636f646570656e2e696f2f31333033342f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d312677696474683d3530) |
Animation , CSS , SVG , P5.js , GreenSock |
Yuán Chuān |
![Yuán Chuān avatar](https://camo.githubusercontent.com/70b6fe6391300a7e32ac3453dfbb4240e208b3e90b13c98d8d83627b731461ec/68747470733a2f2f6173736574732e636f646570656e2e696f2f35323938322f696e7465726e616c2f617661746172732f75736572732f64656661756c742e706e673f6669743d63726f7026666f726d61743d6175746f266865696768743d35302676657273696f6e3d313632363237333936342677696474683d3530) |
SVG , CSS , Animation , GreenSock , Javascript |
Carmen Ansio | @carmenansio