Skip to content

hoonsbory/canvasDotDrawing

Repository files navigation

Welcome to Canvas Dot Drawing 👋


image


📃 ​Description

Canvas Dot Interaction


개요

  • 마우스/터치를 이용한 캔버스 인터렉션 체험 사이트입니다.

주요기능

  • cell들을 비율에 맞춰 그리기 위한 이미지 크기를 자동 리사이징합니다.
  • PC/Mobile에서 체험 가능합니다.
  • 마우스/터치로 cell들을 분열시켜 이미지를 도트화하여 이미지를 완성합니다.
  • 자동 분열 기능으로 애니메이션을 감상할 수 있습니다.
  • 애니메이션 분열 속도 조절이 가능합니다.

🔍 Overview


Mouse/Touch Interaction


Auto Animation




🔧 ​Tech Stack

  • Vite 2.9.9
  • typed.js 2.0.12
  • fontfaceobserver 2.1.0
  • deploy netlify


🏃 Steps to run

$ npm install 
$ npm run dev