├── LICENSE
└── README.md
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Taeeun Kim
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
Awesome Web Graphics
2 |
3 |
4 |
5 |
6 |
7 |
8 |
🎨 A collection of WEB Graphics 💄
9 |
10 |
11 |
12 |
13 | - [Web Graphics](#-web-graphics)
14 | - [Basic](#basic)
15 | - [Browser](#browser)
16 | - [Font](#font)
17 | - [Color](#color)
18 | - [Image](#image)
19 | - [Video](#video)
20 | - [Articles](#articles)
21 | - [DOM](#-dom)
22 | - [HTML](#html)
23 | - [Animation](#animation)
24 | - [CSS](#-css)
25 | - [Basic](#basic-1)
26 | - [CSS Style](#css-style)
27 | - [CSS Layout](#css-layout)
28 | - [CSS System](#css-system)
29 | - [CSS Animation](#css-animation)
30 | - [SVG](#-svg)
31 | - [Canvas](#-canvas)
32 | - [Basic](#basic-2)
33 | - [Library](#library)
34 | - [Articles](#articles-1)
35 | - [WebGL](#%EF%B8%8F-webgl)
36 | - [Basic](#basic-3)
37 | - [Library](#library-1)
38 | - [Articles](#articles-2)
39 | - [ETC](#-etc)
40 | - [Reference Site](#reference-site)
41 | - [Interactive pages](#interactive-pages)
42 |
43 | ## 🌎 Web Graphics
44 |
45 | **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](https://en.wikipedia.org/wiki/World_Wide_Web)
46 |
47 | **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](https://www.w3.org/standards/webdesign/graphics)
48 |
49 | ### Basic
50 |
51 | - [Graphics | Wikipedia](https://en.wikipedia.org/wiki/Graphics)
52 | - [Graphics | W3C](https://www.w3.org/standards/webdesign/graphics)
53 | - [Web media technologies | MDN](https://developer.mozilla.org/en-US/docs/Web/Media)
54 |
55 | ### Browser
56 |
57 | - [ How Browsers Work: Behind the scenes of modern web browsers - Tali Garsiel](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
58 | - [Chromium Blog](https://blog.chromium.org/)
59 | - [Critical Rendering Path | Web Google Developers](https://developers.google.com/web/fundamentals/performance/critical-rendering-path)
60 | - [Fast load times | web.dev](https://web.dev/fast/)
61 | - 🇰🇷[브라우저는 어떻게 동작하는가? | naver D2](https://d2.naver.com/helloworld/59361)
62 | - 🇰🇷[웹페이지의 로딩과 렌더링 성능 최적화 | TOAST UI](https://ui.toast.com/fe-guide/ko_PERFORMANCE/)
63 |
64 | ### Font
65 |
66 | - [CSS Fonts Module Level 3 | W3C](https://www.w3.org/TR/css-fonts-3/)
67 | - 🇰🇷[TTF? OTF? 차이점 알아보기 - ZeddiOS](https://zeddios.tistory.com/198)
68 | - 🇰🇷[리온산스 - 아들을 위해 디자인한 코드로 만든 폰트 - 인터랙티브 디벨로퍼](https://youtu.be/sb7v-d-R11E)
69 | - 📕[Google Fonts](https://fonts.google.com/)
70 | - 📕[Adobe Font](https://fonts.adobe.com/)
71 | - 📕[DaFont](https://www.dafont.com/)
72 | - 📕🇰🇷[awesome-hangul](https://github.com/lqez/awesome-hangul)
73 | - 📕🇰🇷[눈누](https://noonnu.cc/)
74 |
75 | ### Color
76 |
77 | - [Picular - A rocket fast primary color generator using Google’s image search [picular.co]](https://picular.co/)
78 |
79 | ### Image
80 |
81 | - [What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG? | stack overflow](https://stackoverflow.com/questions/2336522/what-are-the-different-usecases-of-png-vs-gif-vs-jpeg-vs-svg)
82 |
83 | ### Video
84 |
85 | - [Video and audio content | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
86 | - [Manipulating video using canvas | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)
87 |
88 | ### Articles
89 |
90 | - [Move over, data visualization. The era of ‘data simulation’ is here - Amanda Makulec](https://www.fastcompany.com/90508780/move-over-data-visualization-the-era-of-data-simulation-is-here?fbclid=IwAR2NcDdhYZV68fpsIaJXzmD0u8Lq2vVSFT7434-Qc1bxRxqdwy_ECh6--X0)
91 |
92 | ## 🕹 DOM
93 |
94 | 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](https://developer.mozilla.org/en-US/docs/Glossary/DOM)
95 |
96 | ### HTML
97 |
98 | - [HTML5 | MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
99 | - [HTML Standard | html.spec.whatwg.org](https://html.spec.whatwg.org/multipage/)
100 |
101 | ### Animation
102 |
103 | - 📕[GSAP (GreenSock Animation Platform)](https://github.com/greensock/GSAP)
104 | - [10+ Best JavaScript Animation Libraries to Use in 2022](https://www.codeinwp.com/blog/best-javascript-animation-libraries/)
105 | - 📕[animejs](https://animejs.com/)
106 |
107 | ## 💄 CSS
108 |
109 | **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](https://developer.mozilla.org/en-US/docs/Web/CSS)
110 |
111 | ### Basic
112 |
113 | - [CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)
114 | - [CSS Diner](http://flukeout.github.io/)
115 |
116 | ### CSS Style
117 |
118 | - [Redesigning your product and website for dark mode - Andy Clarke](https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode)
119 | - 📕[CSS Gradient](https://cssgradient.io/)
120 | - 📕[Transparent Textures](https://www.transparenttextures.com/)
121 |
122 | ### CSS Layout
123 |
124 | - [Flexbox playground | CodePen](https://codepen.io/enxaneta/full/adLPwv)
125 | - [A collection of popular layouts and patterns made with CSS - CSS Layout](https://csslayout.io/)
126 | - 🇰🇷[flexbox로 만들 수 있는 10가지 레이아웃 | Naver D2](https://d2.naver.com/helloworld/8540176)
127 | - 📕[Mansory | Cascading grid layout library](https://masonry.desandro.com/)
128 | - 📕[Muuri - Infinite layouts with batteries included](https://muuri.dev/)
129 |
130 | ### CSS System
131 |
132 | - 📕[SASS](https://sass-lang.com/)
133 | - 📕[styled-components](https://styled-components.com/)
134 | - 📕[Material-UI](https://material-ui.com/)
135 | - 📕[Ant Design](https://ant.design/)
136 | - 📕[bootstrap](https://getbootstrap.com/)
137 |
138 | ### CSS Animation
139 |
140 | - [Performance monitoring in CSS animations - Virendra Singh](https://medium.com/chegg/performance-monitoring-in-css-animations-f11a21d0054f)
141 | - 📕[Ceaser - CSS Easing Animation Tool](https://matthewlein.com/tools/ceaser)
142 | - 📕[Lottie](https://airbnb.io/lottie/#/)
143 | - 📕[Barba.js](https://barba.js.org/)
144 | - 📕[Scene.js](https://daybrush.com/scenejs/)
145 | - 🇰🇷[CSS 애니메이션의 성능 아는 만큼 좋아져요! | WIT블로그](https://wit.nts-corp.com/2020/06/05/6134?fbclid=IwAR147toQIEWLcrZAvkrHmbupRMpqk-AqQuLBGFvh2EWiu_WSnHbz1sEQeKU)
146 | - 🇰🇷[최연규 - 3달간 GitHub 스타3K받은 Scene js,Moveable 오픈소스 개발기 | FE CONF](https://youtu.be/3HVQhbtALDE)
147 |
148 | ## 📐 SVG
149 |
150 | **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](https://developer.mozilla.org/en-US/docs/Glossary/SVG)
151 |
152 | - [A Deep Dive Into The Wonderful World Of SVG Displacement Filtering — Smashing Magazine](https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/)
153 |
154 | ## 🎨 Canvas
155 |
156 | The **Canvas API** provides a means for drawing graphics via JavaScript and the HTML `
5 | 
6 | 
7 |