Learning Web Animation: SVG Basics Part 3 -- A Few More Things about SVG by siggy

art · @siggy · Mar 27 '17

$0.06

Learning Web Animation: SVG Basics Part 3 -- A Few More Things about SVG

Welcome to the third and final lesson of <em>SVG Basics</em>. If you missed the previous lessons, here they are:
<a href="https://steemit.com/art/@siggy/learning-web-animation-svg-basics-part-1-an-overview-of-svg">Part 1: An Overview of SVG</a>
<a href="https://steemit.com/art/@siggy/learning-web-animation-svg-basics-part-2-svg-basic-shapes-and-primitives">Part 2: SVG Basic Shapes & Primitives</a>

In this lesson, we'll learn a few more things about how to work effectively with SVG--especially for animation purposes. We will learn about three very powerful (and very cool) SVG features that we use in the animation project:
     • SVG groups & the 'g' tag
     • Clipping Paths and how to use them
     • The difference between Viewport and Viewbox

Enjoy!

https://youtu.be/Et4J2BbjsHw

This video is part of a longer course on SVG and web animation with Greensock which can be found here: http://academy.siggyworks.com/p/web-animation-with-svg-and-greensock

👍 fyrstikken, contentjunkie, fyrst-witness, movietrailers, fentan99, reaction, siggy, drnick, ladder, towelie, masyl, philipjfry, cartman, conky, coolcat, chair, opall, dademurphy, mrssteve, chart, mrhanky, popcornmachine, wilburtsmythe, bitrx, bluetrade, shape, highfive, jebus, clarence, steemet, qantheman, charity, annul, suntzu, mchammer, vanilla, guerilla, icet, nedd, kickass, oreo, curei, currie, austinpowers, shapeshifter, stun, icecube, view, kitt, katt, wiggum, itchy, scratchy, krusty, scene, quimby, sideshowbob, elviss, peeweeherman, dickbutt, butan, cowboycurtis, jambii, azz, and 4 others

`author`	siggy
`permlink`	learning-web-animation-svg-basics-part-3-a-few-more-things-about-svg
`category`	art
`json_metadata`	{"tags":["art","code","svg","howto","tutorial"],"image":["https://img.youtube.com/vi/Et4J2BbjsHw/0.jpg"],"links":["https://steemit.com/art/@siggy/learning-web-animation-svg-basics-part-1-an-overview-of-svg","https://steemit.com/art/@siggy/learning-web-animation-svg-basics-part-2-svg-basic-shapes-and-primitives","https://youtu.be/Et4J2BbjsHw","http://academy.siggyworks.com/p/web-animation-with-svg-and-greensock"],"app":"steemit/0.1","format":"markdown"}
`created`	2017-03-27 19:36:54
`last_update`	2017-03-27 19:36:54
`depth`	0
`children`	1
`last_payout`	2017-04-27 20:11:15
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.048 HBD
`curator_payout_value`	0.010 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	965
`author_reputation`	229,172,596,389
`root_title`	"Learning Web Animation: SVG Basics Part 3 -- A Few More Things about SVG"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	2,866,786
`net_rshares`	139,061,403,149
`author_curate_reward`	""

properties (23)vote details (68)

voter	rshares	pct
fyrstikken	52,965,021,529	1%
contentjunkie	43,612,356,623	100%
azz	83,169,778	100%
jag	80,239,540	100%
reaction	1,571,098,977	100%
movietrailers	2,473,951,213	100%
statsbot	75,714,109	100%
newsbot	75,697,889	100%
cartman	244,632,925	100%
dickbutt	115,258,865	100%
peeweeherman	120,817,217	100%
cowboycurtis	104,741,624	100%
jambii	104,722,943	100%
coolcat	182,832,697	100%
opall	182,166,545	100%
elviss	156,038,769	100%
chair	182,601,353	100%
conky	216,770,357	100%
dademurphy	181,155,830	100%
chart	180,328,328	100%
mrssteve	180,830,070	100%
towelie	625,368,217	100%
philipjfry	402,163,643	100%
mrhanky	179,321,108	100%
popcornmachine	179,211,206	100%
wilburtsmythe	178,808,880	100%
bitrx	178,440,290	100%
bluetrade	177,727,110	100%
shape	177,283,295	100%
highfive	175,183,516	100%
jebus	175,098,203	100%
clarence	175,088,167	100%
steemet	174,213,149	100%
qantheman	173,032,137	100%
charity	171,945,897	100%
annul	171,831,024	100%
suntzu	170,626,704	100%
mchammer	170,593,053	100%
vanilla	169,819,348	100%
guerilla	169,607,285	100%
icet	169,458,108	100%
nedd	168,723,469	100%
kickass	168,066,757	100%
oreo	167,981,606	100%
curei	166,677,862	100%
currie	165,705,663	100%
austinpowers	163,788,899	100%
shapeshifter	162,191,582	100%
stun	161,748,116	100%
icecube	161,143,110	100%
view	161,095,702	100%
kitt	159,745,030	100%
katt	159,522,811	100%
itchy	159,457,586	100%
scratchy	159,449,916	100%
krusty	159,192,100	100%
scene	158,872,803	100%
fyrst-witness	23,658,181,561	100%
quimby	157,441,509	100%
wiggum	159,514,586	100%
sideshowbob	156,281,828	100%
drnick	734,256,164	100%
fentan99	2,211,043,139	100%
butan	106,568,493	1%
ladder	695,575,348	100%
siggy	870,572,708	100%
masyl	453,637,280	100%
pillowz	0	100%

`author`	steemitboard
`permlink`	steemitboard-notify-siggy-20180102t201123000z
`category`	art
`json_metadata`	{"image":["https://steemitboard.com/img/notifications.png"]}
`created`	2018-01-02 20:11:24
`last_update`	2018-01-02 20:11:24
`depth`	1
`children`	0
`last_payout`	2018-01-09 20:11:24
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	428
`author_reputation`	38,975,615,169,260
`root_title`	"Learning Web Animation: SVG Basics Part 3 -- A Few More Things about SVG"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	26,627,718
`net_rshares`	0
`author_curate_reward`	""