The Language of Shapes

Understanding the (SVG) Path

New Jersey

Philly

Washington DC

MechE

SSE

Marketing

North Carolina

Econ

Programming

ChillJS...

Soccer

Pole vault

Muay Thai

THE  PATH

^

(super abstract)

THE SVG PATH

^

(slightly less abstract)

What is the SVG?

Scalable Vector Graphic

What is the SVG Path?

=

HTML

SVG

text

graphics

<g />
<circle />
<rect />
<line />
<div />
<h1 />
<ul />
<p />
<path />

Why understand the path?

POTENTIAL

PRACTICALITY

PLEASURE

Why is it difficult to understand the path?

<path fill="none" d="M2.568,7.179H8.96c1.411,0,2.557-1.145,2.557-2.557c0-1.412-1.146-2.557-2.557-2.557H8.534c-0.235,0-0.426,0.19-0.426,0.426c0,0.236,0.191,0.426,0.426,0.426H8.96c0.941,0,1.704,0.763,1.704,1.705S9.901,6.327,8.96,6.327H2.568c-0.236,0-0.426,0.19-0.426,0.426C2.142,6.988,2.333,7.179,2.568,7.179 M15.778,7.179c0-0.941-0.763-1.704-1.704-1.704h-0.427c-0.235,0-0.426,0.19-0.426,0.426c0,0.235,0.19,0.426,0.426,0.426h0.427c0.47,0,0.852,0.382,0.852,0.852c0,0.471-0.382,0.853-0.852,0.853H0.864c-0.236,0-0.426,0.19-0.426,0.426c0,0.235,0.19,0.426,0.426,0.426h13.21C15.016,8.884,15.778,8.12,15.778,7.179 M16.631,9.736H2.568c-0.236,0-0.426,0.19-0.426,0.426c0,0.236,0.19,0.426,0.426,0.426h14.062c0.94,0,1.704,0.764,1.704,1.705s-0.764,1.704-1.704,1.704h-0.427c-0.235,0-0.426,0.19-0.426,0.427c0,0.235,0.19,0.426,0.426,0.426h0.427c1.411,0,2.557-1.145,2.557-2.557S18.042,9.736,16.631,9.736 M10.665,11.44H4.273c-0.236,0-0.426,0.19-0.426,0.426c0,0.236,0.19,0.427,0.426,0.427h6.392c1.412,0,2.557,1.145,2.557,2.557s-1.146,2.557-2.557,2.557h-0.426c-0.236,0-0.426,0.19-0.426,0.426s0.19,0.427,0.426,0.427h0.426c1.883,0,3.41-1.526,3.41-3.409S12.548,11.44,10.665,11.44"></path>

How can we gain understanding?

LITERACY

COMPREHENSION

CREATION

LITERACY

COMPREHENSION

CREATION

Book

Sentences

Words

Letters

LITERACY

COMPREHENSION

CREATION

Path

Path data

Commands

Letters and/or Numbers

<path fill="none" d="M 110,10 l 80,80 v -80 h -40"></path>

LITERACY

COMPREHENSION

CREATION

SVG Path Commands

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

move to (x,y)

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

line to (x,y)

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

horizontal line to (x)

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

vertical line to (y)

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

Cubic bezier curves (cX1,cY1 cX2,cY2 eX,eY)

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

Smooth Cubic bezier curves (cX2,cY2 eX,eY)

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

Quadratic bezier curves (cX,cY eX,eY)

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

Smooth quadratic bezier curves (eX,eY)

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

Elliptical arcs (rX,rY rotation, arc, sweep, eX,eY)

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

closePath

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

M m L l
H h V v
C c S s
Q q T t
A a Z z

​C1 = 2/3C + 1/3P1

C2 = 2/3C + 1/3P2

P1

P2

C

C1

C2

LITERACY

COMPREHENSION

CREATION

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

M m L l
H h V v
C c S s
Q q T t
A a Z z

LITERACY

COMPREHENSION

CREATION

M moveTo x, y
C curveTo x, y, x1, y1, x2, y2
A arcTo rx, ry, angle, large-arc-flag, sweep-flag, x, y
Z closePath

LITERACY

COMPREHENSION

CREATION

finding our path

But did we find what we were looking for?

Finding our path

Shaping our path

LITERACY

COMPREHENSION

CREATION

http://localhost:3001/

The path is beautiful.

Thank you.

@monica_woj

https://reflectingreason.com

Resources

Made with Slides.com