Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Drawing with <input type="range"> 🖌️

hakimel's profile picture

Hakim El Hattab

38,680 subscribers

279,066 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

8 Yorum

Hakim El Hattab profil fotoğrafı
Hakim El Hattab2 yıl önce

If anyone wants to fork this the code is at

Ahmad Alfy profil fotoğrafı
Ahmad Alfy2 yıl önce

Add some CSS and you got yourself a whiteboard

Hakim El Hattab profil fotoğrafı
Hakim El Hattab2 yıl önce

Pretty sure we’ve arrived at the most inefficient way you could possibly render a whiteboard 👏

Ansari profil fotoğrafı
Ansari2 yıl önce

This is kinda satisfying 😂 Good work @hakimel

Nasim Uddin profil fotoğrafı
Nasim Uddin2 yıl önce

LOL! Human, when they don't have anything good to do!

Jim Meyer profil fotoğrafı
Jim Meyer2 yıl önce

Web zealots: Please, please, use the platform! Hakim: Yes 😁

Nikita Agafonov profil fotoğrafı
Nikita Agafonov2 yıl önce

Hakim doing Hakim's thing! 😅

m.Bilal 👨‍💻 profil fotoğrafı
m.Bilal 👨‍💻2 yıl önce

This is oddly satisfying..

Benzer Videolar

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙
0:20

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙

jhey ʕ•ᴥ•ʔ

95,479 görüntüleme • 7 ay önce

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳
0:27

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳

jhey ʕ•ᴥ•ʔ

109,997 görüntüleme • 8 ay önce

Watch out! Chrome has a huge bug with <input type="number"> which causes values to change unexpectedly. It's fixed in Chrome 150, but that won't land until the end of June.
1:20

Watch out! Chrome has a huge bug with <input type="number"> which causes values to change unexpectedly. It's fixed in Chrome 150, but that won't land until the end of June.

Jake Archibald

301,732 görüntüleme • 21 gün önce

I love drawing~~~~! >w< 🩷🩷🩷 I stream drawing every day!
0:20

I love drawing~~~~! >w< 🩷🩷🩷 I stream drawing every day!

Comifur

40,001 görüntüleme • 4 ay önce

Apparently some React devs don't know that <input type="date"> exists and think you need a library for that? So I made a really quick demo...
0:33

Apparently some React devs don't know that <input type="date"> exists and think you need a library for that? So I made a really quick demo...

Fran Zekan

189,036 görüntüleme • 2 yıl önce

Creative digital drawing process 🎨🖌️
0:20

Creative digital drawing process 🎨🖌️

Sr Freak©

28,705 görüntüleme • 1 ay önce

No time for mid drawing bathroom break (>ω<)
0:36

No time for mid drawing bathroom break (>ω<)

Baby Blu🔜FWA, MP, BFC

22,860 görüntüleme • 2 yıl önce

Creative ink drawing in action 🎨🖌️ by
0:29

Creative ink drawing in action 🎨🖌️ by

MMDRAWS

967,178 görüntüleme • 1 ay önce

Drawing tablet breakdown 🖌️ Vtuber: kithera Artist: KITHERA
0:54

Drawing tablet breakdown 🖌️ Vtuber: kithera Artist: KITHERA

Kuroama 🔥 Cozy Forge

68,341 görüntüleme • 1 yıl önce

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.
0:38

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.

Aurora Scharff

66,986 görüntüleme • 3 ay önce

🖌️Drawing caricatures of random people on the street!!
4:11

🖌️Drawing caricatures of random people on the street!!

SrDesignMan

356,296 görüntüleme • 2 ay önce

trackpad control 👨‍🍳 many ui designs and interactions are "just" an abstraction over primitive web controls trackpad 👉 2x input[type=range] in disguise 👇
0:31

trackpad control 👨‍🍳 many ui designs and interactions are "just" an abstraction over primitive web controls trackpad 👉 2x input[type=range] in disguise 👇

jhey ʕ•ᴥ•ʔ

48,503 görüntüleme • 7 ay önce

Creative ink drawing vibes 🖋️🖌️ by ryangajda
1:09

Creative ink drawing vibes 🖋️🖌️ by ryangajda

MMDRAWS

24,534 görüntüleme • 24 gün önce

The drawing process 🖌️ #Arknights #アークナイツ #明日方舟
1:00

The drawing process 🖌️ #Arknights #アークナイツ #明日方舟

Ohkurrva

13,905 görüntüleme • 5 ay önce

✨ Okay finally finished it, took a bit [ 🎨 Paint wall ] on Interior AI lets you paint any wall in your interior designs to see how it'd look It's an <input type="color"> and a <canvas> where you paint a mask and then it paints it into a photorealistic render!
0:36

✨ Okay finally finished it, took a bit [ 🎨 Paint wall ] on Interior AI lets you paint any wall in your interior designs to see how it'd look It's an <input type="color"> and a <canvas> where you paint a mask and then it paints it into a photorealistic render!

@levelsio

192,264 görüntüleme • 8 ay önce

vibe coding ---> vibe drawing ✍️ co-drawing with gemini is incredible 🤯
0:24

vibe coding ---> vibe drawing ✍️ co-drawing with gemini is incredible 🤯

Linoy Tsaban

10,387 görüntüleme • 1 yıl önce

>>>>>>>>>VINHONCÉ<<<<<<<<< 2000s 2020s
0:22

>>>>>>>>>VINHONCÉ<<<<<<<<< 2000s 2020s

🐝

46,884 görüntüleme • 1 yıl önce

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙
0:39

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

jhey ʕ•ᴥ•ʔ

222,102 görüntüleme • 1 yıl önce

Popover nav bar without JavaScript 🤙 <nav><ul><li><button popovertarget=menu>... <div popover=auto id=menu> ...content </div> Tweak timings with CSS linear() 🎬 Transitions with @​starting-style Anchor positioning to position and size things 🤏
0:44

Popover nav bar without JavaScript 🤙 <nav><ul><li><button popovertarget=menu>... <div popover=auto id=menu> ...content </div> Tweak timings with CSS linear() 🎬 Transitions with @​starting-style Anchor positioning to position and size things 🤏

jhey ▲🐻🎈

124,577 görüntüleme • 1 yıl önce