halftone dotted background CSS

CSS Dotted Background

This tutorial breaks down how to create a CSS dotted pattern using SVG to achieve a halftone dotted CSS background. Halftoning is a reprographic technique that simulates continuous-tone imagery through the use of a dotted grid background, varying in size or spacing to generate a gradient-like effect. We’ll create this dot background CSS effect by...

Animate SVG

Animate SVG with CSS & JS

In this short tutorial I will be showing you how to animate SVG with CSS and JS. This is a great exercise if you want to learn how CSS animations work and how to animate SVG files. We’ll animate SVG with JavaScript by directly modifying element attributes or styles (e.g., element.style.transform or setAttribute()) for dynamic,...

Scroll to top