Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
f00a2358 by Dan Rempel
Options

EY global 300x600 done, but without expanding?

1 parent 590a3ef0
Expand all
Inline Side-by-side
Showing 26 changed files with 305 additions and 30 deletions
......@@ -109,7 +109,7 @@
<ul>
<li class="dot1"></li>
<li class="dot2"></li>
<li class="dot3"></div>
<li class="dot3"></li>
</ul>
</div>
......
<svg id="Graphics" xmlns="http://www.w3.org/2000/svg" width="142.93" height="183.74" viewBox="0 0 142.93 183.74"><defs><style>.cls-1{fill:#ffd400;}</style></defs><title>ey-yellow-square</title><path class="cls-1" d="M617.33,203h6.72v-6.72h-6.72V203Zm12.44,0h6.72v-6.72h-6.72V203Zm12.44,0h6.72v-6.72h-6.72V203ZM617.34,44.46v146.1h6.72V50.1L753.53,27.27l0,169H654.64V203H760.23l0-183.74Z" transform="translate(-617.33 -19.26)"/></svg>
\ No newline at end of file
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="348.92" viewBox="0 0 300 348.92"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="150" y1="348.92" x2="150" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#231f20" stop-opacity="0"/><stop offset="1"/></linearGradient></defs><title>gradient</title><rect class="cls-1" width="300" height="348.92"/></svg>
\ No newline at end of file
/*!
* VERSION: 0.0.10
* DATE: 2016-02-11
* UPDATES AND DOCS AT: http://greensock.com
*
* @license Copyright (c) 2008-2016, GreenSock. All rights reserved.
* DrawSVGPlugin is a Club GreenSock membership benefit; You must have a valid membership to use
* this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.
* This work is subject to the software agreement that was issued with your membership.
*
* @author: Jack Doyle, jack@greensock.com
*/
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";function a(a,b,c,d){return c=parseFloat(c)-parseFloat(a),d=parseFloat(d)-parseFloat(b),Math.sqrt(c*c+d*d)}function b(a){return"string"!=typeof a&&a.nodeType||(a=_gsScope.TweenLite.selector(a),a.length&&(a=a[0])),a}function c(a,b,c){var d,e,f=a.indexOf(" ");return-1===f?(d=void 0!==c?c+"":a,e=a):(d=a.substr(0,f),e=a.substr(f+1)),d=-1!==d.indexOf("%")?parseFloat(d)/100*b:parseFloat(d),e=-1!==e.indexOf("%")?parseFloat(e)/100*b:parseFloat(e),d>e?[e,d]:[d,e]}function d(c){if(!c)return 0;c=b(c);var d,e,f,g,i,j,k,l=c.tagName.toLowerCase();if("path"===l){g=c.style.strokeDasharray,c.style.strokeDasharray="none",d=c.getTotalLength()||0;try{e=c.getBBox()}catch(m){}c.style.strokeDasharray=g}else if("rect"===l)d=2*c.getAttribute("width")+2*c.getAttribute("height");else if("circle"===l)d=2*Math.PI*parseFloat(c.getAttribute("r"));else if("line"===l)d=a(c.getAttribute("x1"),c.getAttribute("y1"),c.getAttribute("x2"),c.getAttribute("y2"));else if("polyline"===l||"polygon"===l)for(f=c.getAttribute("points").match(h)||[],"polygon"===l&&f.push(f[0],f[1]),d=0,i=2;i<f.length;i+=2)d+=a(f[i-2],f[i-1],f[i],f[i+1])||0;else"ellipse"===l&&(j=parseFloat(c.getAttribute("rx")),k=parseFloat(c.getAttribute("ry")),d=Math.PI*(3*(j+k)-Math.sqrt((3*j+k)*(j+3*k))));return d||0}function e(a,c){if(!a)return[0,0];a=b(a),c=c||d(a)+1;var e=g(a),f=e.strokeDasharray||"",h=parseFloat(e.strokeDashoffset),i=f.indexOf(",");return 0>i&&(i=f.indexOf(" ")),f=0>i?c:parseFloat(f.substr(0,i))||1e-5,f>c&&(f=c),[Math.max(0,-h),Math.max(0,f-h)]}var f,g=document.defaultView?document.defaultView.getComputedStyle:function(){},h=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi;f=_gsScope._gsDefine.plugin({propName:"drawSVG",API:2,version:"0.0.10",global:!0,overwriteProps:["drawSVG"],init:function(a,b,f){if(!a.getBBox)return!1;var g,h,i,j=d(a)+1;return this._style=a.style,b===!0||"true"===b?b="0 100%":b?-1===(b+"").indexOf(" ")&&(b="0 "+b):b="0 0",g=e(a,j),h=c(b,j,g[0]),this._length=j+10,0===g[0]&&0===h[0]?(i=Math.max(1e-5,h[1]-j),this._dash=j+i,this._offset=j-g[1]+i,this._addTween(this,"_offset",this._offset,j-h[1]+i,"drawSVG")):(this._dash=g[1]-g[0]||1e-6,this._offset=-g[0],this._addTween(this,"_dash",this._dash,h[1]-h[0]||1e-5,"drawSVG"),this._addTween(this,"_offset",this._offset,-h[0],"drawSVG")),!0},set:function(a){this._firstPT&&(this._super.setRatio.call(this,a),this._style.strokeDashoffset=this._offset,1===a||0===a?this._style.strokeDasharray=this._offset<.001&&this._length-this._dash<=10?"none":this._offset===this._dash?"0px, 999999px":this._dash+"px,"+this._length+"px":this._style.strokeDasharray=this._dash+"px,"+this._length+"px")}}),f.getLength=d,f.getPosition=e}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
\ No newline at end of file
/*!
* VERSION: 1.0.1
* DATE: 2016-04-28
*
* Requires:
* GSAP TweenMax
* GASP drawSVG Plugin ()
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
*
* @author: Dan Rempel, dan@gotenzing.com
* Usage Example:
* var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
* document.getElementById("body").appendChild(myEySvg);
* animateEyFrame(2); // delay in seconds
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
**/
var eySvg;var eyStroke;var eyDot1;var eyDot2;var eyDot3;var eyGradient;var eyFill;var tl;var eyStrokeWeight;var eySvgHeight;var eySvgWidth;var eyAngleHeight;var eyDotSpacing;var eyDotDuration=.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor="#FFD400";var svgNS="http://www.w3.org/2000/svg";var initEySvgFrame=function(a,b,c){tl=new TimelineMax();eyDotSpacing=Math.floor(a*8.5/10);eyStrokeWeight=a;eySvgWidth=b;eySvgHeight=c;var d=10*Math.PI/180;eyAngleHeight=Math.tan(d)*(b-a);var e=document.createElementNS(svgNS,"svg");e.setAttribute("id","ey-frame");e.setAttribute("width",b+"px");e.setAttribute("height",c+"px");e.setAttribute("viewBox","0 0 "+eySvgWidth+" "+eySvgHeight);var f=document.createElementNS(svgNS,"defs");e.appendChild(f);var g=document.createElementNS(svgNS,"linearGradient");g.setAttribute("id","linear-gradient");g.setAttribute("x1","0%");g.setAttribute("x2","0%");g.setAttribute("y1","0%");g.setAttribute("y2","100%");f.appendChild(g);var h;h=createStop({id:"stop-1",offset:"0%",color:"Black",opacity:".7"});g.appendChild(h);h=createStop({id:"stop-2",offset:"100%",color:"Black",opacity:"0"});g.appendChild(h);eyGradient=createShape("ey-gradient","url(#linear-gradient)");e.appendChild(eyGradient);eyDot1=createDot(1);e.appendChild(eyDot1);eyDot2=createDot(2);e.appendChild(eyDot2);eyDot3=createDot(3);e.appendChild(eyDot3);eyStroke=createPath("ey-stroke");eyStroke.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*3)+" "+(eySvgHeight-a/2)+" H "+(b-a/2)+" V "+a/1.5+" L "+a/2+" "+(eyAngleHeight+a/2)+" V "+(c-a-eyDotSpacing));e.appendChild(eyStroke);eyFill=createShape("ey-gradient",eyColor);e.appendChild(eyFill);return e};var animateEyFrame=function(a){var b=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut,delay:a});tl.fromTo(eyDot2,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyDot3,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:"0"},{drawSVG:"0 100%",ease:Power1.easeIn})};var animateGradient=function(a){tl.fromTo(eyGradient,.5,{opacity:0},{opacity:1,delay:a})};var animateFill=function(a){tl.fromTo(eyFill,.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a})};var createPath=function(a){var b=document.createElementNS(svgNS,"path");b.setAttribute("id",a);b.setAttribute("fill","none");b.setAttribute("stroke",eyColor);b.setAttribute("stroke-width",eyStrokeWeight);b.setAttribute("stroke-miterlimit","10");return b};var createDot=function(a){var b=createPath("ey-dot"+a);b.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*(a-1))+" "+(eySvgHeight-eyStrokeWeight/2)+" h "+eyStrokeWeight);return b};var createShape=function(a,b){var c=document.createElementNS(svgNS,"path");c.setAttribute("id",a);c.setAttribute("fill",b);c.setAttribute("d"," M 0 "+(eySvgHeight)+" H "+(eySvgWidth)+" V 2 "+" L 0 "+(eyAngleHeight+2)+" Z ");return c};var createStop=function(a){var b=document.createElementNS(svgNS,"stop");b.setAttribute("id",a.id);b.setAttribute("offset",a.offset);b.setAttribute("stop-color",a.color);b.setAttribute("stop-opacity",a.opacity);return b};
\ No newline at end of file
......@@ -12,16 +12,15 @@ Requires GSAP TweenMax
var tl;
/**
svgURL:String - URL to the EY yellow square that will be used for the frame
myWeight:Number - the width of the line of the frame in pixels
myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
duration:Number - seconds the animation will take to elapse from start to finish
myDuration:Number - seconds the animation will take to elapse from start to finish
Returns div element containing the EY Div Frame. It will automatically animate in.
**/
var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
{
//draw first three dots
// can I do it with divs?
tl = new TimelineMax();
var div = document.createElement("div");
......@@ -32,53 +31,85 @@ var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
div.style.overflow = "hidden";
div.style.left = 10+"px";
div.style.top = 10+"px";
document.body.appendChild(div);
var myColor = "#FFD400";
var dotSpacing = myWeight*5.72/6.72; // EY ratio of weight to spacing
var dotSpacing = Math.floor(myWeight*8/10); // EY ratio of weight to spacing
var myX = 0;
var myY = 0;
var myRadians = 10 * (Math.PI/180);
var angleHeight = Math.tan(myRadians)*myWidth - myWeight;
var myRadians = 10 * Math.PI / 180; // EY angles up at 10 degrees
var angleHeight = Math.tan(myRadians)*myWidth - myWeight; // height of the shoulder to top of head
var myOrigin = "bottom left";
var myDelay = 0;
var myEase = Power1.easeInOut; //ease:Linear.easeNone
//////// calculate the duration of each line
var perimeter = (myWidth + myHeight) * 2;
var myLength = myWeight;
var myDotDuration = myLength*myDuration/perimeter;
myDuration = myDuration/2; // want to use half the duration for the dots.
var dotsCombinedLength = (myWeight + dotSpacing) * 3;
var myDotDuration = myLength*myDuration/dotsCombinedLength;
var myDotDelay = dotSpacing*myDuration/dotsCombinedLength; // delay after dot is drawn
var perimeter = (myWidth + myHeight)*2 - angleHeight - myWeight*4 -dotsCombinedLength;
var dot1 = drawLine({color:myColor, weight:myWeight, fromX:myX,
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay);
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay, myEase);
var dot2 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight),
fromY:myHeight-myWeight, length:myWeight, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay);
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
var dot3 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight),
fromY:myHeight-myWeight, length:myWeight, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay);
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
//tl.addCallback( callback:reversedToDots, position:myDuration, params:[], scope:tl );
tl.addCallback( reversedToDots, myDuration+myDotDelay, [], tl );
myLength = myWidth-myX;
var lineBottom = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight),
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay);
myLength = myHeight-myWeight*2;
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDotDelay, myEase);
myLength = myHeight-myWeight*1.2;
var lineRight = drawLine({color:myColor, weight:myWeight, fromX:myWidth,
fromY:myHeight-myWeight*2, length:myLength, angle:-90, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration*2);
fromY:myHeight-myWeight*2, length:myLength, angle:-90, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay-=myWeight*myDuration/perimeter, myEase);
myLength = myWidth+myWeight;
var lineTop = drawLine({color:myColor, weight:myWeight, fromX:myWidth,
fromY:-myWeight, length:myLength, angle:-190, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration);
fromY:-myWeight, length:myLength, angle:-190, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
myLength = myHeight-angleHeight-myWeight*2-dotSpacing;
var lineLeft = drawLine({color:myColor, weight:myWeight, fromX:0,
fromY:angleHeight, length:myLength, angle:-270, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration);
fromY:angleHeight, length:myLength, angle:-270, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
console.log("drawEyDivFrame total animation time: ", tl.totalDuration() );
return div;
}
var reverseDrawEyDivFrame = function ()
{
return tl.reverse();
}
var reversedToDots = function (myTimeLine)
{
if( tl.reversed() )
{
tl.timeScale(8);
};
}
/**
svgURL:String - URL to the EY yellow square that will be used for the frame
myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
duration:Number - seconds the animation will take to elapse from start to finish
styleObj:Object - with the following properties
color:String - CSS colour value as a string "#FFF" or "red" to define the colour of the line
weight:Number - Pixels defining the thickness of the line
fromX:Number - the x position in pixels where this line will start
fromY:Number - the y position in pixels where this line will start
length:Number - the length of the line in pixels
angle:Number - the degrees defines the direction the line will be drawn
origin:myOrigin - 0 = right; -90 = up
duration:Number - seconds the drawing of this line should take
container:HTMLelement - HTML element into which you will draw this element. It should be absolute or relative positioned.
timeline:TimelineMax - timeline to which you need this line draw animation added.
myDelay:Number - seconds delay from the previous animation before this one starts
**/
var drawLine = function (styleObj, container, timeline, myDelay)
var drawLine = function (styleObj, container, timeline, myDelay, myEase)
{
var div = document.createElement("div");
......@@ -107,10 +138,12 @@ var drawLine = function (styleObj, container, timeline, myDelay)
div.style.width = "0px"; /////// needs to be 0 before animating to this width
container.appendChild(div);
timeline.to(div, styleObj.duration, {width:styleObj.length, ease:Linear.easeNone, delay:myDelay});
timeline.to(div, styleObj.duration, {width:styleObj.length, ease:myEase, delay:myDelay});
return div;
}
//drawEyDivFrame(myWeight, myWidth, myHeight, duration);
drawEyDivFrame(7, 143, 184, 2);
var div = drawEyDivFrame(10, 196, 193, 2);
document.body.appendChild(div);
......
/*!
* VERSION: 1.0.1
* DATE: 2016-04-28
*
* Requires:
* GSAP TweenMax
* GASP drawSVG Plugin ()
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
*
* @author: Dan Rempel, dan@gotenzing.com
* Usage Example:
* var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
* document.getElementById("body").appendChild(myEySvg);
* animateEyFrame(2); // delay in seconds
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
**/
var eySvg;
var eyStroke;
var eyDot1;
var eyDot2;
var eyDot3;
var eyGradient;
var eyFill;
var tl;
var eyStrokeWeight;
var eySvgHeight;
var eySvgWidth;
var eyAngleHeight;
var eyDotSpacing;
var eyDotDuration = .2; // seconds for animation
var eyFrameDuration = 1; // seconds for animation
var eyGradientDuration = 1; // seconds for animation
var eyFillDuration = 1; // seconds for animation
var eyColor = "#FFD400";
var svgNS = "http://www.w3.org/2000/svg";
/**
myWeight:Number - the width of the line of the frame in pixels
myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
myDuration:Number - seconds the animation will take to elapse from start to finish
Returns: SVG element
**/
var initEySvgFrame = function (myWeight, myWidth, myHeight)
{
//// calculate all the points and variables to assist in drawing ////
tl = new TimelineMax();
eyDotSpacing = Math.floor(myWeight*8.5/10); // EY ratio of weight to spacing
eyStrokeWeight = myWeight;
eySvgWidth = myWidth;
eySvgHeight = myHeight;
var myRadians = 10 * Math.PI / 180; // EY angles up at 10 degrees
eyAngleHeight = Math.tan(myRadians)*(myWidth - myWeight); // height of the head (measured vertically from shoulder anchor pt to top of head anchor pt)
//// create the properly sized svg container ////
var eySvg = document.createElementNS(svgNS, "svg");
eySvg.setAttribute("id", "ey-frame");
eySvg.setAttribute("width", myWidth+"px");
eySvg.setAttribute("height", myHeight+"px");
eySvg.setAttribute("viewBox", "0 0 "+eySvgWidth + " " + eySvgHeight );
var myDefs = document.createElementNS(svgNS, "defs");
eySvg.appendChild(myDefs);
//// draw the gradient for def ////
var myLinearGradient = document.createElementNS(svgNS, "linearGradient");
myLinearGradient.setAttribute("id", "linear-gradient");
myLinearGradient.setAttribute("x1", "0%");
myLinearGradient.setAttribute("x2", "0%");
myLinearGradient.setAttribute("y1", "0%");
myLinearGradient.setAttribute("y2", "100%");
myDefs.appendChild(myLinearGradient);
//stops
var stop;
stop = createStop ({id:"stop-1", offset:"0%", color:"Black", opacity:".7" });
myLinearGradient.appendChild(stop);
stop = createStop ({id:"stop-2", offset:"100%", color:"Black", opacity:"0" });
myLinearGradient.appendChild(stop);
// gradient shape
eyGradient = createShape ("ey-gradient", "url(#linear-gradient)");
eySvg.appendChild(eyGradient);
//// create 3 dots ////
eyDot1 = createDot(1);
eySvg.appendChild(eyDot1);
eyDot2 = createDot(2);
eySvg.appendChild(eyDot2);
eyDot3 = createDot(3);
eySvg.appendChild(eyDot3);
//// draw the rest of the path ////
eyStroke = createPath("ey-stroke");
eyStroke.setAttribute("d",
" M " + ((eyStrokeWeight + eyDotSpacing)*3) + " " + (eySvgHeight-myWeight/2) +
" H " + (myWidth-myWeight/2) +
" V " + myWeight/1.5 +
" L " + myWeight/2 + " " + (eyAngleHeight+myWeight/2) +
" V " + (myHeight-myWeight-eyDotSpacing)
);
eySvg.appendChild(eyStroke);
//// draw the fill shape for def ////
eyFill = createShape ("ey-gradient", eyColor);
eySvg.appendChild(eyFill);
return eySvg;
};
var animateEyFrame = function (myDelay)
{
var lastPt = 0;
tl.fromTo(eyDot1, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut, delay:myDelay });
tl.fromTo(eyDot2, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut });
tl.fromTo(eyDot3, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut });
tl.fromTo(eyStroke, eyFrameDuration, {drawSVG:"0"}, {drawSVG:"0 100%", ease:Power1.easeIn});
};
var animateGradient = function (myDelay)
{
tl.fromTo(eyGradient, .5, {opacity:0}, {opacity:1, delay:myDelay});
};
var animateFill = function (myDelay)
{
tl.fromTo(eyFill, .5, {y:eySvgHeight}, {y:0, ease:Power2.easeIn, delay:myDelay});
};
////////// private functions
var createPath = function (myId)
{
var myPath = document.createElementNS(svgNS,"path");
myPath.setAttribute("id", myId);
myPath.setAttribute("fill", "none");
myPath.setAttribute("stroke", eyColor);
myPath.setAttribute("stroke-width", eyStrokeWeight);
myPath.setAttribute("stroke-miterlimit", "10");
return myPath;
};
var createDot = function (dotNum)
{
var myDot = createPath("ey-dot"+dotNum);
myDot.setAttribute("d",
" M " + ((eyStrokeWeight + eyDotSpacing)*(dotNum-1)) + " " + (eySvgHeight-eyStrokeWeight/2) +
" h " + eyStrokeWeight
);
return myDot;
};
var createShape = function (myId, myFill)
{
var myShape = document.createElementNS(svgNS,"path");
myShape.setAttribute("id", myId);
myShape.setAttribute("fill", myFill);
myShape.setAttribute("d",
" M 0 " + (eySvgHeight) +
" H " + (eySvgWidth) +
" V 2 " +
" L 0 " + (eyAngleHeight+2) +
" Z "
);
return myShape;
};
var createStop = function (myStopObj)
{
var myStop = document.createElementNS(svgNS, "stop");
myStop.setAttribute("id", myStopObj.id);
myStop.setAttribute("offset", myStopObj.offset);
myStop.setAttribute("stop-color", myStopObj.color);
myStop.setAttribute("stop-opacity", myStopObj.opacity);
return myStop;
};