SVG Interact

Augmenting animations and interactions in SVG

AGENDA

  • Overview of SVG Interact
  • Broswer tool demo
  • Explorations in CSS and SVG animations
  • Experiments in building the tool

OVERVIEW OF SVG INTERACT

KEY FEATURES

  • Browser tool
  • Draws and Exports SVG
  • Add animations and interactions
  • Create responsive intelligent graphics

1. SCALABILITY OF CONTENT

2. STATE BASED ANIMATIONS

3. MATHEMATICAL GRAPHIC GENERATION

4. DATA INTEGRATION

DEMO

SVG TEXT

A CUP OF TEA
                    

 A CUP OF TEA


                

CSS ANIMATIONS

Oolong tea 86
SVG Elements
<g id="teaBag">
  <path d="M...Z" fill="#fcd0a7"/>
  <path d="M..." fill="#f15361"/>
 <text>
 <tspan> Oolong Tea </tspan>
 <text>
 </g>
                        
                    
CSS
.teabag .OolongTea {
{
  -webkit-animation-name: OolongTeaAnim;
  -webkit-animation-duration: 3s; 
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: normal;
  -webkit-transform-origin: 50%;
}   
@-webkit-keyframes OolongTeaAnim { 
 0% {opacity: 1; -webkit-transform: translate(0px, -180px) }
 50% { opacity: 1;-webkit-transform: translate(0px, 5px) }
 80% { opacity: 1;-webkit-transform: translate(0px, -15px) }
 100% { opacity: 1;-webkit-transform: translate(0px, 0px) }
}

SVG ANIMATIONS

Start Show Path Hide Path
Define your Path
<defs>
<path id="followpath" stroke-dashoffset="3309" d="M ..."/>
</defs>
Animate
<g class="leaf">
<path id="M ..."/>
<animateMotion id="animatedMotionPath" 
    begin="startMotionAnimation.click" dur="5s">
  <mpath xlink:href="#followpath"/>
 </animateMotion>
</g>
                    

LINE DRAWING

Draw
<path stroke-dasharray="3000,3000"  
        stroke-dashoffset="3309"  d="M ..." 
        stroke="#333" stroke-width="1" fill="none">
 <animate attributeName="stroke-dashoffset" 
        from="3309" to="7s" dur="8s" 
        begin="startLineDraw.click" 
        fill="freeze"/>
</path>
                    

Interaction

OOLONG
Apply CSS styles
                    

 
 


Apply CSS styles
.cover { 
    transition: .6s ease-in-out ; 
    fill: #D3D3D3;
}
.cover:hover { 
      -webkit-transform: rotate3d(1,0,0,-180deg);
      transform: rotate3d(1,0,0,-180deg);
}
                    

MORE INTERACTIONS

Start Show Leaf Hide Leaf

SMART POLYGON


SPIROGRAPH


WEB COMPONENTS

80% India

Older Code

<path id="holder" d="M ... Z" stroke="#f15361" stroke-width="8" fill="none"/>
<path id="cup" d="M ... " fill="#8d2a4e"/>
<path d="M ... " fill="#fbaf4a"/>
<text x="41" y="41" width="64" fill="#ffffff" ><tspan>80%</tspan></text>
<text x="50" y="100" width="110" fill="#444444" ><tspan>India</tspan></text>
//Then, separately include code for Animations and Interactivity.


Newer Code

<single-cup y="{{y}}" x="{{x}}" 
    percent="{{percent}}" 
    country="{{country}}"></single-cup>
               

Multiple Cups

Multiple Cups

//Include your element
<tea-cups id="teaCup" numCups="1" 
    percentage="[20]" countries="India" go/>
<tea-cups >

BROWSER SUPPORT


References

  • http://www.w3.org
  • https://developer.mozilla.org/
  • http://www.nytimes.com/newsgraphics/2013/10/13/russia/
  • http://srufaculty.sru.edu/
  • http://www.subcide.com/experiments/fail-whale/
  • http://caniuse.com/svg-html5

THANK YOU

  • Devina Coutinho
  • dcoutinh@adobe.com