CREATING
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1329244/Screenshot_2015-04-30_14.28.17.png)
SVGPOLYGONS
READ THE ARTICLE
@gryghostvisuals
http://grayghostvisuals.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1506263/nys-outline-blue-hi.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1554598/BarneyGumble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1554605/o-CHICKEN-WINGS-facebook.jpg)
TAKE AWAYS
-
Creating clean polygon vector art
-
Illustrator shortcuts and techniques
-
SVG Mechanics and Organization
-
SVG Optimizations & Precautions
-
Ability to understand and create “tweens”
-
Fixing inconsistent SVG transform-origins
-
How to manipulate SVG using filters
-
Impressing your boss with minimal code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1329324/lion-head-motion.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1366076/gsap_logo.jpg)
GreenSock Animation Platform
VELOCITY
Dynamics.js
Snap.svg
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1366134/gsap-01.png)
TimelineMax is part of the GreenSock Animation Platform and helps you animate for the web. Using TimelineMax you can control animation sequences of “anything JavaScript can touch” (such as CSS properties and SVG) though you don’t need to be a JavaScript God to use it!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1524820/huey.png)
“Great Series”
~Daryl Hall
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1528327/daryl-hall.png)
“This series is hot baby!”
~Huey Lewis
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1366205/Button-White-Large.png)
Sarah Drasner
Chris Gannon
Rachel Smith
Petr Tlchy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1366255/5a224f121f96bd037bf6c1c1e2b686fb.png)
Diaco-MAW
Nicolas Daniel
Jose Piero
Blake Bowen
Karim Maaloul
CREATING POLYGONS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1329343/polybird.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1366376/behance.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1366384/9db2282a74ec5c6e7f48aeb0f9421e3f.jpg)
BRENO BITENCOURT
<polygon>s are effortless to make
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1506431/polygon-pen.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1506494/Screen_Shot_2015-06-18_at_3.47.09_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1506497/Screen_Shot_2015-06-18_at_3.48.04_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1511413/tumblr_ljtaz181pK1qizvnso1_500.gif)
ORGANIZING IS HARD WORK
But it saves time in the long run
GROUP ALL THE THINGS!
Right click
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1511467/Screenshot_2015-06-20_11.30.10.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1511468/Screenshot_2015-06-20_11.30.17.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1554678/Screenshot_2015-07-07_01.20.26.png)
MAKE THEM POINTS LINE UP YO!
Horizontal Align Center | Vertical-Align-Center : Hold Shift Key When Selecting Points
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1511476/Screenshot_2015-06-19_15.07.32.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1511488/points-mergin.gif)
COPY FROM ILLUSTRATOR & PASTE INTO EDITOR LIKE IT'S HOT.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1511501/Screenshot_2015-06-20_11.32.29.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1511509/Screenshot_2015-06-20_11.44.03.png)
NO SHAME IN OPTIMIZING BY HAND
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1512554/tumblr_lm5kuqLtA41qizvnso1_500.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1486586/AdobeIllustratorCCCreativeCloud1700Finalx32-x64.png)
To my knowledge Illustrator doesn't use class attributes to name groups; it uses ID's instead. Note how this ID is given a numerical value. You can't tell if this is happening from the layers palette.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1511501/Screenshot_2015-06-20_11.32.29.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1486586/AdobeIllustratorCCCreativeCloud1700Finalx32-x64.png)
Always Examine Output
OPTIMIZATION TOOLS
<g id="disc_1_">
LOVE LAMP
Optimizing By Hand? Then Love Thy Vector
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1514918/giphy-1.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1515720/Screenshot_2015-06-22_11.06.28.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1366290/profile-512_5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1549371/YouTube-logo-play-icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1549371/YouTube-logo-play-icon.png)
ILLUSTRATOR TIPS
-
Learn shortcut keys to save time.
-
Be patient.
-
Use the tools you already have for heavy lifting tasks.
-
Shape tools have modifier keys (directional arrows).
-
Organize items of your artwork in groups.
-
Set the keyboard increment to .125px. This allows you to move a vector incrementally and land on a 1/2 pixel.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1486586/AdobeIllustratorCCCreativeCloud1700Finalx32-x64.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1517082/CHpebDVUYAA0a-G.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1524904/indy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1329380/polyonlion-hover.gif)
POLYGON MECHANICS
POLYLION
<svg>
<g>
<polygon points="392,85 380,128 339,98" fill="" />
</g>
</svg>
<svg class="polylion" version="1.1" viewBox="13 103.7 586 580" xmlns="http://www.w3.org/2000/svg">
<g id="polylion-mouth">
<polygon points="" />
</g>
<g id="polylion-nose">
<polygon points="" />
</g>
<g id="polylion-eyes">
<polygon points="" />
</g>
</svg>
GROUP ELEMENTS FOR FINER CONTROL
Think of each polygon element as a DOM node.
TIME FOR THE BROWSER
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1516522/vw4TFfP.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1516544/chrome_256x256.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1516546/firefox_256x256.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1516549/internet-explorer-tile_256x256.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1516552/opera_256x256.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1516555/safari_256x256.png)
ALIASING ISSUES CAN RESULT
Notice The Gaps?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1513026/Screenshot_2015-06-21_16.03.58.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1513029/Screenshot_2015-06-21_13.26.57.png)
Gaps Go Away Now. Why?
<svg>
<defs>
<filter id="dilate">
<feMorphology radius="1" in="SourceGraphic" operator="dilate"></feMorphology>
</filter>
</defs>
<g filter="url(#dilate)">
<polygon points="392,85 380,128 339,98" style="fill: #FADFAA" />
</g>
</svg>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1543979/vdtaS41.gif)
Safari
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1513046/Screenshot_2015-06-21_16.10.51.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1513774/Screenshot_2015-06-21_16.04.40.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1513777/Screenshot_2015-06-22_00.40.36.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1513779/Screenshot_2015-06-22_00.41.29.png)
height: 400px
height: 200px
height: 100px
<feMorphology radius="1" in="SourceGraphic" operator="dilate">
height: 800px
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1516515/FUzzZ31.gif)
chrome/firefox
chrome/firefox
chrome/firefox
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1515304/Screenshot_2015-06-22_11.44.45.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1515305/Screenshot_2015-06-22_11.45.03.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1515306/Screenshot_2015-06-22_11.46.17.png)
svg {
max-width: 800px;
max-height: 600px;
}
<feMorphology radius="1" in="SourceGraphic" operator="dilate">
window.onresize = function(){
var radius;
if($(window).width() > 600 && $(window).width() < 800){
radius = 2;
} else if($(window).width() < 600){
radius = 5;
} else {
radius = 1;
}
TweenMax.set('#morphology_filter', { attr:{ radius:radius }
})
};
Window Resize
svg {
max-width: 800px;
max-height: 600px;
}
<feMorphology radius="1" in="SourceGraphic" operator="dilate">
window.onresize = function(){
var radius;
if($(window).width() < 800){
radius = 2 4;
} else {
radius = 1;
}
TweenMax.set('#morphology_filter', { attr:{ radius: radius } });
};
Window Resize
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1515675/Screenshot_2015-06-22_13.39.05.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1515676/Screenshot_2015-06-22_13.39.34.png)
radius = "<number-optional-number>"
The radius (or radii) for the operation. If two <number>s are provided, the first number represents a x-radius and the second value represents a y-radius. If one number is provided, then that value is used for both X and Y. The values are in the coordinate system established by attribute ‘primitiveUnits’ on the ‘filter’ element.
A negative value is an error (see Error processing). A value of zero disables the effect of the given filter primitive (i.e., the result is a transparent black image).
If the attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable: yes.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1529861/tumblr_ljmxzhQu3h1qizvnso1_500.gif)
WHAT ABOUT STROKES?
<polygon fill="#231F20" points="...." stroke-width="" stroke="#231F20"></polygon>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1515794/Screenshot_2015-06-22_14.13.14.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1515795/Screenshot_2015-06-22_14.12.24.png)
STROKE-WIDTH: 2.5
ANTI-ALIASING WELL -
STILL GAPS -
- MORE JAGGED EDGES
- LESS GAPS
STROKE-WIDTH: -2.5
EACH POLYGON HAS A MATCHING FILL AND STROKE COLOR
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1532677/giphy.gif)
ONE MORE FILTER ATTEMPT
<feComponentTransfer><feFuncA type="table" tableValues="0 0 1 1" /></feComponentTransfer>
Window Resize
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1531973/Screenshot_2015-06-27_21.25.11.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1531975/Screenshot_2015-06-27_21.27.06.png)
Allows operations like brightness adjustment, contrast adjustment, color balance or thresholding for each pixels rgba channels. W3 Filters Spec.
feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting,
feDisplacementMap, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset,
feSpecularLighting, feTile, feTurbulence, feDistantLight, fePointLight, feSpotLight
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1515676/Screenshot_2015-06-22_13.39.34.png)
You can wrap multiple filters in one <filter> tag
Be Careful using Primitive SVG FIlters & Re-editing in Illustrator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1549397/Screenshot_2015-07-03_10.49.02.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1549398/Screenshot_2015-07-03_10.49.30.png)
CREATING TWEENS
var timeline = new TimelineMax();
var from = {
opacity: 0
};
var to = {
opacity: 1
};
timeline.fromTo( $('polygon'), 1, from, to );
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1529878/dance-mac.gif)
Particular property combos can have strange effects when used with SVG.
RotationY + Scale (Safari & Firefox only execute scale)
CSSPlugin.useSVGTransformAttr = false;
TweenMax 1.17
SVG Tweens Can Be Peculiar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1366255/5a224f121f96bd037bf6c1c1e2b686fb.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1529616/box-svg.gif)
Each browser has its own quirks and implementations of the SVG spec, causing quite a few challenges for animators.
Some browsers don't support CSS animations on SVG elements. Some don't recognize CSS transforms (rotation, scale, etc.), and implementation of transform-origin is a mess.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1543840/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1546239/daisy-polytest.gif)
Combine Drawing & Tweening
DrawSVG + TweenMax
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1524820/huey.png)
That's Hip
Subtle Motion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1528327/daryl-hall.png)
“Simple FTW Daddy-o!”
MOVE POINTS, COMBINE TECHNOLOGIES
Snap.svg, Canvas, CSS Keyframes & Transforms
HIDDEN ON PAGE LOAD?
/*
* Default in H5BP and Normalize.
* Resolves a bug in IE9 with overflow issues.
* http://stackoverflow.com/questions/5971320/svg-image-is-not-cropped-in-ie9/5971504#5971504
*/
svg:not(:root) { overflow: hidden; }
/* use visible if u want SVG animations to go beyond the viewBox */
svg:not(:root) { overflow: visible; }
/* Want something hidden on page load? */
.my-svgtarget-element-to-hide { visibility: hidden; }
/* But what happens if JS fails? */
.no-js .my-svgtarget-element-to-hide { visibility: visible; }
Helps to avoid a sudden flash of your scene/graphic during initial window load
ALLOW SVG ELEMENTS TO OVERFLOW
ADJUST CSS ACCORDINGLY
There will be times when you want to animate beyond the boundaries of viewBox
REVERSE STATE w/TweenMax
TweenMax.set(el, { visibility: visible; });
POLYGON ANIMATIONS
In The Wild
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1486554/logo.png)
div {
clip-path: polygon(20% 50%, 25% 52.4%, 11.5% 54.5%);
}
<div class="shard"></div>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1543992/Screenshot_2015-06-26_17.53.09.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1543993/Screenshot_2015-06-26_17.53.13.png)
<svg><polygon points="" fill="" /></svg>
TweenMax.staggerTo(...)
<canvas></canvas>
var cvs = document.getElementById("logo-canvas");
var ctx = cvs.getContext("2d");
p1 = {x: 10, y: 51}
...
<svg><path d="..."></path></svg>
window.onload = function () {
var anim1 = function(){
bird.stop().animate({height:h*.85},duration,mina.easeinout);
for (i = 0; i < elements.length; i++) {
elements[i].stop().animate({
d: elements[i].attr('d2')
}, duration, mina.easeinout,anim2);
}
}
...
anim1();
}
THANKS EVERYONE!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1366205/Button-White-Large.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/22795/images/1550201/chunk-sloth.png)
SVG Polygon Art
By Gray Ghost Visuals
SVG Polygon Art
How to create SVG polygon art and animate it.
- 7,298