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
