Noisy Strokes Texture with Three.js and GLSL

Learn how to code up the noisy strokes effect seen on the website of Leonard using Three.js and GLSL.

By Yuri Artiukh in Videos on

In this ALL YOUR HTML coding session you’ll learn how to recreate the amazing noisy strokes texture seen on the website of Leonard, the inventive agency, using Three.js with GLSL. The wonderful effect was originally made by Damien Mortini.

This coding session was streamed live on May 9, 2021.

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

Yuri Artiukh

Yuriy is a developer from Kyiv, Ukraine. Leading a small frontend agency riverco.de, also speaking at conferences, and open for freelance projects. Curious about CSS and shaders. Loves to learn every day.

glsl noise three-js video webgl

shining particles mask by dominik fojcik

Crafting a Dreamy Particle Effect with Three.js and GPGPU

Animating Multi-Page Navigations with Browser View Transitions and Astro

Adding a Persistence Effect to Three.js Scenes

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.