Collective #677
Publikováno: 2.9.2021
The Beauty of Bézier Curves * Why are hyperlinks blue? * Crafting Organic Patterns
The post Collective #677 appeared first on Codrops.

Inspirational Website of the Week: Infrared
Soft animations and a perfect color scheme make this website’s design glow. Our pick this week.

Master new skills
Do you love building things? Then this event is for you! Join the community for an enjoyable night of coding.

Access modern GPU features with WebGPU
Learn about WebGPU and how it enables high-performance 3D graphics and data-parallel computation on the web.

A Deep Dive Into The Wonderful World Of SVG Displacement Filtering
In this article, Dirk Weber explains the SVG `feDisplacementMap` filter primitive with a good number of examples to demonstrate the concept of animated displacement maps.

Why are hyperlinks blue?
Take a deep dive into the history of interfaces and link designs over the years and learn about the origin of the blue link we know today.

An Interactive Guide to CSS Keyframe Animations with @keyframes
In this tutorial you’ll learn how CSS keyframes work from the ground up, and see how you can use them to build high-quality animations. By Josh W Comeau.

Crafting Organic Patterns With Voronoi Tessellations
Learn to create beautiful, versatile, and organic generative patterns inspired by the natural world. By George Francis.

The Beauty of Bézier Curves
A wonderful video on how Bézier curves work. By Freya Holmér.

Buttons Generator
100+ buttons you can copy with just a click and paste into your project. By Marko Denic.

Building A Stepper Component
Ahmad Shadeed shows how to build a horizontal and vertical stepper component with CSS flexbox.

Basement grotesque
Basement grotesque is the first font by basement.studio and they did a wonderful website to present it!

couleur.io
A simple color tool to help you find good color palettes for your web projects. This tools spits out modern CSS you can use right away in your projects.

Exploring the CSS Paint API: Blob Animation
Temani Afif shows how to pull off a blob animation using CSS with the CSS Paint API.

Vector? Raster? Why Not Both!
Zach Leatherman ran into an interesting problem and shared what he learned from it.

Using PDFs with the Jamstack – Building a Document Viewer
Using Adobe PDF Services to build a document viewer for your Jamstack site

How to Use Promise.any()
Learn how to use the Promise.any() to get the first fulfilled promise from an array of promises.

Prettymaps
A small set of Python functions to draw pretty maps from OpenStreetMap data.

A primer on the OpenAI API – Part 1
The first part in a series on learning how to use the OpenAI API. By Chris Price.

Infinity Zoom / Log Spherical Mapping
Super cool demo: taking 3D space and folding it into a sphere, using WebGL/Fragment Shader.

Surface Sampling in Three.js
Learn how to use the MeshSurfaceSampler in Three.js to create some very interesting effects.
The post Collective #677 appeared first on Codrops.