Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Drawing with <input type="range"> ๐Ÿ–Œ๏ธ

hakimel's profile picture

Hakim El Hattab

38,680 subscribers

279,066 Aufrufe โ€ข vor 2 Jahren โ€ขvia X (Twitter)

LIVE

Anya Rossiโ€ข Live Now

Private livecam show

8 Kommentare

Profilbild von Hakim El Hattab
Hakim El Hattabvor 2 Jahren

If anyone wants to fork this the code is at

Profilbild von Ahmad Alfy
Ahmad Alfyvor 2 Jahren

Add some CSS and you got yourself a whiteboard

Profilbild von Hakim El Hattab
Hakim El Hattabvor 2 Jahren

Pretty sure weโ€™ve arrived at the most inefficient way you could possibly render a whiteboard ๐Ÿ‘

Profilbild von Ansari
Ansarivor 2 Jahren

This is kinda satisfying ๐Ÿ˜‚ Good work @hakimel

Profilbild von Nasim Uddin
Nasim Uddinvor 2 Jahren

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

Profilbild von Jim Meyer
Jim Meyervor 2 Jahren

Web zealots: Please, please, use the platform! Hakim: Yes ๐Ÿ˜

Profilbild von Nikita Agafonov
Nikita Agafonovvor 2 Jahren

Hakim doing Hakim's thing! ๐Ÿ˜…

Profilbild von m.Bilal ๐Ÿ‘จโ€๐Ÿ’ป
m.Bilal ๐Ÿ‘จโ€๐Ÿ’ปvor 2 Jahren

This is oddly satisfying..

ร„hnliche Videos

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 Aufrufe โ€ข vor 7 Monaten

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 Aufrufe โ€ข vor 8 Monaten

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,643 Aufrufe โ€ข vor 20 Tagen

I love drawing~~~~! >w< ๐Ÿฉท๐Ÿฉท๐Ÿฉท I stream drawing every day!
0:20

I love drawing~~~~! >w< ๐Ÿฉท๐Ÿฉท๐Ÿฉท I stream drawing every day!

Comifur

40,001 Aufrufe โ€ข vor 4 Monaten

Food Drawing Art Challenge๐Ÿ–Œ๏ธ
0:30

Food Drawing Art Challenge๐Ÿ–Œ๏ธ

Bentengcibe02

112,456 Aufrufe โ€ข vor 1 Tag

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 Aufrufe โ€ข vor 2 Jahren

Creative digital drawing process ๐ŸŽจ๐Ÿ–Œ๏ธ
0:20

Creative digital drawing process ๐ŸŽจ๐Ÿ–Œ๏ธ

Sr Freakยฉ

28,705 Aufrufe โ€ข vor 1 Monat

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

No time for mid drawing bathroom break (>ฯ‰<)

Baby Blu๐Ÿ”œFWA, MP, BFC

22,860 Aufrufe โ€ข vor 2 Jahren

Creative ink drawing in action ๐ŸŽจ๐Ÿ–Œ๏ธ by
0:29

Creative ink drawing in action ๐ŸŽจ๐Ÿ–Œ๏ธ by

MMDRAWS

967,178 Aufrufe โ€ข vor 1 Monat

Drawing tablet breakdown ๐Ÿ–Œ๏ธ Vtuber: kithera Artist: KITHERA
0:54

Drawing tablet breakdown ๐Ÿ–Œ๏ธ Vtuber: kithera Artist: KITHERA

Kuroama ๐Ÿ”ฅ Cozy Forge

68,341 Aufrufe โ€ข vor 1 Jahr

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 Aufrufe โ€ข vor 2 Monaten

๐Ÿ–Œ๏ธDrawing caricatures of random people on the street!!
4:11

๐Ÿ–Œ๏ธDrawing caricatures of random people on the street!!

SrDesignMan

355,811 Aufrufe โ€ข vor 2 Monaten

Creative ink drawing vibes ๐Ÿ–‹๏ธ๐Ÿ–Œ๏ธ by ryangajda
1:09

Creative ink drawing vibes ๐Ÿ–‹๏ธ๐Ÿ–Œ๏ธ by ryangajda

MMDRAWS

24,534 Aufrufe โ€ข vor 22 Tagen

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 Aufrufe โ€ข vor 7 Monaten

The drawing process ๐Ÿ–Œ๏ธ #Arknights #ใ‚ขใƒผใ‚ฏใƒŠใ‚คใƒ„ #ๆ˜Žๆ—ฅๆ–น่ˆŸ
1:00

The drawing process ๐Ÿ–Œ๏ธ #Arknights #ใ‚ขใƒผใ‚ฏใƒŠใ‚คใƒ„ #ๆ˜Žๆ—ฅๆ–น่ˆŸ

Ohkurrva

13,905 Aufrufe โ€ข vor 5 Monaten

โœจ 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 Aufrufe โ€ข vor 8 Monaten

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 Aufrufe โ€ข vor 1 Jahr

>>>>>>>>>VINHONCร‰<<<<<<<<< 2000s 2020s
0:22

>>>>>>>>>VINHONCร‰<<<<<<<<< 2000s 2020s

๐Ÿ

46,884 Aufrufe โ€ข vor 1 Jahr

"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 Aufrufe โ€ข vor 1 Jahr