Amazing Sevastolink terminal Made Only With html css svg audio and Javascript

Alien Isolation: Sevastolink Terminal

Sevastolink is a version of the LM-LINK communications system in Alien: Isolation.
In this example below you will see how to do a terminal with some Html / Css / Audio/ Svc and Javascript .

Inspired by alien isolation .

Svg Layout

Chapter 1

Elements used (svg)

Codes & Examples for  Svg

Ex. 01
Instructed:

Codes & Examples for  svg
Ex. 02
Formed:

Svg Layout
Chapter 2

Elements used (svg)

Codes & Examples for  svg

Ex. 01
Instructed:

The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.

If text is included in SVG not inside of a <text> element, it is not rendered. This is different than being hidden by default, as setting the display property won't show the text.

The SVG <tspan> element defines a subtext within a <text> element or another <tspan> element. It allows for adjustment of the style and/or position of that subtext as needed.

SVG Layout

Elements used (SVG )

Codes & Examples for  Svg

Ex. 02
Instructed:

The veUnion element.

Union may be thought of as "adding together" two shapes to make the resultant shape.

One particularly useful effect is to convert a stroke to a path, then to union this with the original path. This gives an 'outset' effect.

Svg Layout
Chapter 3

Elements used (svg )

Codes & Examples for  Css

Ex. 01
Instructed:

The Many Ways to Change an SVG Fill on Hover (and When to Use Them)

Change Color of SVG on Hover.

Svg Layout
Chapter 4

Elements used (svg)

Codes & Examples for Jquery

Ex. 01
Instructed:

Then just use jQuery's class and attribute functions on SVG nodes as well: addClass, removeClass, toggleClass, hasClass, attr, and removeAttr.
Use the power of jQuery to select nodes in the SVG document with this extension. Provide the SVG root element as the context for your selections:

Svg Layout

Elements used (svg)

Codes & Examples for Jquery 

Ex. 02
Instructed:

Svg Layout
Chapter 5

Elements used (svg)

Codes & Examples for Jquery  Audio

Ex. 01
Instructed:

Live Demo