Awesome Web Graphics

🎨 A collection of WEB Graphics 💄

• Web Graphics
  • Basic
  • Browser
  • Font
  • Color
  • Image
  • Video
  • Articles
• DOM
  • HTML
  • Animation
• CSS
  • Basic
  • CSS Style
  • CSS Layout
  • CSS System
  • CSS Animation
• SVG
• Canvas
  • Basic
  • Library
  • Articles
• WebGL
  • Basic
  • Library
  • Articles
• ETC
  • Reference Site
  • Interactive pages

🌎 Web Graphics

The World Wide Web (WWW) is an information system where documents and other web resources are identified by Uniform Resource Locators (URLs, such as https://www.example.com/), which may be interlinked by hypertext, and are accessible over the Internet. -Wikipedia

Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate, or emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces. - W3C

Basic

• Graphics | Wikipedia
• Graphics | W3C
• Web media technologies | MDN

Browser

• How Browsers Work: Behind the scenes of modern web browsers - Tali Garsiel
• Chromium Blog
• Critical Rendering Path | Web Google Developers
• Fast load times | web.dev
• 🇰🇷브라우저는 어떻게 동작하는가? | naver D2
• 🇰🇷웹페이지의 로딩과 렌더링 성능 최적화 | TOAST UI

Font

• CSS Fonts Module Level 3 | W3C
• 🇰🇷TTF? OTF? 차이점 알아보기 - ZeddiOS
• 🇰🇷리온산스 - 아들을 위해 디자인한 코드로 만든 폰트 - 인터랙티브 디벨로퍼
• 📕Google Fonts
• 📕Adobe Font
• 📕DaFont
• 📕🇰🇷awesome-hangul
• 📕🇰🇷눈누

Color

• Picular - A rocket fast primary color generator using Google’s image search [picular.co]

Image

• What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG? | stack overflow

Video

• Video and audio content | MDN
• Manipulating video using canvas | MDN

Articles

• Move over, data visualization. The era of ‘data simulation’ is here - Amanda Makulec

🕹 DOM

The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML document. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment). - MDN

HTML

• HTML5 | MDN
• HTML Standard | html.spec.whatwg.org

Animation

• 📕GSAP (GreenSock Animation Platform)
• 10+ Best JavaScript Animation Libraries to Use in 2022
• 📕animejs

💄 CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. - MDN

Basic

• CSS: Cascading Style Sheets | MDN
• CSS Diner

CSS Style

• Redesigning your product and website for dark mode - Andy Clarke
• 📕CSS Gradient
• 📕Transparent Textures

CSS Layout

• Flexbox playground | CodePen
• A collection of popular layouts and patterns made with CSS - CSS Layout
• 🇰🇷flexbox로 만들 수 있는 10가지 레이아웃 | Naver D2
• 📕Mansory | Cascading grid layout library
• 📕Muuri - Infinite layouts with batteries included

CSS System

• 📕SASS
• 📕styled-components
• 📕Material-UI
• 📕Ant Design
• 📕bootstrap

CSS Animation

• Performance monitoring in CSS animations - Virendra Singh
• 📕Ceaser - CSS Easing Animation Tool
• 📕Lottie
• 📕Barba.js
• 📕Scene.js
• 🇰🇷CSS 애니메이션의 성능 아는 만큼 좋아져요! | WIT블로그
• 🇰🇷최연규 - 3달간 GitHub 스타3K받은 Scene js,Moveable 오픈소스 개발기 | FE CONF

📐 SVG

Scalable Vector Graphics (SVG) is a 2D vector image format based on an XML syntax. As a vector image format, SVG graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen size. SVG also provides a useful set of tools, such as clipping, masking, filters, and animations. - MDN

• A Deep Dive Into The Wonderful World Of SVG Displacement Filtering — Smashing Magazine

🎨 Canvas

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing. - MDN

Basic

• canvas API | MDN
• Canvas Debugging | WebKit
• Basic animations | MDN

Library

• 📕p5.js
• 📕Fabric.js
• 📕Konva.js
• 📕html2canvas

Articles

• 🇰🇷[Track 1-4] 유상엽 - HTML Canvas 어디까지 써봤니 | FEConf Korea
• 🇰🇷SVG와 CANVAS 사이의 선택

🤹‍♀️ WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device. - MDN

Basic

• WebGL - Web API | MDN
• WebGL Fundamentals
• webGL Guide - Maxime Euzière
• WebGL Tutorial - Tutorialspoint
• The OpenGL® ES Shading Language specs
• Matrix math for the web | MDN
• 🇰🇷OpenGL - 나무위키
• User Interaction in WebGL - CRAN
• 🇰🇷WebGL이란 무엇인가(+ HTML Canvas, WebGL 기초)
• Three.js Journey — Learn WebGL with Three.js

Library

• 📕PixyJS
• 📕three.js

Articles

• 🇰🇷[A3] 생각보다 쉬운 webGL (feat. three.js) - 전기환 | FEConf Korea
• 🇰🇷Canvas & WebGL을 이용한 이미지 필터 제작 | Naver D2
• 🇰🇷나의 버건디 팔면체 : Three.js를 사용한 3D 그래픽스 입문기

🌈 ETC

Reference Site

• codepen.io
• awwwards
• CSS Design Awards
• Interactive Developer - YouTube

Interactive pages

• How big is the DMZ? - Washington Post
• apple - AirPods Pro
• <Yasio/> Portfolio
• TULP interactive
• Google I/O Collaboration of the cosmos
• 30 experimental webgl websites
• SPACEX - ISS Docking Simulator
• The Virtual Economy | L'Atelier
• The A-Z of AI
• Alan Menken
• 🇰🇷JSConf Korea 2020 | JSConf Korea
• 🇰🇷중앙일보 - 그 곳 판문점
• 🇰🇷NC SOFT
• Arno Di Nunzio — Freelance creative developer
• bruno-simon
• https://www.cassie.codes/
• 🇰🇷춘식이 관찰일기

ETC...

• https://vimeo.com/showcase/9336062/video/685266929