Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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

Hakim El Hattab

38,733 subscribers

279,106 Aufrufe • vor 3 Jahren •via X (Twitter)

Kunst Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

8 Kommentare

Profilbild von Hakim El Hattab

Hakim El Hattabvor 3 Jahren

If anyone wants to fork this the code is at

Profilbild von Ahmad Alfy

Ahmad Alfyvor 3 Jahren

Add some CSS and you got yourself a whiteboard

Profilbild von Hakim El Hattab

Hakim El Hattabvor 3 Jahren

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

Profilbild von Ansari

Ansarivor 3 Jahren

This is kinda satisfying 😂 Good work @hakimel

Profilbild von Nasim Uddin

Nasim Uddinvor 3 Jahren

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

Profilbild von Jim Meyer

Jim Meyervor 3 Jahren

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

Profilbild von Nikita Agafonov

Nikita Agafonovvor 3 Jahren

Hakim doing Hakim's thing! 😅

Profilbild von m.Bilal 👨‍💻

m.Bilal 👨‍💻vor 3 Jahren

This is oddly satisfying..

Ähnliche Videos

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

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

jhey ʕ•ᴥ•ʔ

95,939 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

110,070 Aufrufe • vor 1 Jahr

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.

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

302,819 Aufrufe • vor 5 Monaten

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

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

Comifur

40,001 Aufrufe • vor 9 Monaten

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...

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,050 Aufrufe • vor 2 Jahren

Creative digital drawing process 🎨🖌️

Creative digital drawing process 🎨🖌️

Sr Freak©

28,705 Aufrufe • vor 6 Monaten

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

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

Baby Blu🔜MP

23,034 Aufrufe • vor 2 Jahren

Creative ink drawing in action 🎨🖌️ by

Creative ink drawing in action 🎨🖌️ by

MMDRAWS

967,787 Aufrufe • vor 6 Monaten

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.

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

67,535 Aufrufe • vor 7 Monaten

드디어 공개된 북촌 최고의 스캔들 <스캔들> 절찬 스트리밍 중. 오직 넷플릭스에서🖌️

Sensitive content

드디어 공개된 북촌 최고의 스캔들 <스캔들> 절찬 스트리밍 중. 오직 넷플릭스에서🖌️

Netflix Korea｜넷플릭스 코리아

195,796 Aufrufe • vor 1 Monat

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

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

SrDesignMan

359,978 Aufrufe • vor 7 Monaten

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

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 Aufrufe • vor 1 Jahr

Creative ink drawing vibes 🖋️🖌️ by ryangajda

Creative ink drawing vibes 🖋️🖌️ by ryangajda

MMDRAWS

24,578 Aufrufe • vor 5 Monaten

💡 Universal syntax highlighter. In a <textarea> In 2026 (Chrome 152+), you can syntax-highlight different programming languages within the same <textarea> and get decent results Using the 🆕 OpaqueRange web API Works for <textarea>, even <input> Demo:

💡 Universal syntax highlighter. In a <textarea> In 2026 (Chrome 152+), you can syntax-highlight different programming languages within the same <textarea> and get decent results Using the 🆕 OpaqueRange web API Works for <textarea>, even <input> Demo:

Seb ⚛️ ThisWeekInReact.com

68,394 Aufrufe • vor 1 Monat

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

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

Ohkurrva

13,905 Aufrufe • vor 10 Monaten

Drawing tablet breakdown 🖌️ Vtuber: @kither555 Artist: KITHERA / 블리전(일)

Drawing tablet breakdown 🖌️ Vtuber: @kither555 Artist: KITHERA / 블리전(일)

Kuroama 🔥 Hair Physics Project Out Now!

72,570 Aufrufe • vor 1 Jahr

KPOPIT 유튜브 🐺 아타 페스티벌 무대 full 0:00 <러브장> 2:48 <코에가와리> 6:05 인사 & 멘트타임 8:39 <Good Boy> 11:16 <Lunatic> 13:56 멘트타임2 18:11 <Wolf Type> 20:37 <Night to howl!>

KPOPIT 유튜브 🐺 아타 페스티벌 무대 full 0:00 <러브장> 2:48 <코에가와리> 6:05 인사 & 멘트타임 8:39 <Good Boy> 11:16 <Lunatic> 13:56 멘트타임2 18:11 <Wolf Type> 20:37 <Night to howl!>

고희재

47,047 Aufrufe • vor 1 Monat