I tried designing and coding grainy textures for a week
438.6K views · 2023-04-24
UI Design
In this video, I'm exploring grainy textures in both design and code.
// Check the daily designs on CodePen:
Day 1: https://codepen.io/Juxtopposed/pen/ZEqOWxv
Day 2: https://codepen.io/Juxtopposed/pen/vYVXgrG
Day 3: https://codepen.io/Juxtopposed/pen/BaqLEQY
Day 4: https://codepen.io/Juxtopposed/pen/zYmoRKo
Day 5: https://codepen.io/Juxtopposed/pen/PoyWzEq
// Check my designs on Dribbble:
https://dribbble.com/juxtopposed/collections/6489830-Daily-Design-Code
// Tools mentioned in the video:
Noise generator: https://fffuel.co/nnnoise/
SVG to Base64: https://fffuel.co/eeencode/
// Custom Grainy Shape Path Code Ready for Copy/Paste:
https://codepen.io/Juxtopposed/pen/WNapjOL
// Dribbble designs featured in the video:
https://dribbble.com/shots/15379037-Free-Grainy-Gradients
https://dribbble.com/shots/13801552-Simple-Times
https://dribbble.com/shots/17243902-Chroma-Grainy-Gradient-Textures
Timestamps:
00:00 Intro
00:26 What are Grainy Textures
00:54 Designing Grainy Textures
02:23 Coding Grainy Textures
03:02 Creating Noise SVGs
04:21 Importing the Noise SVG into Code
04:55 Getting Creative with Grainy Textures
-----
// Let's connect:
Twitter: https://twitter.com/juxtopposed
CodePen: https://codepen.io/Juxtopposed
Dribbble: https://dribbble.com/juxtopposed
Github: https://github.com/juxtopposed
Thanks for watching!
#grainytexture #codepen #figma #tutorial #designandcode #weeklyadventures #textures
// Check the daily designs on CodePen:
Day 1: https://codepen.io/Juxtopposed/pen/ZEqOWxv
Day 2: https://codepen.io/Juxtopposed/pen/vYVXgrG
Day 3: https://codepen.io/Juxtopposed/pen/BaqLEQY
Day 4: https://codepen.io/Juxtopposed/pen/zYmoRKo
Day 5: https://codepen.io/Juxtopposed/pen/PoyWzEq
// Check my designs on Dribbble:
https://dribbble.com/juxtopposed/collections/6489830-Daily-Design-Code
// Tools mentioned in the video:
Noise generator: https://fffuel.co/nnnoise/
SVG to Base64: https://fffuel.co/eeencode/
// Custom Grainy Shape Path Code Ready for Copy/Paste:
https://codepen.io/Juxtopposed/pen/WNapjOL
// Dribbble designs featured in the video:
https://dribbble.com/shots/15379037-Free-Grainy-Gradients
https://dribbble.com/shots/13801552-Simple-Times
https://dribbble.com/shots/17243902-Chroma-Grainy-Gradient-Textures
Timestamps:
00:00 Intro
00:26 What are Grainy Textures
00:54 Designing Grainy Textures
02:23 Coding Grainy Textures
03:02 Creating Noise SVGs
04:21 Importing the Noise SVG into Code
04:55 Getting Creative with Grainy Textures
-----
// Let's connect:
Twitter: https://twitter.com/juxtopposed
CodePen: https://codepen.io/Juxtopposed
Dribbble: https://dribbble.com/juxtopposed
Github: https://github.com/juxtopposed
Thanks for watching!
#grainytexture #codepen #figma #tutorial #designandcode #weeklyadventures #textures