SVG Tutorial
see https://www.youtube.com/watch?v=xkBheRZTkaw
- vizhub https://vizhub.com/
- svg https://developer.mozilla.org/en-US/docs/Web/SVG
- figma https://www.figma.com/ - draw svg figures online
- svg path
- svg path specification https://svgwg.org/svg2-draft/paths.html#PathElement
- fonts https://fonts.google.com/?query=share+tech
- finding last version of npm package bij going to https://unpkg.com/. unpkg.com is a content delivery platform
- svg has 0,0 at left top (0,0) and right bottom (maxx, maxy)
- svg has nog z-ordering instead sequence of occurence in svg document determins ordering
- css style has presidence over document attributes from tags
- inline css has presidence over css style
-
Adil Zeshan - animation and color gradients
-
example 01 simple circle
-
example 02 simple circle and lines
-
example 03 paths
-
example 04 gradient and animation
-
example 05 label, test and rectangle
-
example 06 circles
-
example 07 circles lines
-
example 08 bar graph with rectangles
-
example 09 bar graph with rectangles translated
-
example 10 graph using svg from figma
-
example 11 graph using text and google fonts
-
example 12 linechart with path
-
example 13 bullseye with animated colors
-
example 14 time sequence example
-
example 15 javascript statements
-
example 16 repeating vertical lines
-
example 17 repeating vertical lines with circle
-
example 18 repeating vertical lines with rotating circle
-
example 19 repeating vertical lines with rotating circle and changing color
-
example 20 repeating vertical lines with rotating circle and changing color max window size