SVG in JS and how to make a fun page

Personality

It is important to declare the personality of your app, it is a good thing to have a simple explanation video on how to use or surf your app, or a little animation or interaction with the logo or your mascot.

LOADING

A simple loading image makes people understand that something is going to happen next. Semantic UI can offer you a good variety of loaders, here are some of them.

SVG

Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Viewport

The viewport is the visible section of an SVG. While an SVG can be as wide or as high as we wish, only a certain section of this image can be visible at a time.

Viewbox

The viewBox provides us with very powerful capabilities. It allows us to specify that a given set of graphics stretch to fit a particular container element. These values include four numbers separated by commas or spaces: min-x, min-y, width, and height that should generally be set to the bounds of the viewport.

Path

A path represents the outline of a shape that can be filled or stroked. A path can also be used as a clipping path, to describe animation or position text. A path can be used for more than one of these functions at the same time. Here is a web to play around with path and an interesting youtube video with an example.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store