CSS & HTML
How to Add Icons to Any Element With CSS
Add an icon to any element without touching its HTML. Use a CSS mask on a pseudo-element with currentColor, plus accessible icon-only…
Tag: svg
UI Components
Build an Interactive SVG World Map with CSS and JavaScript
Create an interactive world map with inline SVG, CSS color-mix() and about 40 lines of vanilla JavaScript: tooltips, keyboard support and data…
UI Components
CSS Social Buttons: Accessible Share and Follow Buttons
Build one reusable social button component with inline SVG icons, custom properties and color-mix(), then add copy-link and native share behaviour with…
CSS & HTML
Working with SVG: Inline Icons, Animation and Clipping
A practical guide to SVG for designers: choosing inline vs img, currentColor icons, CSS stroke animation, clip paths, accessibility and clean exports.
CSS & HTML
Creating Reusable Background Patterns with CSS
Make dots, stripes, grids and SVG patterns from a few lines of CSS, then recolor them with custom properties and dark mode.…
Design
Logo Design Process: From Brief to Brand System
Follow a logo from creative brief and paper sketches to a mirrored SVG monogram, colour and size testing, and a deliverable brand…
CSS & HTML
Chroma Wallpapers: Make Glowing Gradient Wallpapers with CSS and SVG
Recreate the classic Chroma wallpaper look with modern CSS and SVG: mesh-style OKLCH gradients, glowing line ribbons, subtle animation and 4K export.
Design
Vector Polishing Techniques: Add Depth, Light and Grain
Five steps that turn flat vector art into rich, atmospheric illustration: coloured light, depth, highlights, particles and grain, in Illustrator, Photoshop and…
Design
Vector Illustration Styles and Where to Use Them
Four vector illustration styles designers mix today, real sites and free libraries that show them, and a hand-written SVG grain gradient you…
Design
How to Design Mini Icons in SVG
Draw 16px icons on a pixel grid, align strokes so they stay sharp, optimise the SVG and ship a currentColor sprite you…