Skip to content

Collection of animations, drawings and graphic designs

Notifications You must be signed in to change notification settings

dking1342/animations

Repository files navigation

Animations & Designs

Prerequisites

HTML5
CSS3
SVG
Javascript

Getting Started

This project is full of styling tools and techniques. You will need to have a basic to medium level understanding of HTML5, CSS3 and SVG.

HTML5 otherwise known as hypertext markup language is used to create the basic browser structure. It helps build on the document object model with various nodes making up the content.

CSS3 otherwise known as cascading style sheets is the typical format used to style HTML files. With the vast amount of properties that can be used, you will understand how these styling techniques can be used to make the uneventful HTML browser rendering into something quite magical if done right.

SVG otherwise known as scaleable vector grahpics is a markup language used to describe two dimensional based vector graphics. Pretty redundant! In layman's terms, it is where you can create all sorts of shapes, creatures and designs only limited by your imagination and skill level.

Javascript is a lightweight compiled programming language. The definition goes well beyond that and can be found on the MDN link shown above. There is limited usage of Javascript in these files, but it is important that you at least know the basics of Javascript to understand what is happening.

If you are not familiar with any of these then feel free to check on the many sites that offer tutorials, courses and crash courses on this topic.

Repo Setup

This repo is setup so that each folder offers a new and different animation utilizaing HTML, CSS and/or SVG. The folder names give guidance as to the type of animation that you will find within the code. The files in each folder are limited to HTML and CSS files with some having Javascript if needed.

Conclusion

This repo is meant to be a means of exploration, inspriation or just review. Please enjoy yourself and see what interests you and sparks your imagination!