Design & Graphics
SVG, Three.js, D3.js, GSAP, WebGL, Canvas, Chart.js & more
Design & Graphics covers UI/UX design, SVG, HTML Canvas, WebGL, Three.js, color theory, typography, and animation techniques for the web. Start with the fundamentals and progress to advanced 3D graphics and animation.
Tutorials in This Section
Learning Path
flowchart LR
A[UI/UX Fundamentals] --> B[Color Theory]
B --> C[Typography]
C --> D[SVG Animation]
D --> E[Canvas 2D]
E --> F[WebGL]
F --> G[Three.js]
Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.
Published Topics
Three.js 3D Graphics Guide
Learn Three.js: scenes, cameras, renderers, geometries, materials, lighting, animations, and building 3D web experiences with Three.js.
✓ LiveWebGL Graphics Guide
Learn WebGL: shaders, buffers, vertices, textures, and low-level GPU programming for high-performance 2D and 3D graphics in the browser.
✓ LiveBabylon.js 3D Engine Guide
Learn Babylon.js: scenes, cameras, lighting, physics, animations, GUI, and building immersive 3D experiences for web, VR, and AR.
✓ LiveD3.js Data Visualization Guide
Learn D3.js: data joins, scales, axes, SVG charts, transitions, and building interactive data visualizations with the D3 JavaScript library.
✓ LiveChart.js Guide
Learn Chart.js: line, bar, pie, doughnut, radar, scatter charts, configuration, animations, and building responsive charts with the lightweight JavaScript library.
✓ LiveHighCharts Library Guide
Learn HighCharts: interactive charts, stock charts, maps, accessibility, responsive configuration, and building enterprise-grade data visualizations.
✓ LiveSVG Graphics Guide
Learn SVG: shapes, paths, gradients, filters, animations, transformations, and creating scalable vector graphics for the web.
✓ LiveLeaflet.js — Complete Open-Source Interactive Maps Guide
>- Master Leaflet.js: tile layers, markers, popups, GeoJSON, custom controls, plugins, and building mobile-friendly interactive web maps for free.
✓ LiveDC.js — Complete Dimensional Charting & Crossfilter Guide
>- Master DC.js: dimensional charting, Crossfilter integration, interactive dashboards, brushing, and multi-dimensional data visualization.
✓ LiveGoogle Maps JavaScript API — Complete Maps Integration Guide
>- Master Google Maps API: markers, info windows, directions, Places Autocomplete, Street View, custom overlays, and embedding maps in web apps.
✓ LiveAdobe Flex Framework — Complete Legacy RIA Guide
>- Master Adobe Flex: MXML markup, ActionScript, data binding, UI components, states, effects, and migration strategies for legacy Flash applications.
✓ LiveAngular Google Charts — Complete Integration Guide
>- Master Angular Google Charts: NgModule setup, chart components, data tables, options, dynamic updates, and building interactive data dashboards in Angular.
✓ LiveAngular Highcharts — Complete Enterprise Dashboard Guide
>- Master Angular Highcharts: highcharts-angular integration, chart options, responsive rules, data binding, and building enterprise-grade dashboards.
✓ LiveAdvanced Canvas: Animations, Pixel Manipulation & Games
Master HTML Canvas: requestAnimationFrame, ImageData pixel effects, sprite animation, hit detection, and canvas vs WebGL trade-offs for browser-based games.
✓ LiveWebGL Fundamentals: 3D Graphics in the Browser
Learn WebGL: shaders (vertex/fragment), buffers, textures, matrices, rendering pipeline, and building a basic 3D scene without Three.js.
✓ LiveThree.js Deep Dive: 3D Scenes, Lighting & Post-Processing
Master Three.js: scene graph, perspective/orthographic cameras, ambient/directional/point/spot lights, shadows, bloom/DOF post-processing, and GLTF model loading.
✓ LiveSVG Animation: CSS, SMIL & JavaScript Techniques
Master SVG animation: viewBox coordinate system, paths and groups, CSS keyframe animations, SMIL animate/animateTransform, JS libraries (GSAP, anime.js), and interactive SVGs.
✓ LiveUI/UX Design Fundamentals for Developers
Learn UI/UX design: contrast, repetition, alignment, proximity (CRAP) principles, layout grids, visual hierarchy, wireframing, prototyping with Figma, and developer handoff.
✓ LiveColor Theory for Web Developers
Understand color theory: RGB, HSL, LAB color models, monochromatic/complementary/triadic schemes, WCAG accessibility contrast ratios, tools like Coolors/Adobe Color, and CSS custom properties for theming.
✓ LiveTypography for the Web: Fonts, Readability & Performance
Master web typography: @font-face rule, Google Fonts, FOUT/FOIT/swap font loading, system fonts, variable fonts, line-height/measure, responsive typography, and performance optimization.
✓ LiveAll 20 topics in Design & Graphics are published.