PageSourceSearch

https://drawgestures.com/

html drawgestures.com collected 2026-10-01 14:28:59 UTC 90,959 bytes, 1,584 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <meta name="csrf-token" content="FppeJJ3euEjugSEHu0350IA2FvPnw3v27tLCEyIR">
7    <meta name="theme-color" content="#1A1A1A">
8
9    <link rel="icon" type="image/x-icon" href="https://drawgestures.com/favicon.ico">
10    <link rel="icon" type="image/png" sizes="32x32" href="https://drawgestures.com/favicon-32x32.png">
11    <link rel="icon" type="image/png" sizes="16x16" href="https://drawgestures.com/favicon-16x16.png">
12    <link rel="apple-touch-icon" sizes="180x180" href="https://drawgestures.com/apple-touch-icon.png">
13
14                <title>Gesture Drawing App &amp; Timer — Free Online Practice | DrawGestures</title>
15<meta name="description" content="Practise gesture drawing online with a free drawing timer (30 seconds to 10 minutes), curated reference poses and tablet-friendly tools. Web, iOS, Android and desktop. No sign-up.">
16<meta name="keywords" content="gesture drawing, gesture drawing app, gesture drawing app free, gesture drawing website, gesture drawing online, drawing timer, gesture drawing timer, figure drawing timer, gesture drawing practice, pose reference app, pinterest gesture drawing">
17<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
18
19<link rel="canonical" href="https://drawgestures.com/">
20
21<meta property="og:type" content="website">
22<meta property="og:url" content="https://drawgestures.com/">
23<meta property="og:title" content="Gesture Drawing App &amp; Timer — Free Online Practice | DrawGestures">
24<meta property="og:description" content="Practise gesture drawing online with a free drawing timer (30 seconds to 10 minutes), curated reference poses and tablet-friendly tools. Web, iOS, Android and desktop. No sign-up.">
25<meta property="og:image" content="https://drawgestures.com/og-image.jpg">
26<meta property="og:image:alt" content="DrawGestures — free online gesture &amp; figure drawing practice tool">
27<meta property="og:site_name" content="DrawGestures: Figure Drawing">
28<meta property="og:locale" content="en_US">
29<meta property="fb:app_id" content="335569033855798">
30
31<meta name="twitter:card" content="summary_large_image">
32<meta name="twitter:url" content="https://drawgestures.com/">
33<meta name="twitter:title" content="Gesture Drawing App &amp; Timer — Free Online Practice | DrawGestures">
34<meta name="twitter:description" content="Practise gesture drawing online with a free drawing timer (30 seconds to 10 minutes), curated reference poses and tablet-friendly tools. Web, iOS, Android and desktop. No sign-up.">
35<meta name="twitter:image" content="https://drawgestures.com/og-image.jpg">
36<meta name="twitter:image:alt" content="DrawGestures — free online gesture &amp; figure drawing practice tool">
37
38<script type="application/ld+json">
39{
40    "@context": "https://schema.org",
41    "@graph": [
42        {
43            "@type": "Organization",
44            "@id": "https://drawgestures.com/#organization",
45            "name": "DrawGestures",
46            "url": "https://drawgestures.com/",
47            "logo": "https://drawgestures.com/images/logo.png",
48            "sameAs": [
49                "https://www.instagram.com/drawgestures/",
50                "https://x.com/drawgestures",
51                "https://apps.apple.com/us/app/draw-gestures-figure-drawing/id1552057070",
52                "https://play.google.com/store/apps/details?id=com.darkmat13r.gesturedrawing"
53            ]
54        },
55        {
56            "@type": "WebSite",
57            "@id": "https://drawgestures.com/#website",
58            "name": "DrawGestures",
59            "url": "https://drawgestures.com/",
60            "publisher": {
61                "@id": "https://drawgestures.com/#organization"
62            },
63            "inLanguage": "en-US"
64        },
65        {
66            "@type": "SoftwareApplication",
67            "@id": "https://drawgestures.com/#app",
68            "name": "DrawGestures — Gesture Drawing App & Timer",
69            "description": "Free gesture drawing app with a built-in drawing timer, curated reference poses and tablet-friendly drawing tools. Practise gesture drawing online or on iOS, Android, Windows and macOS.",
70            "url": "https://drawgestures.com/",
71            "applicationCategory": "DesignApplication",
72            "operatingSystem": "Web, iOS, Android, Windows, macOS",
73            "installUrl": "https://drawgestures.com/download",
74            "screenshot": "https://drawgestures.com/images/app_home_page.png",
75            "featureList": "Gesture drawing timer (30s, 1m, 2m, 5m, 10m), auto-advance and shuffle, curated reference poses, Pinterest and Google image libraries, draw on top of references, tablet and pen support",
76            "offers": {
77                "@type": "Offer",
78                "price": "0",
79                "priceCurrency": "USD"
80            },
81            "publisher": {
82                "@id": "https://drawgestures.com/#organization"
83            }
84        },
85        {
86            "@type": "FAQPage",
87            "@id": "https://drawgestures.com/#faq",
88            "mainEntity": [
89                {
90                    "@type": "Question",
91                    "name": "What is gesture drawing?",
92                    "acceptedAnswer": {
93                        "@type": "Answer",
94                        "text": "Gesture drawing is a quick sketch, usually 30 seconds to 2 minutes, that captures the movement, energy and rhythm of a pose rather than its details. Artists and animators use it as a daily warm-up and as the foundation of figure drawing."
95                    }
96                },
97                {
98                    "@type": "Question",
99                    "name": "Is DrawGestures a free gesture drawing app?",
100                    "acceptedAnswer": {
101                        "@type": "Answer",
102                        "text": "Yes. The drawing timer, timed sessions and curated reference poses are free on the web, iOS and Android, with no sign-up and no ads. Pro, from $2.99 a month, adds Pinterest and cloud imports, custom intervals and extra session modes."
103                    }
104                },
105                {
106                    "@type": "Question",
107                    "name": "Can I practise gesture drawing online in my browser?",
108                    "acceptedAnswer": {
109                        "@type": "Answer",
110                        "text": "Yes. Open the DrawGestures web app, pick a reference library, set the drawing timer and start drawing. Nothing to install. The same sessions are available in the iOS, Android and desktop apps."
111                    }
112                },
113                {
114                    "@type": "Question",
115                    "name": "What timer intervals should I use for gesture drawing?",
116                    "acceptedAnswer": {
117                        "@type": "Answer",
118                        "text": "Start with ten 30-second poses to warm up, then move to 1 or 2 minutes for the bulk of the session. Anything from 5 minutes up is closer to figure drawing than gesture drawing."
119                    }
120                },
121                {
122                    "@type": "Question",
123                    "name": "Does the gesture drawing timer advance automatically?",
124                    "acceptedAnswer": {
125                        "@type": "Answer",
126                        "text": "Yes. When the interval ends the next reference image appears on its own, so you never stop to click. Turn on shuffle to see poses in random order."
127                    }
128                },
129                {
130                    "@type": "Question",
131                    "name": "Which devices does DrawGestures work on?",
132                    "acceptedAnswer": {
133                        "@type": "Answer",
134                        "text": "Any modern browser, iPhone and iPad, Android phones and tablets, Windows and macOS. The app is built for tablets, with pen input and drawing on top of the reference."
135                    }
136                }
137            ]
138        }
139    ]
140}
141</script>
141
142
143<meta name="dg:page-name" content="home">
144<meta name="dg:page-type" content="home">
145    
146    
147    <link rel="preconnect" href="https://fonts.googleapis.com">
148    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
149    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;700&family=Kanit:wght@300;400;500;700&display=swap" rel="stylesheet">
150
151    
152    <link href="https://drawgestures.com/css/design-system.css" rel="stylesheet">
153    <link href="https://drawgestures.com/css/ds-web.css" rel="stylesheet">
154
155    <style>
156    /* ---- Home page "B Bold" (scoped: .dg-*) ---- */
157    [id] { scroll-margin-top: calc(var(--ds-topbar-height) + var(--space-md)); }
158
159    @keyframes dgHeroIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
160    @keyframes dgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
161
162    /* Pill buttons on this page */
163    .dg-cta-row .ds-btn,
164    .dg-guides__all .ds-btn { border-radius: var(--radius-full); }
165
166    /* Section rhythm + centered headers */
167    .dg-sec { padding-top: 6rem; padding-bottom: 6rem; }
168    .dg-section-head {
169        max-width: 44rem;
170        margin: 0 auto;
171        text-align: center;
172    }
173    .dg-eyebrow {
174        font-family: var(--font-plain);
175        font-size: var(--text-label-small);
176        font-weight: 500;
177        letter-spacing: 0.18em;
178        text-transform: uppercase;
179        color: var(--color-primary);
180    }
181    .dg-section-head .ds-heading {
182        margin-top: var(--space-md);
183        font-size: clamp(1.875rem, 3.4vw + 0.5rem, 2.75rem);
184        line-height: 1.12;
185        letter-spacing: -0.02em;
186        text-wrap: balance;
187    }
188    .dg-section-head > .ds-text {
189        margin-top: var(--space-md);
190        font-weight: 300;
191        text-wrap: pretty;
192    }
193    .dg-strong { color: var(--color-neutral-white); font-weight: 500; }
194
195    /* Hero — centered */
196    .dg-hero {
197        position: relative;
198        padding: 6rem 0 0;
199        text-align: center;
200        overflow-x: clip;
201    }
202    .dg-hero__glow {
203        position: absolute;
204        top: -12.5rem;
205        left: 50%;
206        transform: translateX(-50%);
207        width: 56rem;
208        height: 37.5rem;
209        border-radius: var(--radius-full);
210        background: radial-gradient(ellipse, color-mix(in srgb, var(--color-primary) 13%, transparent) 0%, transparent 65%);
211        pointer-events: none;
212    }
213    .dg-hero__copy {
214        position: relative;
215        max-width: 55rem;
216        margin: 0 auto;
217        padding: 0 var(--space-lg);
218        display: flex;
219        flex-direction: column;
220        align-items: center;
221    }
222    .dg-hero .ds-heading--display {
223        margin-top: 1.75rem;
224        font-size: clamp(2.75rem, 6.5vw + 0.5rem, 4.75rem);
225        line-height: 1.04;
226        letter-spacing: -0.025em;
227        text-wrap: balance;
228    }
229    .dg-hero__lede {
230        margin-top: 1.625rem;
231        max-width: 36rem;
232        font-weight: 300;
233        text-wrap: pretty;
234    }
235    .dg-hero__lede strong { color: var(--color-neutral-white); font-weight: 500; }
236    .dg-cta-row {
237        display: flex;
238        flex-wrap: wrap;
239        align-items: center;
240        justify-content: center;
241        gap: var(--space-normal);
242        margin-top: 2.25rem;
243    }
244    .dg-platforms {
245        display: flex;
246        flex-wrap: wrap;
247        justify-content: center;
248        gap: var(--space-sm);
249        margin-top: 1.25rem;
250    }
251    .dg-platform {
252        display: inline-flex;
253        align-items: center;
254        gap: var(--space-sm);
255        height: 2.5rem;
256        padding: 0 var(--space-md);
257        border-radius: var(--radius-full);
258        background: color-mix(in srgb, var(--color-neutral-white) 3%, transparent);
259        border: var(--border-thin) solid var(--ds-glass-border);
260        color: var(--color-neutral-silver);
261        text-decoration: none;
262        font-family: var(--font-plain);
263        font-size: var(--text-body-small);
264        transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
265    }
266    .dg-platform:hover {
267        background: var(--ds-glass-hover);
268        border-color: color-mix(in srgb, var(--color-neutral-white) 22%, transparent);
269        color: var(--color-neutral-white);
270    }
271    .dg-rating {
272        display: flex;
273        flex-wrap: wrap;
274        justify-content: center;
275        align-items: center;
276        gap: var(--space-sm) var(--space-md);
277        margin-top: 1.375rem;
278        font-family: var(--font-plain);
279        font-size: var(--text-body-small);
280        color: var(--color-neutral-ash);
281    }
282    .dg-stars {
283        color: var(--color-premium-gold);
284        letter-spacing: 0.12em;
285        white-space: nowrap;
286    }
287    .dg-stars--dim { color: var(--color-charcoal-light); }
288    .dg-rating__sep { color: var(--color-charcoal-light); }
289
290    /* Phone centerpiece */
291    .dg-hero__stage {
292        position: relative;
293        max-width: 72.5rem;
294        margin: 4rem auto 0;
295        padding: 0 var(--space-lg);
296        display: flex;
297        justify-content: center;
298    }
299    .dg-phone {
300        width: min(21.25rem, 82vw);
301        padding: 0.875rem 0.875rem 0;
302        background: var(--ds-glass-elevated);
303        border: var(--border-thin) solid var(--ds-glass-border);
304        border-bottom: none;
305        border-radius: 2rem 2rem 0 0;
306        box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, var(--color-neutral-white) 8%, transparent);
307    }
308    .dg-phone img {
309        display: block;
310        width: 100%;
311        border-radius: 1.25rem 1.25rem 0 0;
312    }
313    .dg-hero__rule { height: 1px; background: var(--ds-glass-border); }
314
315    /* Hero entrance (motion-safe only) */
316    @media (prefers-reduced-motion: no-preference) {
317        .dg-anim { animation: dgHeroIn 0.7s cubic-bezier(0, 0, 0, 1) both; }
318        .dg-anim--d1 { animation-delay: 0.08s; }
319        .dg-anim--d2 { animation-delay: 0.16s; }
320        .dg-anim--d3 { animation-delay: 0.24s; }
321        .dg-anim--d3b { animation-delay: 0.3s; }
322        .dg-anim--d4 { animation-delay: 0.32s; }
323        .dg-anim--d5 { animation-delay: 0.4s; animation-duration: 0.9s; }
324    }
325
326    /* Scroll reveal (enabled by JS, motion-safe only) */
327    @media (prefers-reduced-motion: no-preference) {
328        .dg-js [data-reveal] { opacity: 0; transform: translateY(26px); }
329        .dg-js [data-reveal].is-in {
330            opacity: 1;
331            transform: translateY(0);
332            transition: opacity 0.75s cubic-bezier(0, 0, 0, 1) var(--reveal-delay, 0ms),
333                        transform 0.75s cubic-bezier(0, 0, 0, 1) var(--reveal-delay, 0ms);
334        }
335    }
336
337    /* About — copy + card-free fact strip */
338    .dg-about__copy .ds-text { font-weight: 300; text-wrap: pretty; }
339    .dg-about__copy .ds-text + .ds-text { margin-top: 0.875rem; }
340    .dg-facts {
341        margin-top: 4rem;
342        border-top: var(--border-thin) solid var(--ds-glass-border);
343        border-bottom: var(--border-thin) solid var(--ds-glass-border);
344        display: grid;
345        grid-template-columns: repeat(auto-fit, minmax(min(13.75rem, 100%), 1fr));
346    }
347    .dg-facts > div {
348        padding: 1.75rem var(--space-lg);
349        border-right: var(--border-thin) solid color-mix(in srgb, var(--color-neutral-white) 8%, transparent);
350    }
351    .dg-facts > div:last-child { border-right: none; }
352    .dg-facts__label {
353        margin: 0 0 var(--space-xs);
354        font-family: var(--font-plain);
355        font-size: var(--text-label-small);
356        font-weight: 500;
357        text-transform: uppercase;
358        letter-spacing: 0.14em;
359        color: var(--color-primary);
360    }
361    .dg-facts__value {
362        margin: 0;
363        font-family: var(--font-plain);
364        font-size: var(--text-body-medium);
365        line-height: 1.5;
366        color: var(--color-on-surface);
367    }
368
369    /* Google-data editorial footnote */
370    .dg-gdata {
371        max-width: 51.25rem;
372        margin: 3.5rem auto 0;
373        text-align: center;
374    }
375    .dg-gdata > .ds-heading { font-size: var(--ds-text-lg); }
376    .dg-gdata__intro { margin: var(--space-xs) 0 1.75rem; }
377    .dg-gdata__grid {
378        display: grid;
379        grid-template-columns: repeat(auto-fit, minmax(min(13.75rem, 100%), 1fr));
380        gap: var(--space-lg) 2rem;
381        text-align: left;
382    }
383    .dg-gdata__item { display: flex; gap: 0.875rem; }
384    .dg-gdata__ix {
385        flex-shrink: 0;
386        font-family: var(--font-brand);
387        font-weight: 700;
388        font-size: var(--text-body-medium);
389        color: var(--color-primary);
390    }
391    .dg-gdata__item em { font-style: normal; font-weight: 500; color: var(--color-neutral-white); }
392    .dg-gdata__legal { margin-top: 1.75rem; }
393    .dg-gdata__legal a {
394        color: var(--color-primary);
395        text-decoration: underline;
396        text-underline-offset: 3px;
397    }
398
399    /* Features — card-free editorial grid */
400    .dg-features {
401        display: grid;
402        grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
403        gap: 3.5rem 2.5rem;
404        margin-top: 4rem;
405    }
406    .dg-feature { display: flex; flex-direction: column; }
407    .dg-feature__illo {
408        position: relative;
409        height: 12.5rem;
410        border-radius: var(--radius-card);
411        overflow: hidden;
412        background: var(--ds-glass-surface);
413    }
414    .dg-feature__illo img { display: block; width: 100%; height: 100%; object-fit: cover; }
415    /* Source-backed libraries: the brand mark sits over a backdrop that hints at
416       the source's own UI, on the same dark tone as the app screenshots. */
417    .dg-feature__illo--logo {
418        display: grid;
419        place-items: center;
420        background: var(--color-charcoal-black);
421        isolation: isolate;
422    }
423    .dg-feature__illo--logo::after {
424        content: "";
425        position: absolute;
426        inset: 0;
427        z-index: 1;
428        background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-charcoal-black) 70%, transparent) 0, transparent 9rem);
429        pointer-events: none;
430    }
431    .dg-feature__mark {
432        position: relative;
433        z-index: 2;
434        display: grid;
435        place-items: center;
436        width: 5.5rem;
437        height: 5.5rem;
438        border-radius: 50%;
439        background: var(--color-neutral-white);
440        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
441    }
442    .dg-feature__mark svg { display: block; }
443    /* Optical balance: the Drive mark is a wide triangle, the Pinterest mark a full disc */
444    .dg-feature__mark .sk-icon--google-drive { width: 3.5rem; height: 3.5rem; transform: translateY(2px); }
445
446    /* Pinterest: staggered masonry board of pastel placeholders, mid-load */
447    .dg-pins {
448        position: absolute;
449        inset: -0.5rem 0.5rem auto;
450        display: flex;
451        gap: 0.5rem;
452    }
453    .dg-pins__col {
454        flex: 1;
455        display: flex;
456        flex-direction: column;
457        gap: 0.5rem;
458        transform: translateY(calc(var(--offset) * -1));
459    }
460    .dg-pins__cell {
461        position: relative;
462        height: var(--h);
463        border-radius: 0.75rem;
464        overflow: hidden;
465        background: hsl(var(--hue) 32% 76%);
466        opacity: 0.68;
467    }
468
469    /* Google Drive: folder grid in Drive's dark-mode style */
470    .dg-drive {
471        position: absolute;
472        inset: 0.875rem;
473        display: grid;
474        grid-template-columns: repeat(3, 1fr);
475        align-content: center;
476        gap: 0.625rem;
477    }
478    .dg-drive__folder {
479        position: relative;
480        display: flex;
481        align-items: center;
482        gap: 0.5rem;
483        height: 2.5rem;
484        padding: 0 0.75rem;
485        border-radius: 0.75rem;
486        overflow: hidden;
487        background: color-mix(in srgb, var(--color-neutral-white) 7%, transparent);
488    }
489    .dg-drive__icon {
490        flex-shrink: 0;
491        width: 1.125rem;
492        height: 1.125rem;
493        fill: hsl(var(--hue) 35% 62%);
494    }
495    .dg-drive__icon.is-grey { fill: color-mix(in srgb, var(--color-neutral-white) 45%, transparent); }
496    .dg-drive__name {
497        width: var(--w);
498        height: 0.4375rem;
499        border-radius: 999px;
500        background: color-mix(in srgb, var(--color-neutral-white) 22%, transparent);
501    }
502
503    /* Loading shimmer across both backdrops */
504    .dg-pins__cell::after,
505    .dg-drive__folder::after {
506        content: "";
507        position: absolute;
508        inset: 0;
509        background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
510        transform: translateX(-100%);
511    }
512    @media (prefers-reduced-motion: no-preference) {
513        .dg-pins__cell::after,
514        .dg-drive__folder::after { animation: dg-shimmer 2.4s ease-in-out var(--d, 0ms) infinite; }
515    }
516    @keyframes dg-shimmer {
517        0%   { transform: translateX(-100%); }
518        60%, 100% { transform: translateX(100%); }
519    }
520    .dg-feature__head {
521        display: flex;
522        align-items: baseline;
523        gap: var(--space-normal);
524        margin-top: 1.25rem;
525    }
526    .dg-feature__num {
527        font-family: var(--font-brand);
528        font-weight: 700;
529        font-size: var(--text-body-small);
530        letter-spacing: 0.08em;
531        color: var(--color-primary);
532    }
533    .dg-feature .ds-heading { font-size: 1.3125rem; }
534    .dg-feature .ds-heading em { font-style: normal; color: var(--color-primary); }
535    .dg-feature > .ds-text { margin-top: var(--space-sm); text-wrap: pretty; }
536
537    /* Reviews — marquee */
538    .dg-reviews {
539        border-top: var(--border-thin) solid color-mix(in srgb, var(--color-neutral-white) 6%, transparent);
540        border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-neutral-white) 6%, transparent);
541        overflow: hidden;
542    }
543    .dg-reviews .dg-section-head { padding: 0 var(--space-lg); }
544    .dg-reviews__avg {
545        display: flex;
546        align-items: baseline;
547        justify-content: center;
548        gap: 0.875rem;
549        margin-top: 1.25rem;
550    }
551    .dg-reviews__num {
552        font-family: var(--font-brand);
553        font-size: 3.75rem;
554        font-weight: 700;
555        color: var(--color-primary);
556        line-height: 1;
557        font-variant-numeric: tabular-nums;
558    }
559    .dg-marquee { position: relative; margin-top: 3rem; }
560    .dg-marquee::before,
561    .dg-marquee::after {
562        content: '';
563        position: absolute;
564        top: 0;
565        bottom: 0;
566        width: 7.5rem;
567        z-index: 2;
568        pointer-events: none;
569    }
570    .dg-marquee::before { left: 0; background: linear-gradient(90deg, var(--color-background), transparent); }
571    .dg-marquee::after { right: 0; background: linear-gradient(270deg, var(--color-background), transparent); }
572    @media (max-width: 640px) {
573        .dg-marquee::before, .dg-marquee::after { width: 2.5rem; }
574        .dg-review { width: 17.5rem; }
575    }
576    .dg-marquee__track {
577        display: flex;
578        gap: 1.25rem;
579        width: max-content;
580    }
581    @media (prefers-reduced-motion: no-preference) {
582        .dg-marquee__track { animation: dgMarquee 36s linear infinite; }
583    }
584    @media (prefers-reduced-motion: reduce) {
585        .dg-marquee { overflow-x: auto; }
586        .dg-marquee::before, .dg-marquee::after { display: none; }
587        .dg-marquee__copy--dup { display: none; }
588    }
589    .dg-marquee__copy { display: flex; gap: 1.25rem; }
590    .dg-review {
591        width: 22.5rem;
592        flex-shrink: 0;
593        padding: var(--space-xs) 0 var(--space-xs) 1.625rem;
594        border-left: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
595    }
596    .dg-review blockquote {
597        margin: 0.625rem 0 0.75rem;
598        font-family: var(--font-plain);
599        font-size: 1.0625rem;
600        line-height: 1.55;
601        font-weight: 300;
602        color: var(--color-on-surface);
603    }
604
605    /* Guides — card-free teasers */
606    .dg-guides {
607        display: grid;
608        grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
609        gap: 1.25rem;
610        margin-top: 3.5rem;
611    }
612    .dg-guide {
613        display: block;
614        text-decoration: none;
615        color: inherit;
616        transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
617    }
618    .dg-guide:hover { transform: translateY(-4px); }
619    .dg-guide__img {
620        height: 11.25rem;
621        border-radius: var(--radius-card);
622        overflow: hidden;
623        background: var(--ds-glass-surface);
624    }
625    .dg-guide__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
626    .dg-guide .ds-heading {
627        margin-top: 1.125rem;
628        font-size: var(--ds-text-lg);
629        line-height: 1.35;
630        text-wrap: balance;
631    }
632    .dg-guide__more {
633        margin-top: 0.75rem;
634        font-family: var(--font-plain);
635        font-size: var(--text-body-medium);
636        font-weight: 500;
637        color: var(--color-primary);
638    }
639    .dg-guide:hover .dg-guide__more { color: var(--color-accent-primary-soft); }
640    .dg-guides__all { margin-top: 2.25rem; text-align: center; }
641    .dg-guides__all .ds-btn { border: var(--border-thin) solid color-mix(in srgb, var(--color-neutral-white) 14%, transparent); }
642    .dg-guides__all .ds-btn:hover { border-color: var(--color-primary); color: var(--color-accent-primary-soft); background: transparent; }
643
644    /* Timer presets — card-free interval strip */
645    .dg-timer {
646        list-style: none;
647        margin: 3.5rem 0 0;
648        padding: 0;
649        display: grid;
650        grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
651        border-top: var(--border-thin) solid var(--ds-glass-border);
652        border-bottom: var(--border-thin) solid var(--ds-glass-border);
653    }
654    .dg-timer__item {
655        display: flex;
656        flex-direction: column;
657        gap: var(--space-xs);
658        padding: 1.75rem var(--space-lg);
659        border-right: var(--border-thin) solid color-mix(in srgb, var(--color-neutral-white) 8%, transparent);
660    }
661    .dg-timer__item:last-child { border-right: none; }
662    .dg-timer__time {
663        font-family: var(--font-brand);
664        font-size: 2.25rem;
665        font-weight: 700;
666        line-height: 1;
667        color: var(--color-primary);
668        font-variant-numeric: tabular-nums;
669    }
670    .dg-timer__label {
671        font-family: var(--font-plain);
672        font-size: var(--text-label-small);
673        font-weight: 500;
674        text-transform: uppercase;
675        letter-spacing: 0.14em;
676        color: var(--color-on-surface);
677    }
678    #timer .dg-cta-row { margin-top: 2.5rem; }
679
680    /* FAQ — native <details> */
681    .dg-faq {
682        max-width: 48rem;
683        margin: 3rem auto 0;
684        border-top: var(--border-thin) solid var(--ds-glass-border);
685    }
686    .dg-faq__item { border-bottom: var(--border-thin) solid var(--ds-glass-border); }
687    .dg-faq__item summary {
688        display: flex;
689        justify-content: space-between;
690        align-items: center;
691        gap: var(--space-md);
692        padding: 1.25rem 0;
693        cursor: pointer;
694        list-style: none;
695        font-family: var(--font-plain);
696        font-size: var(--text-body-large);
697        font-weight: 500;
698        color: var(--color-on-surface);
699    }
700    .dg-faq__item summary::-webkit-details-marker { display: none; }
701    .dg-faq__item summary::after {
702        content: '+';
703        flex-shrink: 0;
704        font-size: 1.5rem;
705        line-height: 1;
706        color: var(--color-primary);
707        transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
708    }
709    .dg-faq__item[open] summary::after { transform: rotate(45deg); }
710    .dg-faq__item summary:hover { color: var(--color-neutral-white); }
711    .dg-faq__item > .ds-text { padding: 0 0 1.25rem; text-wrap: pretty; }
712
713    /* Final CTA — full-bleed centered */
714    .dg-cta {
715        position: relative;
716        padding: 7rem 0;
717        overflow: hidden;
718        border-top: var(--border-thin) solid color-mix(in srgb, var(--color-neutral-white) 6%, transparent);
719        background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 55%);
720    }
721    .dg-cta__inner {
722        position: relative;
723        max-width: 45rem;
724        margin: 0 auto;
725        padding: 0 var(--space-lg);
726        text-align: center;
727        display: flex;
728        flex-direction: column;
729        align-items: center;
730    }
731    .dg-cta__inner .ds-heading {
732        margin-top: var(--space-lg);
733        font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem);
734        line-height: 1.08;
735        letter-spacing: -0.02em;
736        text-wrap: balance;
737    }
738    .dg-cta__lede {
739        margin-top: 1.25rem;
740        max-width: 32rem;
741        font-weight: 300;
742        text-wrap: pretty;
743    }
744    .dg-cta__note { margin-top: var(--space-lg); }
745</style>
746
747    
747<script>
748    // Lightweight queue so consumers can call dgAnalytics.track() before the SDK loads.
749    window.dgAnalytics = window.dgAnalytics || (function() {
750        var queue = [];
751        var ready = false;
752        function flush() {
753            if (!window.amplitude || !ready) return;
754            while (queue.length) {
755                var item = queue.shift();
756                try { window.amplitude.track(item.name, item.props || {}); } catch (e) {}
757            }
758        }
759        var api = {
760            track: function(name, props) {
761                if (ready && window.amplitude && typeof window.amplitude.track === 'function') {
762                    try { window.amplitude.track(name, props || {}); } catch (e) {}
763                } else {
764                    queue.push({ name: name, props: props });
765                }
766            },
767            // Conversions are also sent as a plain event so they show up in
768            // funnels alongside cta_click / page_view.
769            conversion: function(name, props) {
770                var payload = Object.assign({}, props || {}, { conversion: name });
771                var ctx = window.dgPageContext || {};
772                if (payload.page_name === undefined) payload.page_name = ctx.page_name || null;
773                if (payload.page_slug === undefined) payload.page_slug = ctx.page_slug || null;
774                api.track('conversion', payload);
775            },
776            _onReady: function() { ready = true; flush(); }
777        };
778        return api;
779    })();
780
781    // Per-page context — read from <meta name="dg:page-*"> tags injected by individual pages.
782    window.dgPageContext = (function() {
783        function meta(name) {
784            var el = document.querySelector('meta[name="' + name + '"]');
785            return el ? el.getAttribute('content') : null;
786        }
787        return {
788            page_name: meta('dg:page-name') || window.location.pathname.replace(/^\/+|\/+$/g, '') || 'home',
789            page_type: meta('dg:page-type') || 'page',
790            page_slug: meta('dg:page-slug') || null,
791        };
792    })();
793</script>
vendor: 1 bytes, line 793
793
794<script type="module">
795    import * as amplitude from 'https://cdn.jsdelivr.net/npm/@amplitude/[email protected]/+esm';
796    window.amplitude = amplitude;
797    amplitude.init("59d3bf7380bdb8ccaa2c9040fb43b2f0", undefined, {
798        serverZone: "US",
799        defaultTracking: {
800            attribution: true,
801            pageViews: false, // we send our own
802            sessions: true,
803            formInteractions: true,
804            fileDownloads: true,
805        },
806    });
807    
808    var ctx = window.dgPageContext;
809    amplitude.track('page_view', {
810        page_name: ctx.page_name,
811        page_type: ctx.page_type,
812        page_slug: ctx.page_slug,
813        page_path: window.location.pathname,
814        page_url: window.location.href,
815        referrer: document.referrer || null,
816    });
817    window.dgAnalytics._onReady();
818
819    // CTAs whose click is itself a conversion. Anything else tagged with
820    // data-cta still emits cta_click, just not a conversion.
821    var CONVERSION_CTAS = ['download_app', 'start_practice', 'subscribe'];
822
823    function flushNow() {
824        try { amplitude.flush(); } catch (e) {}
825    }
826    window.dgAnalytics.flush = flushNow;
827
828    // Last chance to deliver queued events when the tab goes away.
829    window.addEventListener('pagehide', function() {
830        try { amplitude.setTransport('beacon'); } catch (e) {}
831        flushNow();
832    });
833
834    // Outbound + CTA + conversion auto-tracking
835    document.addEventListener('click', function(e) {
836        var a = e.target.closest('a');
837        if (!a) return;
838        var href = a.getAttribute('href') || '';
839        if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) return;
840
841        var isExternal = /^https?:\/\//i.test(href) && !href.includes(window.location.host);
842        if (isExternal) {
843            window.dgAnalytics.track('outbound_click', {
844                href: href,
845                text: (a.innerText || '').trim().slice(0, 120),
846                page_name: ctx.page_name,
847                page_slug: ctx.page_slug,
848            });
849        }
850        if (a.dataset && a.dataset.cta) {
851            window.dgAnalytics.track('cta_click', {
852                cta: a.dataset.cta,
853                cta_location: a.dataset.ctaLocation || null,
854                cta_destination: a.dataset.ctaDestination || href,
855                href: href,
856                page_name: ctx.page_name,
857                page_slug: ctx.page_slug,
858            });
859            if (CONVERSION_CTAS.indexOf(a.dataset.cta) !== -1) {
860                window.dgAnalytics.conversion(a.dataset.cta, {
861                    destination: a.dataset.ctaDestination || null,
862                    cta_location: a.dataset.ctaLocation || null,
863                    plan: a.dataset.ctaPlan || null,
864                });
865            }
866            // Same-tab CTAs unload the page before the next flush interval,
867            // so push the queued events out now.
868            if (!a.target || a.target === '_self') flushNow();
869        }
870    }, { passive: true });
871
872    document.addEventListener('submit', function(e) {
873        var form = e.target;
874        if (form && form.dataset && form.dataset.conversion) {
875            window.dgAnalytics.track('conversion', {
876                conversion: form.dataset.conversion,
877                page_name: ctx.page_name,
878                page_slug: ctx.page_slug,
879            });
880        }
881    }, { passive: true });
882
883    // Scroll depth — 25 / 50 / 75 / 100
884    (function() {
885        var marks = [25, 50, 75, 100];
886        var fired = {};
887        function onScroll() {
888            var doc = document.documentElement;
889            var max = doc.scrollHeight - doc.clientHeight;
890            if (max <= 0) return;
891            var pct = Math.min(100, Math.round((doc.scrollTop || window.scrollY) / max * 100));
892            marks.forEach(function(m) {
893                if (!fired[m] && pct >= m) {
894                    fired[m] = true;
895                    window.dgAnalytics.track('scroll_depth', {
896                        depth: m,
897                        page_name: ctx.page_name,
898                        page_slug: ctx.page_slug,
899                    });
900                }
901            });
902        }
903        window.addEventListener('scroll', onScroll, { passive: true });
904        onScroll();
905    })();
906</script>
906
907</head>
908<body class="ds-page">
909
910<header class="ds-navbar">
911    <input type="checkbox" id="ds-nav-toggle" class="ds-navbar__toggle-input" aria-hidden="true">
912
913    <div class="ds-container"><div class="ds-navbar__inner">
914            <a href="https://drawgestures.com" class="ds-navbar__brand" aria-label="DrawGestures — Home">
915                <img src="https://drawgestures.com/images/logo-mark.png" alt="" width="30" height="30">
916                <span class="ds-navbar__wordmark">DrawGestures</span>
917            </a>
918
919            <nav aria-label="Primary">
920                <ul class="ds-navbar__links">
921                                            <li>
922                            <a href="https://drawgestures.com/guides"
923                               class="ds-navbar__link "
924                                                              >Guides</a>
925                        </li>
926                                            <li>
927                            <a href="https://app.drawgestures.com/pricing"
928                               class="ds-navbar__link "
929                                data-cta="view_pricing" data-cta-location="navbar" data-cta-destination="web_app"                                >Pricing</a>
930                        </li>
931                                            <li>
932                            <a href="https://drawgestures.com/challenge"
933                               class="ds-navbar__link "
934                                                              >Challenge</a>
935                        </li>
936                                            <li>
937                            <a href="https://drawgestures.com/about"
938                               class="ds-navbar__link "
939                                                              >About</a>
940                        </li>
941                                    </ul>
942            </nav>
943
944            <div class="ds-navbar__cta ds-navbar__cta--desktop">
945                <a href="https://drawgestures.com/download" class="ds-btn ds-btn--primary ds-btn--sm" data-cta="download_nav" data-cta-location="navbar" data-cta-destination="download_page" >Download</a>
946            </div>
947
948            <label for="ds-nav-toggle" class="ds-navbar__toggle" role="button" aria-label="Toggle navigation menu">
949                <svg class="ds-navbar__icon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
950                <svg class="ds-navbar__icon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
951            </label>
952        </div></div>
953
954    <nav class="ds-navbar__mobile" aria-label="Primary mobile">
955                    <a href="https://drawgestures.com/guides"
956               class="ds-navbar__link "
957                              >Guides</a>
958                    <a href="https://app.drawgestures.com/pricing"
959               class="ds-navbar__link "
960                data-cta="view_pricing" data-cta-location="navbar_mobile" data-cta-destination="web_app"                >Pricing</a>
961                    <a href="https://drawgestures.com/challenge"
962               class="ds-navbar__link "
963                              >Challenge</a>
964                    <a href="https://drawgestures.com/about"
965               class="ds-navbar__link "
966                              >About</a>
967                <a href="https://drawgestures.com/download" class="ds-btn ds-btn--primary ds-btn--sm ds-btn--full" data-cta="download_nav" data-cta-location="navbar_mobile" data-cta-destination="download_page" >Download</a>
968    </nav>
969</header>
970
971<main id="main-content">
972    
973
974<section class="dg-hero">
975    <div class="dg-hero__glow" aria-hidden="true"></div>
976    <div class="dg-hero__copy">
977        <span class="ds-chip ds-chip--accent ds-chip--md dg-anim">Free · online · iOS · Android · desktop</span>
978        <h1 class="ds-heading ds-heading--display dg-anim dg-anim--d1">The gesture drawing app with a <span class="ds-heading--gradient">built-in timer.</span></h1>
979        <p class="ds-text ds-text--xl ds-text--subtle dg-hero__lede dg-anim dg-anim--d2">Practise gesture drawing online or on your tablet. Pinterest, Google and premium cloud references — <strong>in one place</strong> —
980            with a drawing timer from 30 seconds to 10 minutes.
981            No login. No subscription wall. Just open it and draw.</p>
982        <div class="dg-cta-row dg-anim dg-anim--d3">
983            <a href="https://app.drawgestures.com" class="ds-btn ds-btn--primary ds-btn--lg" data-cta="start_practice" data-cta-location="home_hero" data-cta-destination="web_app" ><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
984            <path d="M8 5.5l10 6.5-10 6.5V5.5z"/>
985        </svg>
986                        Start drawing online</a>
987            <a href="https://drawgestures.com/download" class="ds-btn ds-btn--secondary ds-btn--lg" data-cta="download_app" data-cta-location="home_hero" data-cta-destination="download_page" ><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
988            <path d="M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5M4 20h16"/>
989        </svg>
990                        Download the app</a>
991        </div>
992        <div class="dg-platforms dg-anim dg-anim--d3b">
993            <a href="https://drawgestures.com/download" class="dg-platform" title="Download for iPhone &amp; iPad"
994                data-cta="download_app" data-cta-location="home_hero_platforms" data-cta-destination="download_page" data-platform="ios">
995                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
996            <path d="M16.3 12.8c0-2.2 1.8-3.2 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.4-.1-2.7.8-3.4.8-.7 0-1.8-.8-2.9-.8-1.5 0-2.9.9-3.7 2.2-1.6 2.7-.4 6.8 1.1 9 .8 1.1 1.7 2.3 2.8 2.3 1.1 0 1.6-.7 2.9-.7 1.3 0 1.7.7 2.9.7 1.2 0 1.9-1.1 2.7-2.2.8-1.2 1.2-2.4 1.2-2.5-.1 0-2.3-.9-2.3-3.8zM14.2 5.7c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.6 1.4-.6.7-1.1 1.8-.9 2.8 1 .1 2-.5 2.6-1.3z"/>
997        </svg>
998                        iOS
999            </a>
1000            <a href="https://drawgestures.com/download" class="dg-platform" title="Download for Android"
1001                data-cta="download_app" data-cta-location="home_hero_platforms" data-cta-destination="download_page" data-platform="android">
1002                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1003            <path d="M6 9.5h12v8.2c0 .7-.6 1.3-1.3 1.3H15v2.4c0 .8-.6 1.4-1.4 1.4s-1.4-.6-1.4-1.4V19h-1.4v2.4c0 .8-.6 1.4-1.4 1.4S8 22.2 8 21.4V19H7.3c-.7 0-1.3-.6-1.3-1.3V9.5zM3.6 9.4c.8 0 1.4.6 1.4 1.4v4.7c0 .8-.6 1.4-1.4 1.4s-1.4-.6-1.4-1.4v-4.7c0-.8.6-1.4 1.4-1.4zm16.8 0c.8 0 1.4.6 1.4 1.4v4.7c0 .8-.6 1.4-1.4 1.4s-1.4-.6-1.4-1.4v-4.7c0-.8.6-1.4 1.4-1.4zM15.6 2.6l1.1-1.9c.1-.2 0-.4-.1-.5-.2-.1-.4 0-.5.2l-1.1 2c-.9-.4-1.9-.6-3-.6s-2.1.2-3 .6l-1.1-2c-.1-.2-.3-.3-.5-.2-.2.1-.2.3-.1.5l1.1 1.9C6.4 3.8 5 5.8 5 8.1h14c0-2.3-1.4-4.3-3.4-5.5zM9.3 5.9c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zm5.4 0c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7z"/>
1004        </svg>
1005                        Android
1006            </a>
1007            <a href="https://drawgestures.com/download" class="dg-platform" title="Download for Windows"
1008                data-cta="download_app" data-cta-location="home_hero_platforms" data-cta-destination="download_page" data-platform="windows">
1009                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1010            <path d="M3 5.6l7.6-1v7.1H3V5.6zm0 12.8l7.6 1v-7H3v6zm8.6 1.2L22 21V12.7h-10.4v6.9zm0-15.2v7.3H22V3l-10.4 1.4z"/>
1011        </svg>
1012                        Windows
1013            </a>
1014            <a href="https://drawgestures.com/download" class="dg-platform" title="Download for Mac"
1015                data-cta="download_app" data-cta-location="home_hero_platforms" data-cta-destination="download_page" data-platform="macos">
1016                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1017            <path d="M16.3 12.8c0-2.2 1.8-3.2 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.4-.1-2.7.8-3.4.8-.7 0-1.8-.8-2.9-.8-1.5 0-2.9.9-3.7 2.2-1.6 2.7-.4 6.8 1.1 9 .8 1.1 1.7 2.3 2.8 2.3 1.1 0 1.6-.7 2.9-.7 1.3 0 1.7.7 2.9.7 1.2 0 1.9-1.1 2.7-2.2.8-1.2 1.2-2.4 1.2-2.5-.1 0-2.3-.9-2.3-3.8zM14.2 5.7c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.6 1.4-.6.7-1.1 1.8-.9 2.8 1 .1 2-.5 2.6-1.3z"/>
1018        </svg>
1019                        macOS
1020            </a>
1021        </div>
1022        <div class="dg-rating dg-anim dg-anim--d4">
1023            <span class="dg-stars" aria-hidden="true">★★★★★</span>
1024            <span>4.6 · 2,100+ reviews</span>
1025            <span class="dg-rating__sep">·</span>
1026            <span>iOS · Android · Tablet</span>
1027        </div>
1028    </div>
1029    <div class="dg-hero__stage">
1030        <div class="dg-phone dg-anim dg-anim--d5">
1031            <img src="https://drawgestures.com/images/app_home_page.png"
1032                 alt="DrawGestures app — Practice Session screen"
1033                 fetchpriority="high">
1034        </div>
1035    </div>
1036    <div class="dg-hero__rule" aria-hidden="true"></div>
1037</section>
1038
1039
1040<section class="ds-section--lg dg-sec" id="about"><div class="ds-container"><div class="dg-section-head dg-about__copy" data-reveal>
1041            <span class="dg-eyebrow">About</span>
1042            <h2 class="ds-heading ds-heading--xl">A free gesture drawing app for <span class="ds-heading--gradient">gesture &amp; figure</span> practice.</h2>
1043            <p class="ds-text ds-text--lg ds-text--subtle"><strong class="dg-strong">DrawGestures</strong> brings Pinterest, Google and premium cloud libraries together, provides a distraction-free viewer with timers, and lets you sketch on top of references on tablets and desktops.</p>
1044            <p class="ds-text ds-text--lg ds-text--subtle">It's the warm-up most pro animators run before any longer figure study — and the timer is the entire skill.</p>
1045        </div>
1046
1047        <div class="dg-facts" data-reveal>
1048            <div>
1049                <p class="dg-facts__label">Sign-up</p>
1050                <p class="dg-facts__value">No login required to start a timed session.</p>
1051            </div>
1052            <div>
1053                <p class="dg-facts__label">Devices</p>
1054                <p class="dg-facts__value">Tablet-friendly, lightweight UI. iOS, Android, tablet, desktop.</p>
1055            </div>
1056            <div>
1057                <p class="dg-facts__label">Homepage</p>
1058                <p class="dg-facts__value"><span class="ds-text ds-text--md ds-text--mono">drawgestures.com</span>
1059</p>
1060            </div>
1061            <div>
1062                <p class="dg-facts__label">Price</p>
1063                <p class="dg-facts__value">Free tier · Pro from $2.99 / month.</p>
1064            </div>
1065        </div>
1066
1067        <div class="dg-gdata" data-reveal data-reveal-delay="100">
1068            <h3 class="ds-heading ds-heading--sm">Why we request Google data.</h3>
1069            <p class="ds-text ds-text--md ds-text--muted dg-gdata__intro">Some features use your Google account to improve your experience, for example:</p>
1070            <div class="dg-gdata__grid">
1071                <div class="dg-gdata__item">
1072                    <span class="dg-gdata__ix">i</span>
1073                    <p class="ds-text ds-text--md ds-text--muted"><em>Sign in with Google</em> — sync preferences across devices.</p>
1074                </div>
1075                <div class="dg-gdata__item">
1076                    <span class="dg-gdata__ix">ii</span>
1077                    <p class="ds-text ds-text--md ds-text--muted"><em>Google Images search</em> — fetch public reference thumbnails.</p>
1078                </div>
1079                <div class="dg-gdata__item">
1080                    <span class="dg-gdata__ix">iii</span>
1081                    <p class="ds-text ds-text--md ds-text--muted"><em>Analytics</em> — understand anonymous usage and improve the app.</p>
1082                </div>
1083            </div>
1084            <p class="ds-text ds-text--sm ds-text--muted dg-gdata__legal">We only request the minimum necessary permissions and do not sell your data. Learn more in our <a href="https://drawgestures.com/privacy">Privacy Policy</a> · <a href="https://drawgestures.com/terms">Terms of Service</a>.</p>
1085        </div></div></section>
1086
1087
1088<section class="ds-section--lg dg-sec" id="features"><div class="ds-container"><div class="dg-section-head" data-reveal>
1089            <span class="dg-eyebrow">Features</span>
1090            <h2 class="ds-heading ds-heading--xl">Everything you need for <span class="ds-heading--gradient">better practice.</span></h2>
1091            <p class="ds-text ds-text--lg ds-text--subtle">Curated libraries, a distraction-free viewer, drawing tools that get out of your way, and rock-solid tablet support. Six things, done well, instead of fifty done badly.</p>
1092        </div>
1093
1094        <div class="dg-features">
1095                            <div class="dg-feature" data-reveal data-reveal-delay="0">
1096                    <div class="dg-feature__illo  dg-feature__illo--logo ">
1097                                                                                    <div class="dg-pins" aria-hidden="true">
1098                                                                            <div class="dg-pins__col" style="--offset: 1.5rem">
1099                                                                                            <sp
1099an class="dg-pins__cell" style="--h: 4.5rem; --hue: 12; --d: 0ms"></span>
1100                                                                                            <span class="dg-pins__cell" style="--h: 3.25rem; --hue: 200; --d: 140ms"></span>
1101                                                                                            <span class="dg-pins__cell" style="--h: 5.5rem; --hue: 95; --d: 280ms"></span>
1102                                                                                            <span class="dg-pins__cell" style="--h: 3.75rem; --hue: 330; --d: 420ms"></span>
1103                                                                                    </div>
1104                                                                            <div class="dg-pins__col" style="--offset: 0rem">
1105                                                                                            <span class="dg-pins__cell" style="--h: 3.5rem; --hue: 160; --d: 140ms"></span>
1106                                                                                            <span class="dg-pins__cell" style="--h: 6rem; --hue: 28; --d: 280ms"></span>
1107                                                                                            <span class="dg-pins__cell" style="--h: 4rem; --hue: 260; --d: 420ms"></span>
1108                                                                                            <span class="dg-pins__cell" style="--h: 3.5rem; --hue: 60; --d: 560ms"></span>
1109                                                                                    </div>
1110                                                                            <div class="dg-pins__col" style="--offset: 2.75rem">
1111                                                                                            <span class="dg-pins__cell" style="--h: 5.75rem; --hue: 290; --d: 280ms"></span>
1112                                                                                            <span class="dg-pins__cell" style="--h: 3.5rem; --hue: 45; --d: 420ms"></span>
1113                                                                                            <span class="dg-pins__cell" style="--h: 4.5rem; --hue: 180; --d: 560ms"></span>
1114                                                                                            <span class="dg-pins__cell" style="--h: 5rem; --hue: 12; --d: 700ms"></span>
1115                                                                                    </div>
1116                                                                            <div class="dg-pins__col" style="--offset: 0.75rem">
1117                                                                                            <span class="dg-pins__cell" style="--h: 3.75rem; --hue: 75; --d: 420ms"></span>
1118                                                                                            <span class="dg-pins__cell" style="--h: 5rem; --hue: 220; --d: 560ms"></span>
1119                                                                                            <span class="dg-pins__cell" style="--h: 3.5rem; --hue: 350; --d: 700ms"></span>
1120                                                                                            <span class="dg-pins__cell" style="--h: 5.5rem; --hue: 140; --d: 840ms"></span>
1121                                                                                    </div>
1122                                                                            <div class="dg-pins__col" style="--offset: 2rem">
1123                                                                                            <span class="dg-pins__cell" style="--h: 4.75rem; --hue: 240; --d: 560ms"></span>
1124                                                                                            <span class="dg-pins__cell" style="--h: 3.75rem; --hue: 10; --d: 700ms"></span>
1125                                                                                            <span class="dg-pins__cell" style="--h: 5.5rem; --hue: 120; --d: 840ms"></span>
1126                                                                                            <sp
1126an class="dg-pins__cell" style="--h: 3.5rem; --hue: 300; --d: 980ms"></span>
1127                                                                                    </div>
1128                                                                            <div class="dg-pins__col" style="--offset: 0.25rem">
1129                                                                                            <span class="dg-pins__cell" style="--h: 5.25rem; --hue: 35; --d: 700ms"></span>
1130                                                                                            <span class="dg-pins__cell" style="--h: 4.25rem; --hue: 170; --d: 840ms"></span>
1131                                                                                            <span class="dg-pins__cell" style="--h: 3.25rem; --hue: 270; --d: 980ms"></span>
1132                                                                                            <span class="dg-pins__cell" style="--h: 5rem; --hue: 85; --d: 1120ms"></span>
1133                                                                                    </div>
1134                                                                            <div class="dg-pins__col" style="--offset: 1.75rem">
1135                                                                                            <span class="dg-pins__cell" style="--h: 3.5rem; --hue: 320; --d: 840ms"></span>
1136                                                                                            <span class="dg-pins__cell" style="--h: 5.5rem; --hue: 110; --d: 980ms"></span>
1137                                                                                            <span class="dg-pins__cell" style="--h: 4rem; --hue: 20; --d: 1120ms"></span>
1138                                                                                            <span class="dg-pins__cell" style="--h: 4.5rem; --hue: 210; --d: 1260ms"></span>
1139                                                                                    </div>
1140                                                                    </div>
1141                                                        <span class="dg-feature__mark">
1142                                <svg class="sk-icon sk-icon--pinterest" width="52" height="52" viewBox="0 0 24 24" fill="#E60023" aria-hidden="true">
1143            <path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/>
1144        </svg>
1145                                    </span>
1146                                            </div>
1147                    <div class="dg-feature__head">
1148                        <span class="dg-feature__num">01</span>
1149                        <h3 class="ds-heading ds-heading--sm"><em>Pinterest</em> library</h3>
1150                    </div>
1151                    <p class="ds-text ds-text--md ds-text--muted">Browse and stream poses directly from any Pinterest board. Boards refresh; your library stays fresh forever.</p>
1152                </div>
1153                            <div class="dg-feature" data-reveal data-reveal-delay="90">
1154                    <div class="dg-feature__illo  dg-feature__illo--logo ">
1155                                                                                    <div class="dg-drive" aria-hidden="true">
1156                                                                            <span class="dg-drive__folder" style="--d: 0ms">
1157                                            <svg class="dg-drive__icon is-grey" viewBox="0 0 24 24" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1158                                            <span class="dg-drive__name" style="--w: 72%"></span>
1159                                        </span>
1160                                                                            <span class="dg-drive__folder" style="--d: 110ms">
1161                                            <svg class="dg-drive__icon" viewBox="0 0 24 24"  style="--hue: 215" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1162                                            <span class="dg-drive__name" style="--w: 58%"></span>
1163                                        </span>
1164                                                                            <span class="dg-drive__folder" style="--d: 220ms">
1165                                            <svg class="dg-drive__icon is-grey" viewBox="0 0 24 24" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1166                                            <span class="dg-drive__name" style="--w: 80%"></span>
1167                                        </span>
1168                                                                            <span class="dg-drive__folder" style="--d: 330ms">
1169                                            <svg class="dg-drive__icon" viewBox="0 0 24 24"  style="--hue: 140" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1170                                            <span class="dg-drive__name" style="--w: 64%"></span>
1171                                        </span>
1172                                                                            <span class="dg-drive__folder" style="--d: 440ms">
1173                                            <svg class="dg-drive__icon is-grey" viewBox="0 0 24 24" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1174                                            <span class="dg-drive__name" style="--w: 52%"></span>
1175                                        </span>
1176                                                                            <span class="dg-drive__folder" style="--d: 550ms">
1177                                            <svg class="dg-drive__icon" viewBox="0 0 24 24"  style="--hue: 30" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1178                                            <span class="dg-drive__name" style="--w: 76%"></span>
1179                                        </span>
1180                                                                            <span class="dg-drive__folder" style="--d: 660ms">
1181                                            <svg class="dg-drive__icon is-grey" viewBox="0 0 24 24" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1182                                            <span class="dg-drive__name" style="--w: 60%"></span>
1183                                        </span>
1184                                                                            <span class="dg-drive__folder" style="--d: 770ms">
1185                                            <svg class="dg-drive__icon" viewBox="0 0 24 24"  style="--hue: 350" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1186                                            <span class="dg-drive__name" style="--w: 70%"></span>
1187                                        </span>
1188                                                                            <span class="dg-drive__folder" style="--d: 880ms">
1189                                            <svg class="dg-drive__icon is-grey" viewBox="0 0 24 24" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1190                                            <span class="dg-drive__name" style="--w: 66%"></span>
1191                                        </span>
1192                                                                            <span class="dg-drive__folder" style="--d: 990ms">
1193                                            <svg class="dg-drive__icon" viewB
1193ox="0 0 24 24"  style="--hue: 45" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1194                                            <span class="dg-drive__name" style="--w: 54%"></span>
1195                                        </span>
1196                                                                            <span class="dg-drive__folder" style="--d: 1100ms">
1197                                            <svg class="dg-drive__icon is-grey" viewBox="0 0 24 24" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1198                                            <span class="dg-drive__name" style="--w: 74%"></span>
1199                                        </span>
1200                                                                            <span class="dg-drive__folder" style="--d: 1210ms">
1201                                            <svg class="dg-drive__icon" viewBox="0 0 24 24"  style="--hue: 190" ><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
1202                                            <span class="dg-drive__name" style="--w: 62%"></span>
1203                                        </span>
1204                                                                    </div>
1205                                                        <span class="dg-feature__mark">
1206                                <svg class="sk-icon sk-icon--google-drive" width="52" height="52" viewBox="0 0 87.3 78" fill="none" aria-hidden="true">
1207            <path d="M6.6 66.85l3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8H0c0 1.55.4 3.1 1.2 4.5z" fill="#0066DA"/>
1208            <path d="M43.65 25L29.9 1.2c-1.35.8-2.5 1.9-3.3 3.3L1.2 48.5A9.06 9.06 0 0 0 0 53h27.5z" fill="#00AC47"/>
1209            <path d="M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5H59.798l5.852 11.5z" fill="#EA4335"/>
1210            <path d="M43.65 25L57.4 1.2C56.05.4 54.5 0 52.9 0H34.4c-1.6 0-3.15.45-4.5 1.2z" fill="#00832D"/>
1211            <path d="M59.8 53H27.5L13.75 76.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684FC"/>
1212            <path d="M73.4 26.5L60.7 4.5c-.8-1.4-1.95-2.5-3.3-3.3L43.65 25l16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#FFBA00"/>
1213        </svg>
1214                                    </span>
1215                                            </div>
1216                    <div class="dg-feature__head">
1217                        <span class="dg-feature__num">02</span>
1218                        <h3 class="ds-heading ds-heading--sm"><em>Google</em> library</h3>
1219                    </div>
1220                    <p class="ds-text ds-text--md ds-text--muted">Quickly search Google Images for references without leaving the app. Thumbnails fetched on demand.</p>
1221                </div>
1222                            <div class="dg-feature" data-reveal data-reveal-delay="0">
1223                    <div class="dg-feature__illo ">
1224                                                    <img src="https://drawgestures.com/images/illustrations/home_feature_cloud.webp" alt="" loading="lazy" decoding="async">
1225                                            </div>
1226                    <div class="dg-feature__head">
1227                        <span class="dg-feature__num">03</span>
1228                        <h3 class="ds-heading ds-heading--sm">Premium <em>cloud</em> library</h3>
1229                    </div>
1230                    <p class="ds-text ds-text--md ds-text--muted">Curated, ready-to-draw collections from our cloud. Always available, always fresh, no setup required.</p>
1231                </div>
1232                            <div class="dg-feature" data-reveal data-reveal-delay="90">
1233                    <div class="dg-feature__illo ">
1234                                                    <img src="https://drawgestures.com/images/illustrations/home_feature_draw_on_top.webp" alt="" loading="lazy" decoding="async">
1235                                            </div>
1236                    <div class="dg-feature__head">
1237                        <span class="dg-feature__num">04</span>
1238                        <h3 class="ds-heading ds-heading--sm">Draw on <em>top of image</em></h3>
1239                    </div>
1240                    <p class="ds-text ds-text--md ds-text--muted">Sketch rhythms and landmarks right on the reference with lightweight tools — pen, eraser, opacity, undo.</p>
1241                </div>
1242                            <div class="dg-feature" data-reveal data-reveal-delay="180">
1243                    <div class="dg-feature__illo ">
1244                                                    <img src="https://drawgestures.com/images/illustrations/home_feature_tablet.webp" alt="" loading="lazy" decoding="async">
1245                                            </div>
1246                    <div class="dg-feature__head">
1247                        <span class="dg-feature__num">05</span>
1248                        <h3 class="ds-heading ds-heading--sm"><em>Tablet</em> support</h3>
1249                    </div>
1250                    <p class="ds-text ds-text--md ds-text--muted">Optimised for iPad and Android tablets. Pen input, palm rejection, keyboard shortcuts. Works on desktop too.</p>
1251                </div>
1252                            <div class="dg-feature" data-reveal data-reveal-delay="0">
1253                    <div class="dg-feature__illo ">
1254                                                    <img src="https://drawgestures.com/images/illustrations/home_feature_timer.webp" alt="" loading="lazy" decoding="async">
1255                                            </div>
1256                    <div class="dg-feature__head">
1257                        <span class="dg-feature__num">06</span>
1258                        <h3 class="ds-heading ds-heading--sm">Gesture drawing <em>timer</em></h3>
1259                    </div>
1260                    <p class="ds-text ds-text--md ds-text--muted">A drawing timer from 30-second gestures to long-form figure work, with auto-advance and shuffle. The pressure is the practice.</p>
1261                </div>
1262                    </div></div></section>
1263
1264
1265<section class="ds-section--lg dg-sec" id="timer"><div class="ds-container"><div class="dg-section-head" data-reveal>
1266            <span class="dg-eyebrow">Drawing timer</span>
1267            <h2 class="ds-heading ds-heading--xl">A gesture drawing timer that <span class="ds-heading--gradient">keeps you honest.</span></h2>
1268            <p class="ds-text ds-text--lg ds-text--subtle">The timer is the skill. It caps every pose, advances to the next reference on its own, and stops you fussing over details. Pick a preset, press start, draw.</p>
1269        </div>
1270
1271        <ol class="dg-timer" data-reveal>
1272                            <li class="dg-timer__item">
1273                    <span class="dg-timer__time">30s</span>
1274                    <span class="dg-timer__label">Warm-up</span>
1275                    <span class="ds-text ds-text--sm ds-text--muted">Line of action and commitment. Always start here.</span>
1276                </li>
1277                            <li class="dg-timer__item">
1278                    <span class="dg-timer__time">1m</span>
1279                    <span class="dg-timer__label">Daily bulk</span>
1280                    <span class="ds-text ds-text--sm ds-text--muted">Line of action plus rhythm through the pose.</span>
1281                </li>
1282                            <li class="dg-timer__item">
1283                    <span class="dg-timer__time">2m</span>
1284                    <span class="dg-timer__label">Masses</span>
1285                    <span class="ds-text ds-text--sm ds-text--muted">Add the ribcage and pelvis once you are warm.</span>
1286                </li>
1287                            <li class="dg-timer__item">
1288                    <span class="dg-timer__time">5m</span>
1289                    <span class="dg-timer__label">Block-in</span>
1290                    <span class="ds-text ds-text--sm ds-text--muted">Light construction. Crosses into figure drawing.</span>
1291                </li>
1292                            <li class="dg-timer__item">
1293                    <span class="dg-timer__time">10m</span>
1294                    <span class="dg-timer__label">Long pose</span>
1295                    <span class="ds-text ds-text--sm ds-text--muted">Construction and anatomy. Save it for the end.</span>
1296                </li>
1297                    </ol>
1298
1299        <div class="dg-cta-row" data-reveal>
1300            <a href="https://app.drawgestures.com" class="ds-btn ds-btn--primary ds-btn--lg" data-cta="start_practice" data-cta-location="home_timer" data-cta-destination="web_app" ><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1301            <path d="M8 5.5l10 6.5-10 6.5V5.5z"/>
1302        </svg>
1303                        Open the timer in your browser</a>
1304            <a href="https://drawgestures.com/guides/drawing-timer" class="ds-btn ds-btn--ghost ds-btn--lg" >How to use a drawing timer →</a>
1305        </div></div></section>
1306
1307
1308<section class="ds-section--lg dg-sec dg-reviews" id="reviews"><div class="dg-section-head" data-reveal>
1309        <span class="dg-eyebrow">From the field</span>
1310        <h2 class="ds-heading ds-heading--xl">What <span class="ds-heading--gradient">artists</span> are saying.</h2>
1311        <div class="dg-reviews__avg">
1312            <span class="dg-reviews__num" id="dg-rating-num">4.6</span>
1313            <span class="ds-text ds-text--md ds-text--muted"><span class="dg-stars" aria-hidden="true">★★★★★</span> · <span id="dg-rating-count">2,100+</span> reviews</span>
1314        </div>
1315    </div>
1316
1317    <div class="dg-marquee">
1318        <div class="dg-marquee__track">
1319                            <div class="dg-marquee__copy " >
1320                                            <div class="dg-review">
1321                            <span class="dg-stars" aria-hidden="true">★★★★★</span>
1322                            <blockquote>Great app for timed gesture drawing sessions.</blockquote>
1323                            <div class="ds-text ds-text--sm ds-text--muted">Google Play · v3.7.1 · 2023</div>
1324                        </div>
1325                                            <div class="dg-review">
1326                            <span class="dg-stars" aria-hidden="true">★★★★★</span>
1327                            <blockquote>Pinterest feature works perfectly now! Best app for gesture drawing.</blockquote>
1328                            <div class="ds-text ds-text--sm ds-text--muted">Google Play · v3.6.4 · 2019</div>
1329                        </div>
1330                                            <div class="dg-review">
1331                            <span class="dg-stars" aria-hidden="true">★★★★★</span>
1332                            <blockquote>There&#039;s a great collection of images of all kinds already in the app. Offline works too.</blockquote>
1333                            <div class="ds-text ds-text--sm ds-text--muted">Google Play · v6.3.2 · 2023</div>
1334                        </div>
1335                                            <div class="dg-review">
1336                            <span class="dg-stars" aria-hidden="true">★★★★<span class="dg-stars--dim">★</span></span>
1337                            <blockquote>Simple to use and functional. Great alternative if you can&#039;t be online 24/7.</blockquote>
1338                            <div class="ds-text ds-text--sm ds-text--muted">Community Feedback · 2023</div>
1339                        </div>
1340                                    </div>
1341                            <div class="dg-marquee__copy dg-marquee__copy--dup"  aria-hidden="true" >
1342                                            <div class="dg-review">
1343                            <span class="dg-stars" aria-hidden="true">★★★★★</span>
1344                            <blockquote>Great app for timed gesture drawing sessions.</blockquote>
1345                            <div class="ds-text ds-text--sm ds-text--muted">Google Play · v3.7.1 · 2023</div>
1346                        </div>
1347                                            <div class="dg-review">
1348                            <span class="dg-stars" aria-hidden="true">★★★★★</span>
1349                            <blockquote>Pinterest feature works perfectly now! Best app for gesture drawing.</blockquote>
1350                            <div class="ds-text ds-text--sm ds-text--muted">Google Play · v3.6.4 · 2019</div>
1351                        </div>
1352                                            <div class="dg-review">
1353                            <span class="dg-stars" aria-hidden="true">★★★★★</span>
1354                            <blockquote>There&#039;s a great collection of images of all kinds already in the app. Offline works too.</blockquote>
1355                            <div class="ds-text ds-text--sm ds-text--muted">Google Play · v6.3.2 · 2023</div>
1356                        </div>
1357                                            <div class="dg-review">
1358                            <span class="dg-stars" aria-hidden="true">★★★★<span class="dg-stars--dim">★</span></span>
1359                            <blockquote>Simple to use and functional. Great alternative if you can&#039;t be online 24/7.</blockquote>
1360                            <div class="ds-text ds-text--sm ds-text--muted">Community Feedback · 2023</div>
1361                        </div>
1362                                    </div>
1363                    </div>
1364    </div></section>
1365
1366
1367<section class="ds-section--lg dg-sec" id="guides"><div class="ds-container"><div class="dg-section-head" data-reveal>
1368            <span class="dg-eyebrow">Guides</span>
1369            <h2 class="ds-heading ds-heading--xl">Learn the craft, <span class="ds-heading--gradient">then practise it.</span></h2>
1370            <p class="ds-text ds-text--lg ds-text--subtle">Free written guides on gesture drawing — what it is, how to practise, and the drills that actually work.</p>
1371        </div>
1372
1373        <div class="dg-guides">
1374                            <a href="https://drawgestures.com/guides/what-is-gesture-drawing" class="dg-guide" data-reveal data-reveal-delay="0">
1375                    <div class="dg-guide__img">
1376                        <img src="https://drawgestures.com/images/illustrations/guide-what-is-gesture-drawing.webp" alt="" loading="lazy" decoding="async">
1377                    </div>
1378                    <h3 class="ds-heading ds-heading--xs">What Is Gesture Drawing? A Complete Beginner&#039;s Guide</h3>
1379                    <div class="dg-guide__more">Read the guide →</div>
1380                </a>
1381                            <a href="https://drawgestures.com/guides/gesture-drawing-exercises" class="dg-guide" data-reveal data-reveal-delay="90">
1382                    <div class="dg-guide__img">
1383                        <img src="https://drawgestures.com/images/illustrations/guide-gesture-drawing-exercises.webp" alt="" loading="lazy" decoding="async">
1384                    </div>
1385                    <h3 class="ds-heading ds-heading--xs">Gesture Drawing Exercises That Actually Work (10 Drills)</h3>
1386                    <div class="dg-guide__more">Read the guide →</div>
1387                </a>
1388                            <a href="https://drawgestures.com/guides/gesture-drawing-tips-for-beginners" class="dg-guide" data-reveal data-reveal-delay="180">
1389                    <div class="dg-guide__img">
1390                        <img src="https://drawgestures.com/images/illustrations/guide-gesture-drawing-tips-for-beginners.webp" alt="" loading="lazy" decoding="async">
1391                    </div>
1392                    <h3 class="ds-heading ds-heading--xs">Gesture Drawing Tips for Beginners (and 7 Mistakes to Avoid)</h3>
1393                    <div class="dg-guide__more">Read the guide →</div>
1394                </a>
1395                    </div>
1396
1397        <div class="dg-guides__all">
1398            <a href="https://drawgestures.com/guides" class="ds-btn ds-btn--ghost ds-btn--md" >Browse all guides →</a>
1399        </div></div></section>
1400
1401
1402<section class="ds-section--lg dg-sec" id="faq"><div class="ds-container"><div class="dg-section-head" data-reveal>
1403            <span class="dg-eyebrow">FAQ</span>
1404            <h2 class="ds-heading ds-heading--xl">Gesture drawing online, <span class="ds-heading--gradient">answered.</span></h2>
1405        </div>
1406
1407        <div class="dg-faq" data-reveal>
1408                            <details class="dg-faq__item">
1409                    <summary>What is gesture drawing?</summary>
1410                    <p class="ds-text ds-text--md ds-text--muted">Gesture drawing is a quick sketch, usually 30 seconds to 2 minutes, that captures the movement, energy and rhythm of a pose rather than its details. Artists and animators use it as a daily warm-up and as the foundation of figure drawing.</p>
1411                </details>
1412                            <details class="dg-faq__item">
1413                    <summary>Is DrawGestures a free gesture drawing app?</summary>
1414                    <p class="ds-text ds-text--md ds-text--muted">Yes. The drawing timer, timed sessions and curated reference poses are free on the web, iOS and Android, with no sign-up and no ads. Pro, from $2.99 a month, adds Pinterest and cloud imports, custom intervals and extra session modes.</p>
1415                </details>
1416                            <details class="dg-faq__item">
1417                    <summary>Can I practise gesture drawing online in my browser?</summary>
1418                    <p class="ds-text ds-text--md ds-text--muted">Yes. Open the DrawGestures web app, pick a reference library, set the drawing timer and start drawing. Nothing to install. The same sessions are available in the iOS, Android and desktop apps.</p>
1419                </details>
1420                            <details class="dg-faq__item">
1421                    <summary>What timer intervals should I use for gesture drawing?</summary>
1422                    <p class="ds-text ds-text--md ds-text--muted">Start with ten 30-second poses to warm up, then move to 1 or 2 minutes for the bulk of the session. Anything from 5 minutes up is closer to figure drawing than gesture drawing.</p>
1423                </details>
1424                            <details class="dg-faq__item">
1425                    <summary>Does the gesture drawing timer advance automatically?</summary>
1426                    <p class="ds-text ds-text--md ds-text--muted">Yes. When the interval ends the next reference image appears on its own, so you never stop to click. Tur
1426n on shuffle to see poses in random order.</p>
1427                </details>
1428                            <details class="dg-faq__item">
1429                    <summary>Which devices does DrawGestures work on?</summary>
1430                    <p class="ds-text ds-text--md ds-text--muted">Any modern browser, iPhone and iPad, Android phones and tablets, Windows and macOS. The app is built for tablets, with pen input and drawing on top of the reference.</p>
1431                </details>
1432                    </div></div></section>
1433
1434
1435<section id="download" class="dg-cta" aria-labelledby="dg-cta-heading">
1436    <div class="dg-cta__inner" data-reveal>
1437        <span class="ds-chip ds-chip--accent ds-chip--sm">Ready · Stop reading · Start drawing</span>
1438        <h2 class="ds-heading ds-heading--xl" id="dg-cta-heading">Ready to improve <span class="ds-heading--gradient">your gestures?</span></h2>
1439        <p class="ds-text ds-text--lg ds-text--subtle dg-cta__lede">Start a focused session in seconds — no sign-up required. Free tier ships with timed sessions, reference images and progress tracking.</p>
1440        <div class="dg-cta-row">
1441            <a href="https://apps.apple.com/us/app/draw-gestures-figure-drawing/id1552057070" class="ds-btn ds-btn--primary ds-btn--lg" rel="noopener" target="_blank" data-cta="download_app" data-cta-location="home_footer_cta" data-cta-destination="ios" ><svg class="sk-icon sk-icon--apple" width="18" height="18" viewBox="0 0 32 38" fill="currentColor" aria-hidden="true">
1442            <path d="M26.2264 20.0113C26.1825 15.2574 30.2187 12.9446 30.4033 12.8369C28.1174 9.5875 24.5744 9.14352 23.3293 9.10812C20.3536 8.8028 17.4672 10.8442 15.9513 10.8442C14.4052 10.8442 12.0709 9.13762 9.55512 9.18777C6.31768 9.23645 3.28902 11.064 1.62794 13.9019C-1.80011 19.6883 0.756555 28.1917 4.04089 32.8689C5.68381 35.1596 7.60358 37.7172 10.1164 37.6272C12.5747 37.5284 13.493 36.0991 16.4596 36.0991C19.399 36.0991 20.2613 37.6272 22.8241 37.5697C25.4624 37.5284 27.1235 35.2687 28.7089 32.9574C30.6075 30.3319 31.37 27.7462 31.4002 27.6135C31.3382 27.5928 26.2763 25.7092 26.2264 20.0113Z"/>
1443            <path d="M21.3854 6.03127C22.7076 4.4191 23.6122 2.22577 23.3611 0C21.4474 0.0826 19.0541 1.29063 17.6759 2.8674C16.4566 4.25685 15.3674 6.53425 15.6488 8.67595C17.7985 8.8323 20.0057 7.61837 21.3854 6.03127Z"/>
1444        </svg>
1445                        App Store</a>
1446            <a href="https://play.google.com/store/apps/details?id=com.darkmat13r.gesturedrawing&amp;amp;hl=en" class="ds-btn ds-btn--secondary ds-btn--lg" rel="noopener" target="_blank" data-cta="download_app" data-cta-location="home_footer_cta" data-cta-destination="android" ><svg class="sk-icon sk-icon--google-play" width="18" height="18" viewBox="0 0 35 38" fill="none" aria-hidden="true">
1447            <path d="M0.700605 0.585646C0.256825 1.03921 0 1.74537 0 2.65986V35.2795C0 36.194 0.256825 36.9002 0.700605 37.3537L0.810134 37.4533L19.532 19.1817V18.7503L0.810134 0.478712L0.700605 0.585646Z" fill="url(#sk-gplay-a)"/>
1448            <path d="M25.7656 25.2753L19.532 19.1817V18.7503L25.7732 12.6567L25.9129 12.736L33.3042 16.842C35.4136 18.0072 35.4136 19.9247 33.3042 21.0974L25.9129 25.196L25.7656 25.2753Z" fill="url(#sk-gplay-b)"/>
1449            <path d="M25.9129 25.196L19.5319 18.966L0.700562 37.3537C1.40117 38.0728 2.54366 38.1594 3.8429 37.4404L25.9129 25.196Z" fill="url(#sk-gplay-c)"/>
1450            <path d="M25.9129 12.736L3.8429 0.491649C2.54366 -0.220038 1.40117 -0.133384 0.700562 0.585678L19.5319 18.966L25.9129 12.736Z" fill="url(#sk-gplay-d)"/>
1451            <defs>
1452                <linearGradient id="sk-gplay-a" x1="17.8697" y1="35.6192" x2="-6.87723" y2="10.2726" gradientUnits="userSpaceOnUse">
1453                    <stop stop-color="#00A0FF"/>
1454                    <stop offset="0.0066" stop-color="#00A1FF"/>
1455                    <stop offset="0.2601" stop-color="#00BEFF"/>
1456                    <stop offset="0.5122" stop-color="#00D2FF"/>
1457                    <stop offset="0.7604" stop-color="#00DFFF"/>
1458                    <stop offset="1" stop-color="#00E3FF"/>
1459                </linearGradient>
1460                <linearGradient id="sk-gplay-b" x1="36.051" y1="18.9639" x2="-0.504247" y2="18.9639" gradientUnits="userSpaceOnUse">
1461                    <stop stop-color="#FFE000"/>
1462                    <stop offset="0.4087" stop-color="#FFBD00"/>
1463                    <stop offset="0.7754" stop-color="#FFA500"/>
1464                    <stop offset="1" stop-color="#FF9C00"/>
1465                </linearGradient>
1466                <linearGradient id="sk-gplay-c" x1="22.4431" y1="15.5793" x2="-11.1157" y2="-18.7928" gradientUnits="userSpaceOnUse">
1467                    <stop stop-color="#FF3A44"/>
1468                    <stop offset="1" stop-color="#C31162"/>
1469                </linearGradient>
1470                <linearGradient id="sk-gplay-d" x1="-4.03969" y1="48.2061" x2="10.9459" y2="32.8576" gradientUnits="userSpaceOnUse">
1471                    <stop stop-color="#32A071"/>
1472                    <stop offset="0.0685" stop-color="#2DA771"/>
1473                    <stop offset="0.4762" stop-color="#15CF74"/>
1474                    <stop offset="0.8009" stop-color="#06E775"/>
1475                    <stop offset="1" stop-color="#00F076"/>
1476                </linearGradient>
1477            </defs>
1478        </svg>
1479                        Google Play</a>
1480            <a href="https://drawgestures.com/download" class="ds-btn ds-btn--ghost ds-btn--lg" data-cta="download_app" data-cta-location="home_footer_cta" data-cta-destination="download_page" >Smart download</a>
1481        </div>
1482        <p class="ds-text ds-text--sm ds-text--muted dg-cta__note">Free to start · No sign-up · iOS · Android · Tablet</p>
1483    </div>
1484</section>
1485
1486</main>
1487
1488<footer class="ds-footer">
1489    <div class="ds-container"><div class="ds-footer__grid">
1490            <div class="ds-footer__brand">
1491                <p class="ds-footer__wordmark">DrawGestures</p>
1492                <p class="ds-footer__tagline">Gesture drawing practice for artists — timed figure drawing sessions on iOS and Android.</p>
1493                <div class="ds-footer__socials">
1494                    <a href="https://www.instagram.com/drawgestures/" rel="noopener me" target="_blank" aria-label="DrawGestures on Instagram" title="Instagram">
1495                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
1496                    </a>
1497                    <a href="https://x.com/drawgestures" rel="noopener me" target="_blank" aria-label="DrawGestures on X" title="X">
1498                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.53 3h3.02l-6.6 7.54L21.75 21h-5.9l-4.62-6.03L5.94 21H2.92l7.06-8.07L2.5 3h6.05l4.18 5.52L17.53 3Zm-1.06 16.2h1.67L7.6 4.71H5.81L16.47 19.2Z"/></svg>
1499                    </a>
1500                </div>
1501            </div>
1502
1503            <div>
1504                <p class="ds-footer__heading">Explore</p>
1505                <ul class="ds-footer__links">
1506                    <li><a href="https://drawgestures.com/about">About</a></li>
1507                    <li><a href="https://drawgestures.com/guides">Guides</a></li>
1508                    <li><a href="https://drawgestures.com/pricing">Pricing</a></li>
1509                    <li><a href="https://drawgestures.com/challenge">Challenge</a></li>
1510                </ul>
1511            </div>
1512
1513            <div>
1514                <p class="ds-footer__heading">Legal &amp; Help</p>
1515                <ul class="ds-footer__links">
1516                    <li><a href="https://drawgestures.com/privacy">Privacy Policy</a></li>
1517                    <li><a href="https://drawgestures.com/terms">Terms of Service</a></li>
1518                    <li><a href="https://drawgestures.com/refund">Refund Policy</a></li>
1519                    <li><a href="https://drawgestures.com/support">Support</a></li>
1520                </ul>
1521            </div>
1522
1523            <div>
1524                <p class="ds-footer__heading">Get the App</p>
1525                <div class="ds-footer__badges">
1526                    <a href="https://apps.apple.com/us/app/draw-gestures-figure-drawing/id1552057070" rel="noopener" target="_blank" aria-label="Download on the App Store">
1527                        <img src="https://drawgestures.com/images/app-store-badge.png" alt="Download on the App Store" loading="lazy">
1528                    </a>
1529                    <a href="https://play.google.com/store/apps/details?id=com.darkmat13r.gesturedrawing" rel="noopener" target="_blank" aria-label="Get it on Google Play">
1530                        <img src="https://drawgestures.com/images/google-play-badge.png" alt="Get it on Google Play" loading="lazy">
1531                    </a>
1532                </div>
1533            </div>
1534        </div>
1535
1536        <div class="ds-footer__bottom">
1537            <p class="ds-footer__copyright">&copy; 2026 Dark Matter. All rights reserved.</p>
1538            <p class="ds-footer__copyright">Made for artists, by artists.</p>
1539        </div></div>
1540</footer>
1541
1542<script>
1543(function () {
1544    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
1545    if (!('IntersectionObserver' in window)) return;
1546
1547    document.documentElement.classList.add('dg-js');
1548
1549    var revealed = document.querySelectorAll('[data-reveal]');
1550    var io = new IntersectionObserver(function (entries) {
1551        entries.forEach(function (entry) {
1552            if (!entry.isIntersecting) return;
1553            var el = entry.target;
1554            el.style.setProperty('--reveal-delay', (el.getAttribute('data-reveal-delay') || 0) + 'ms');
1555            el.classList.add('is-in');
1556            io.unobserve(el);
1557        });
1558    }, { threshold: 0.15 });
1559    revealed.forEach(function (el) { io.observe(el); });
1560
1561    var num = document.getElementById('dg-rating-num');
1562    var count = document.getElementById('dg-rating-count');
1563    var host = document.getElementById('reviews');
1564    if (!num || !host) return;
1565    var counted = false;
1566    var ioCount = new IntersectionObserver(function (entries) {
1567        if (counted || !entries.some(function (e) { return e.isIntersecting; })) return;
1568        counted = true;
1569        ioCount.disconnect();
1570        var t0 = performance.now(), dur = 1400;
1571        var tick = function (t) {
1572            var p = Math.min(1, (t - t0) / dur);
1573            var eased = 1 - Math.pow(1 - p, 3);
1574            num.textContent = (4.6 * eased).toFixed(1);
1575            if (count) count.textContent = p < 1 ? Math.round(2100 * eased).toLocaleString() : '2,100+';
1576            if (p < 1) requestAnimationFrame(tick);
1577        };
1578        requestAnimationFrame(tick);
1579    }, { threshold: 0.3 });
1580    ioCount.observe(host);
1581})();
1582</script>
1582
1583</body>
1584</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.