cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Untitled</title>
    </head>
    <body>
        <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg2" height="297mm" width="210mm" inkscape:version="0.91 r13725" sodipodi:docname="sample1.svg" style="height: auto; width: auto;"><style>svg {
        background: rgba(255, 255, 255, 0);
    }</style><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1057" id="namedview135" showgrid="false" inkscape:zoom="0.6191934" inkscape:cx="537.58116" inkscape:cy="803.20192" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="layer2"></sodipodi:namedview><defs id="defs4">
    <marker style="overflow:visible;" id="marker5078" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(0.4) rotate(180) translate(10,0)" style="fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1;fill:#4d4d4d;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path5080"></path>
    </marker>
    <marker style="overflow:visible" id="marker4984" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(0.4) translate(10,0)" style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4986"></path>
    </marker>
    <marker style="overflow:visible" id="Arrow1Mstart" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(0.4) translate(10,0)" style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4232"></path>
    </marker>
    <marker style="overflow:visible" id="Tail" refX="0.0" refY="0.0" orient="auto">
      <g style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" transform="scale(-1.2)" id="g4262">
        <path style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" d="M -3.8048674,-3.9585227 L 0.54352094,0" id="path4264"></path>
        <path style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" d="M -1.2866832,-3.9585227 L 3.0617053,0" id="path4266"></path>
        <path style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" d="M 1.3053582,-3.9585227 L 5.6537466,0" id="path4268"></path>
        <path style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" d="M -3.8048674,4.1775838 L 0.54352094,0.21974226" id="path4270"></path>
        <path style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" d="M -1.2866832,4.1775838 L 3.0617053,0.21974226" id="path4272"></path>
        <path style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" d="M 1.3053582,4.1775838 L 5.6537466,0.21974226" id="path4274"></path>
      </g>
    </marker>
    <marker style="overflow:visible" id="Arrow2Mstart" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(0.6) translate(0,0)" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" id="path4250"></path>
    </marker>
    <marker style="overflow:visible;" id="Arrow2Lend" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(1.1) rotate(180) translate(1,0)" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" id="path4247"></path>
    </marker>
    <marker style="overflow:visible" id="DiamondSend" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(0.2) translate(-6,0)" style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 0,-7.0710768 L -7.0710894,0 L 0,7.0710589 L 7.0710462,0 L 0,-7.0710768 z " id="path4329"></path>
    </marker>
    <marker style="overflow:visible" id="marker4574" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4576"></path>
    </marker>
    <marker style="overflow:visible;" id="Arrow1Mend" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(0.4) rotate(180) translate(10,0)" style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4235"></path>
    </marker>
    <marker style="overflow:visible" id="marker4502" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4504"></path>
    </marker>
    <marker style="overflow:visible" id="Arrow1Lstart" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4226"></path>
    </marker>
    <marker style="overflow:visible" id="marker5078-6" refX="0" refY="0" orient="auto">
      <path transform="matrix(-0.4,0,0,-0.4,-4,0)" style="fill:#4d4d4d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1" d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z" id="path5080-6"></path>
    </marker>
  </defs><metadata id="metadata7">
    <rdf:rdf>
      <cc:work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>
        <dc:title></dc:title>
      </cc:work>
    </rdf:rdf>
  </metadata><g inkscape:groupmode="layer" id="layer2" inkscape:label="backgrounds" sodipodi:insensitive="true"></g><g inkscape:groupmode="layer" id="layer1" inkscape:label="Alphabets" style="display:inline">
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="71.08593" y="88.639359" id="text4430" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4432" x="71.08593" y="88.639359">A</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="266.79364" y="88.639359" id="text4434" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4436" x="266.79364" y="88.639359">B</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="469.30344" y="88.639359" id="text4438" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4440" x="469.30344" y="88.639359">C</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="66.837883" y="278.67331" id="text4442" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4444" x="66.837883" y="278.67331">D</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="266.79364" y="278.67331" id="text4446" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4448" x="266.79364" y="278.67331">E</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="475.08835" y="278.67331" id="text4450" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4452" x="475.08835" y="278.67331">F</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="68.913078" y="487.56882" id="text4454" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4456" x="68.913078" y="487.56882">G</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="266.79364" y="486.90964" id="text4458" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4460" x="266.79364" y="486.90964">H</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="479.37918" y="486.90964" id="text4462" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4464" x="479.37918" y="486.90964">I</tspan></text>
  </g><g inkscape:groupmode="layer" id="layer3" inkscape:label="Numbers" style="display:inline">
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="74.290199" y="91.49575" id="text4525" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4527" x="74.290199" y="91.49575">1</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="267.74893" y="91.813072" id="text4529" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4531" x="267.74893" y="91.813072">2</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="473.42819" y="91.434654" id="text4533" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4535" x="473.42819" y="91.434654">3</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="69.445183" y="283.29715" id="text4537" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4539" x="69.445183" y="283.29715">4</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="267.57803" y="282.54031" id="text4541" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4543" x="267.57803" y="282.54031">5</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="473.2695" y="286.54031" id="text4545" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4547" x="473.2695" y="286.54031">6</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="71.060188" y="487.15958" id="text4549" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4551" x="71.060188" y="487.15958">7</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="268.09073" y="487.15955" id="text4553" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4555" x="268.09073" y="487.15955">8</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="473.85544" y="487.17175" id="text4557" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4559" x="473.85544" y="487.17175">9</tspan></text>
  </g><g inkscape:groupmode="layer" id="layer4" inkscape:label="Symbols">
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="279.47964" y="279.77194" id="text4561" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4563" x="279.47964" y="279.77194">!</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="61.430466" y="279.77194" id="text4565" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4567" x="61.430466" y="279.77194">#</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="467.0069" y="89.819649" id="text4569" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4571" x="467.0069" y="89.819649">$</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="62.985153" y="491.94348" id="text4573" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4575" x="62.985153" y="491.94348">%</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="462.67334" y="491.95569" id="text4577" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4579" x="462.67334" y="491.95569">&amp;</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="458.08356" y="277.37936" id="text4585" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4587" x="458.08356" y="277.37936">@</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="268.85953" y="489.69739" id="text4593" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4595" x="268.85953" y="489.69739">+</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="275.09732" y="91.434662" id="text4597" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4599" x="275.09732" y="91.434662">?</tspan></text>
    <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:Impact;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'Impact Condensed';font-stretch:condensed;font-variant:normal;" x="69.430466" y="88.204674" id="text4601" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4603" x="69.430466" y="88.204674">=</tspan></text>
  </g></svg>

        <div class="sozi-frame-number" title="Click to show the frame list">1</div>
        <ol class="sozi-frame-list">
            
                
                    <li value="1"><a data-frame-index="0" href="#frame4029" title="parallax start">parallax start</a></li>
                
            
                
                    <li value="2"><a data-frame-index="1" href="#frame9731" title="parallax end">parallax end</a></li>
                
            
                
                    <li value="3"><a data-frame-index="2" href="#frame9361" title="alph front">alph front</a></li>
                
            
                
                    <li value="4"><a data-frame-index="3" href="#frame4608" title="numb front">numb front</a></li>
                
            
                
                    <li value="5"><a data-frame-index="4" href="#frame8987" title="symb fromt">symb fromt</a></li>
                
            
                
                    <li value="6"><a data-frame-index="5" href="#frame5968" title="alph front">alph front</a></li>
                
            
        </ol>
    </body>
</html>

            
          
!
            
                          body {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

            .sozi-frame-list {
                position: absolute;
                top: 0;
                right: 0;
                width: 33%;
                height: 100%;
                margin: 0;
                padding: 0.5em 1em;
                overflow-y: auto;

                list-style: decimal inside;

                font-family: "Droid Sans", Helvetica, Arial, sans-serif;
                font-size: 12pt;

                color: rgb(240, 255, 255);
                background-color: rgba(34, 34, 34, 0.9);
            }

            .sozi-frame-list li {
                margin: 0;
                padding: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .sozi-frame-list a {
                color: inherit;
                text-decoration: none;
            }

            .sozi-frame-list a:hover {
                color: rgb(0, 204, 255);
                text-decoration: underline;
            }

            .sozi-frame-list a.current {
                color: rgb(255, 170, 68);
            }

            .sozi-frame-number {
                position: absolute;
                top: 0;
                left: 1em;
                text-align: center;
                padding: 0.3em 0.6em;

                cursor: pointer;

                font-family: "Droid Sans", Helvetica, Arial, sans-serif;
                font-size: 12pt;
                color: rgb(240, 255, 255);
                background-color: rgba(34, 34, 34, 0.9);
            }

            svg a {
                cursor: pointer;
            }
            
          
!
            
              var soziPresentationData = {"frames":[{"frameId":"frame4029","title":"parallax start","timeoutMs":1000,"timeoutEnable":true,"transitionDurationMs":1000,"showInFrameList":true,"showFrameNumber":true,"layerProperties":{"layer2":{"transitionTimingFunction":"easeOut","transitionRelativeZoom":0,"transitionPathId":""},"layer1":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer3":{"transitionTimingFunction":"easeOut","transitionRelativeZoom":0,"transitionPathId":""},"layer4":{"transitionTimingFunction":"easeOut","transitionRelativeZoom":0,"transitionPathId":""},"__sozi_auto__":{"transitionTimingFunction":"easeOut","transitionRelativeZoom":0,"transitionPathId":""}},"cameraStates":{"layer2":{"cx":280.9524429509598,"cy":271.95787858784126,"width":900.9009599401622,"height":506.8916015625015,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer1":{"cx":119.9555161569847,"cy":272.61823423017876,"width":584.7696123358393,"height":516.600318699059,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer3":{"cx":193.5950226927671,"cy":283.4636541449232,"width":1248.3072190285125,"height":809.3990746561088,"opacity":0.5,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer4":{"cx":338.2607951271037,"cy":291.27339760969636,"width":1758.6206073638064,"height":1428.1340116868948,"opacity":0.2,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"__sozi_auto__":{"cx":280.9524429509598,"cy":271.95787858784126,"width":900.9009599401622,"height":506.8916015625015,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1}}},{"frameId":"frame9731","title":"parallax end","timeoutMs":0,"timeoutEnable":true,"transitionDurationMs":1000,"showInFrameList":true,"showFrameNumber":true,"layerProperties":{"layer2":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer1":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer3":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer4":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"__sozi_auto__":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""}},"cameraStates":{"layer2":{"cx":280.9524429509598,"cy":271.95787858784126,"width":900.9009599401622,"height":506.8916015625015,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer1":{"cx":440.79448566361816,"cy":272.61823423017876,"width":579.2205394089376,"height":516.600318699059,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer3":{"cx":386.89973360227793,"cy":283.4245916449232,"width":1224.2411265821538,"height":809.6036099060092,"opacity":0.5,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer4":{"cx":241.96191521414593,"cy":291.27339760969636,"width":1758.6206073638057,"height":1411.1142581213755,"opacity":0.2,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"__sozi_auto__":{"cx":280.9524429509598,"cy":271.95787858784126,"width":900.9009599401622,"height":506.8916015625015,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1}}},{"frameId":"frame9361","title":"alph front","timeoutMs":1000,"timeoutEnable":true,"transitionDurationMs":2000,"showInFrameList":true,"showFrameNumber":true,"layerProperties":{"layer2":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer1":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer3":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer4":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"__sozi_auto__":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""}},"cameraStates":{"layer2":{"cx":280.9524429509598,"cy":271.95787858784126,"width":900.9009599401622,"height":506.8916015625015,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer1":{"cx":440.79448566361816,"cy":272.61823423017876,"width":579.2205394089376,"height":516.600318699059,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer3":{"cx":176.48854734892763,"cy":283.4870916449232,"width":1167.8578410660323,"height":809.6222803622791,"opacity":0.5,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer4":{"cx":-390.5017721531756,"cy":291.27339760969636,"width":1758.6206073638064,"height":1428.1340116868948,"opacity":0.2,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"__sozi_auto__":{"cx":280.9524429509598,"cy":271.95787858784126,"width":900.9009599401622,"height":506.8916015625015,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1}}},{"frameId":"frame4608","title":"numb front","timeoutMs":300,"timeoutEnable":true,"transitionDurationMs":1000,"showInFrameList":true,"showFrameNumber":true,"layerProperties":{"layer2":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer1":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer3":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer4":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"__sozi_auto__":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""}},"cameraStates":{"layer2":{"cx":280.95244295095983,"cy":271.95787858784126,"width":900.9009599401631,"height":506.891601562502,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer1":{"cx":-370.7561521735039,"cy":286.6534847669769,"width":1591.0785923783924,"height":1370.6944400810942,"opacity":0.2,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer3":{"cx":444.36333031654095,"cy":275.5555631527564,"width":768.2875002680701,"height":521.8897406901109,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer4":{"cx":163.2308431497458,"cy":280.3071755112216,"width":1030.241316561618,"height":835.000378673257,"opacity":0.5,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"__sozi_auto__":{"cx":280.95244295095983,"cy":271.95787858784126,"width":900.9009599401631,"height":506.891601562502,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1}}},{"frameId":"frame8987","title":"symb fromt","timeoutMs":300,"timeoutEnable":true,"transitionDurationMs":1000,"showInFrameList":true,"showFrameNumber":true,"layerProperties":{"layer2":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer1":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer3":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer4":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"__sozi_auto__":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""}},"cameraStates":{"layer2":{"cx":280.95244295095983,"cy":271.95787858784126,"width":900.9009599401631,"height":506.891601562502,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer1":{"cx":167.8587316786984,"cy":275.86534286747536,"width":930.2707002724485,"height":801.4166507813471,"opacity":0.5,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer3":{"cx":-366.82454039490585,"cy":292.62535402351904,"width":2194.3265411426796,"height":1385.4381502376602,"opacity":0.2,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer4":{"cx":435.2781164888617,"cy":274.44226509790366,"width":664.1027385115814,"height":538.2486891380187,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"__sozi_auto__":{"cx":280.95244295095983,"cy":271.95787858784126,"width":900.9009599401631,"height":506.891601562502,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1}}},{"frameId":"frame5968","title":"alph front","timeoutMs":300,"timeoutEnable":true,"transitionDurationMs":1000,"showInFrameList":true,"showFrameNumber":true,"layerProperties":{"layer2":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer1":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer3":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"layer4":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""},"__sozi_auto__":{"transitionTimingFunction":"easeInOut","transitionRelativeZoom":0,"transitionPathId":""}},"cameraStates":{"layer2":{"cx":280.9524429509598,"cy":271.95787858784126,"width":900.9009599401622,"height":506.8916015625015,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer1":{"cx":440.77886066361816,"cy":272.61823423017876,"width":578.5688118111595,"height":516.600318699059,"opacity":1,"angle":0,"clipped":true,"clipXOffset":2.747290213118902,"clipYOffset":0,"clipWidthFactor":1.6052602465149632,"clipHeightFactor":1},"layer3":{"cx":176.48854734892763,"cy":283.4870916449232,"width":1167.8578410660323,"height":809.6222803622791,"opacity":0.5,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"layer4":{"cx":-390.5017721531756,"cy":291.27339760969636,"width":1758.6206073638064,"height":1428.1340116868948,"opacity":0.2,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1},"__sozi_auto__":{"cx":280.9524429509598,"cy":271.95787858784126,"width":900.9009599401622,"height":506.8916015625015,"opacity":1,"angle":0,"clipped":false,"clipXOffset":0,"clipYOffset":0,"clipWidthFactor":1,"clipHeightFactor":1}}}],"elementsToHide":[]};
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){"use strict";function d(a,b,c){b.hasOwnProperty(c)&&(a[c]=b[c])}Object.defineProperty(c,"__esModule",{value:!0});var e={opacity:1,angle:0,clipped:!1,clipXOffset:0,clipYOffset:0,clipWidthFactor:1,clipHeightFactor:1,init:function(a){this.svgRoot=a;var b=a.getBBox();return this.cx=b.x+b.width/2,this.cy=b.y+b.height/2,this.width=b.width,this.height=b.height,this},initFrom:function(a){return this.svgRoot=a.svgRoot,this.cx=a.cx,this.cy=a.cy,this.width=a.width,this.height=a.height,this.opacity=a.opacity,this.angle=a.angle,this.clipped=a.clipped,this.clipXOffset=a.clipXOffset,this.clipYOffset=a.clipYOffset,this.clipWidthFactor=a.clipWidthFactor,this.clipHeightFactor=a.clipHeightFactor,this},toStorable:function(){return{cx:this.cx,cy:this.cy,width:this.width,height:this.height,opacity:this.opacity,angle:this.angle,clipped:this.clipped,clipXOffset:this.clipXOffset,clipYOffset:this.clipYOffset,clipWidthFactor:this.clipWidthFactor,clipHeightFactor:this.clipHeightFactor}},toMinimalStorable:function(){return this.toStorable()},fromStorable:function(a){return d(this,a,"cx"),d(this,a,"cy"),d(this,a,"width"),d(this,a,"height"),d(this,a,"opacity"),d(this,a,"angle"),d(this,a,"clipped"),d(this,a,"clipXOffset"),d(this,a,"clipYOffset"),d(this,a,"clipWidthFactor"),d(this,a,"clipHeightFactor"),this},setAngle:function(a){return this.angle=(a+180)%360-180,this},setAtElement:function(a,b,c,d,e,f){b=b||0,c=c||0,d=d||1,e=e||1,f=f||0;var g=a.getBBox(),h=this.svgRoot.createSVGPoint();h.x=g.x+g.width/2,h.y=g.y+g.height/2;for(var i=a;i.parentNode.parentNode!==this.svgRoot;)i=i.parentNode;var j=i.getCTM().inverse().multiply(a.getCTM());h=h.matrixTransform(j);var k=Math.sqrt(j.a*j.a+j.b*j.b);return this.cx=h.x+b,this.cy=h.y+c,this.width=g.width*k*d,this.height=g.height*k*e,this.angle=180*Math.atan2(j.b,j.a)/Math.PI+f,this},resetClipping:function(){return this.clipXOffset=this.clipYOffset=0,this.clipWidthFactor=this.clipHeightFactor=1,this},offsetFromElement:function(a){var b=Object.create(e).init(this.svgRoot).setAtElement(a);return{deltaX:this.cx-b.cx,deltaY:this.cy-b.cy,widthFactor:this.width/b.width,heightFactor:this.height/b.height,deltaAngle:this.angle-b.angle}}};c.CameraState=e},{}],2:[function(a,b,c){function d(a,b,c){b.hasOwnProperty(c)&&(a[c]=b[c])}Object.defineProperty(c,"__esModule",{value:!0});var e=function(){function a(a,b){var c=[],d=!0,e=!1,f=void 0;try{for(var g,h=a[Symbol.iterator]();!(d=(g=h.next()).done)&&(c.push(g.value),!b||c.length!==b);d=!0);}catch(i){e=!0,f=i}finally{try{!d&&h["return"]&&h["return"]()}finally{if(e)throw f}}return c}return function(b,c){if(Array.isArray(b))return b;if(Symbol.iterator in Object(b))return a(b,c);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),f=a("../utils"),g=a("./CameraState"),h={link:!1,referenceElementId:"",referenceElementAuto:!0,transitionTimingFunction:"linear",transitionRelativeZoom:0,transitionPathId:"",init:function(a){return this.frame=a,this},initFrom:function(a){return this.frame=a.frame,this.link=a.link,this.referenceElementId=a.referenceElementId,this.referenceElementAuto=a.referenceElementAuto,this.transitionTimingFunction=a.transitionTimingFunction,this.transitionRelativeZoom=a.transitionRelativeZoom,this.transitionPathId=a.transitionPathId,this},toStorable:function(){return{link:this.link,referenceElementId:this.referenceElementId,referenceElementAuto:this.referenceElementAuto,transitionTimingFunction:this.transitionTimingFunction,transitionRelativeZoom:this.transitionRelativeZoom,transitionPathId:this.transitionPathId}},toMinimalStorable:function(){return{transitionTimingFunction:this.transitionTimingFunction,transitionRelativeZoom:this.transitionRelativeZoom,transitionPathId:this.transitionPathId}},fromStorable:function(a){return d(this,a,"link"),d(this,a,"referenceElementId"),d(this,a,"referenceElementAuto"),d(this,a,"transitionTimingFunction"),d(this,a,"transitionRelativeZoom"),d(this,a,"transitionPathId"),this},get index(){return this.frame.layerProperties.indexOf(this)},get referenceElement(){return this.frame.presentation.document.root.getElementById(this.referenceElementId)},get transitionPath(){return this.frame.presentation.document.root.getElementById(this.transitionPathId)},get referenceElementHide(){return this.frame.presentation.elementsToHide.indexOf(this.referenceElementId)>=0},set referenceElementHide(a){var b=this.referenceElementHide;if(a&&!b)this.frame.presentation.elementsToHide.push(this.referenceElementId);else if(!a&&b){var c=this.frame.presentation.elementsToHide.indexOf(this.referenceElementId);this.frame.presentation.elementsToHide.splice(c,1)}this.referenceElement&&(this.referenceElement.style.visibility=a?"hidden":"visible")},get transitionPathHide(){return this.frame.presentation.elementsToHide.indexOf(this.transitionPathId)>=0},set transitionPathHide(a){var b=this.transitionPathHide;if(a&&!b)this.frame.presentation.elementsToHide.push(this.transitionPathId);else if(!a&&b){var c=this.frame.presentation.elementsToHide.indexOf(this.transitionPathId);this.frame.presentation.elementsToHide.splice(c,1)}this.transitionPath&&(this.transitionPath.style.visibility=a?"hidden":"visible")}};c.LayerProperties=h;var i={title:"New frame",timeoutMs:0,timeoutEnable:!1,transitionDurationMs:1e3,showInFrameList:!0,showFrameNumber:!0,init:function(a){var b=this;return this.presentation=a,this.frameId=a.makeFrameId(),this.layerProperties=a.layers.map(function(a){return Object.create(h).init(b)}),this.cameraStates=a.layers.map(function(b){return Object.create(g.CameraState).init(a.document.root)}),this},initFrom:function(a,b){return this.presentation=a.presentation,b||(this.frameId=a.presentation.makeFrameId()),this.title=a.title,this.timeoutMs=a.timeoutMs,this.timeoutEnable=a.timeoutEnable,this.transitionDurationMs=a.transitionDurationMs,this.showInFrameList=a.showInFrameList,this.showFrameNumber=a.showFrameNumber,this.layerProperties=a.layerProperties.map(function(a){return Object.create(h).initFrom(a)}),this.cameraStates=a.cameraStates.map(function(a){return Object.create(g.CameraState).initFrom(a)}),this},toStorable:function(){var a=this,b={},c={},d={};return this.presentation.layers.forEach(function(e,f){var g=a.layerProperties[f],h=a.cameraStates[f],i=g.referenceElement,j=e.groupId;b[j]=g.toStorable(),c[j]=h.toStorable(),i&&(d[j]=a.cameraStates[f].offsetFromElement(i))}),{frameId:this.frameId,title:this.title,timeoutMs:this.timeoutMs,timeoutEnable:this.timeoutEnable,transitionDurationMs:this.transitionDurationMs,showInFrameList:this.showInFrameList,showFrameNumber:this.showFrameNumber,layerProperties:b,cameraStates:c,cameraOffsets:d}},toMinimalStorable:function(){var a=this,b={},c={};return this.presentation.layers.forEach(function(d,e){var f=a.layerProperties[e],g=a.cameraStates[e],h=d.groupId;b[h]=f.toMinimalStorable(),c[h]=g.toMinimalStorable()}),{frameId:this.frameId,title:this.title,timeoutMs:this.timeoutMs,timeoutEnable:this.timeoutEnable,transitionDurationMs:this.transitionDurationMs,showInFrameList:this.showInFrameList,showFrameNumber:this.showFrameNumber,layerProperties:b,cameraStates:c}},fromStorable:function(a){var b=this;return d(this,a,"frameId"),d(this,a,"title"),d(this,a,"timeoutMs"),d(this,a,"timeoutEnable"),d(this,a,"transitionDurationMs"),d(this,a,"showInFrameList"),d(this,a,"showFrameNumber"),this.presentation.layers.forEach(function(c,d){var e=c.groupId in a.layerProperties?c.groupId:"__sozi_auto__";if(e in a.layerProperties){var f=b.layerProperties[d];f.fromStorable(a.layerProperties[e]);var g=b.cameraStates[d].fromStorable(a.cameraStates[e]),h=f.referenceElement;if(h){var i=a.cameraOffsets[e]||{};g.setAtElement(h,i.deltaX,i.deltaY,i.widthFactor,i.heightFactor,i.deltaAngle)}}}),this},get index(){return this.presentation.frames.indexOf(this)},setAtStates:function(a){var b=this;a.forEach(function(a,c){b.cameraStates[c].initFrom(a)})},isLinkedTo:function(a,b){var c=this.index<a.index?[this,a]:[a,this],d=e(c,2),f=d[0],g=d[1];return g.layerProperties[b].link&&(g.index===f.index+1||g.index>f.index&&this.presentation.frames[g.index-1].isLinkedTo(f,b))}};c.Frame=i;var j={init:function(a,b,c){return this.presentation=a,this.label=b,this.auto=c,this.svgNodes=[],this},get groupId(){return this.auto?"__sozi_auto__":this.svgNodes[0].getAttribute("id")},get index(){return this.presentation.layers.indexOf(this)},get isVisible(){return this.svgNodes.some(function(a){return"none"!==window.getComputedStyle(a).display})},set isVisible(a){this.svgNodes.forEach(function(b){b.style.display=a?"inline":"none"})}};c.Layer=j;var k="http://www.w3.org/2000/svg",l={aspectWidth:4,aspectHeight:3,init:function(a){var b=this;this.document=a,this.frames=[],this.layers=[],this.elementsToHide=[];var c=Object.create(j).init(this,"auto",!0);return(0,f.toArray)(this.document.root.childNodes).forEach(function(a){if("g"===a.localName){var d=a.getAttribute("id");if(null===d)c.svgNodes.push(a);else{var e=Object.create(j).init(b,b.document.handler.getLabel(a)||"#"+d,!1);e.svgNodes.push(a),b.layers.push(e)}}}),this.layers.push(c),this},toStorable:function(){return{aspectWidth:this.aspectWidth,aspectHeight:this.aspectHeight,frames:this.frames.map(function(a){return a.toStorable()}),elementsToHide:this.elementsToHide.slice()}},toMinimalStorable:function(){return{frames:this.frames.map(function(a){return a.toMinimalStorable()}),elementsToHide:this.elementsToHide.slice()}},fromStorable:function(a){var b=this;return d(this,a,"aspectWidth"),d(this,a,"aspectHeight"),this.frames=a.frames.map(function(a){return Object.create(i).init(b).fromStorable(a)}),a.elementsToHide&&(this.elementsToHide=a.elementsToHide.slice()),this},get title(){var a=this.document.root.getElementsByTagNameNS(k,"title");return a.length?a[0].firstChild.wholeText.trim():"Untitled"},makeFrameId:function(){var a,b="frame",c=Math.floor(1e3*(1+9*Math.random()));do a=b+c,c++;while(this.frames.some(function(b){return b.frameId===a}));return a},getFrameWithId:function(a){for(var b=0;b<this.frames.length;b++)if(this.frames[b].frameId===a)return this.frames[b];return null},getLayerWithId:function(a){for(var b=0;b<this.layers.length;b++)if(this.layers[b].groupId===a)return this.layers[b];return null},updateLinkedLayers:function(){var a=this;if(this.frames.length){var b=this.frames[0].cameraStates,c=b[b.length-1];this.layers.forEach(function(b,d){var e=c;a.frames.forEach(function(a){a.layerProperties[d].link?a.cameraStates[d].initFrom(e):e=a.cameraStates[d]})})}}};c.Presentation=l},{"../utils":14,"./CameraState":1}],3:[function(a,b,c){function d(a){if(a&&a.__esModule)return a;var b={};if(null!=a)for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&(b[c]=a[c]);return b["default"]=a,b}var e=a("./svg/SVGDocument"),f=a("./model/Presentation"),g=a("./player/Viewport"),h=a("./player/Player"),i=a("./player/Media"),j=d(i),k=a("./player/FrameList"),l=d(k),m=a("./player/FrameNumber"),n=d(m),o=a("./player/FrameURL"),p=d(o);window.addEventListener("load",function(){e.SVGDocument.init(document.querySelector("svg")),f.Presentation.init(e.SVGDocument),g.Viewport.init(f.Presentation,!1).onLoad(),f.Presentation.fromStorable(window.soziPresentationData),h.Player.init(g.Viewport,f.Presentation),j.init(h.Player),l.init(h.Player),n.init(h.Player),p.init(h.Player),window.sozi={presentation:f.Presentation,viewport:g.Viewport,player:h.Player},h.Player.addListener("change:playing",function(a,b){b?document.title=f.Presentation.title:document.title=f.Presentation.title+"(Paused)"}),window.addEventListener("resize",g.Viewport.repaint.bind(g.Viewport)),f.Presentation.frames.length&&h.Player.playFromIndex(p.getFrameIndex()),g.Viewport.repaint()})},{"./model/Presentation":2,"./player/FrameList":6,"./player/FrameNumber":7,"./player/FrameURL":8,"./player/Media":9,"./player/Player":10,"./player/Viewport":12,"./svg/SVGDocument":13}],4:[function(a,b,c){function d(){k>0?(h&&h(d),l.forEach(function(a){a.running&&a.step()})):h||window.clearInterval(f)}function e(){h?h(d):f=window.setInterval(d,j)}Object.defineProperty(c,"__esModule",{value:!0});var f,g=a("events"),h=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame,i=window.performance&&window.performance.now?window.performance:Date,j=40,k=0,l=[],m=Object.create(g.EventEmitter.prototype);c.Animator=m,m.init=function(){return g.EventEmitter.call(this),this.durationMs=500,this.initialTime=0,this.running=!1,l.push(this),this},m.start=function(a){this.durationMs=a,this.initialTime=i.now(),this.emit("step",0),this.running||(this.running=!0,k++,1===k&&e())},m.stop=function(){this.running&&(this.running=!1,k--,this.emit("stop"))},m.step=function(){var a=i.now()-this.initialTime;a>=this.durationMs?(this.emit("step",1),this.running=!1,k--,this.emit("done")):this.emit("step",a/this.durationMs)}},{events:15}],5:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});var d=a("../model/CameraState"),e="http://www.w3.org/2000/svg",f=Object.create(d.CameraState);c.Camera=f,f.init=function(a,b){if(d.CameraState.init.call(this,a.svgRoot),this.viewport=a,this.layer=b,this.selected=!0,this.svgClipRect=document.createElementNS(e,"rect"),a.editMode){this.maskValue=0;var c=document.createElementNS(e,"mask"),f=a.makeUniqueId("sozi-mask-");c.setAttribute("id",f),a.svgRoot.appendChild(c),this.svgMaskRect=document.createElementNS(e,"rect"),c.appendChild(this.svgMaskRect),this.svgClipRect.setAttribute("fill","white"),c.appendChild(this.svgClipRect),this.svgClipOutlineRect1=document.createElementNS(e,"rect"),this.svgClipOutlineRect1.setAttribute("stroke","black"),this.svgClipOutlineRect1.setAttribute("fill","none"),a.svgRoot.appendChild(this.svgClipOutlineRect1),this.svgClipOutlineRect2=document.createElementNS(e,"rect"),this.svgClipOutlineRect2.setAttribute("stroke","white"),this.svgClipOutlineRect2.setAttribute("fill","none"),this.svgClipOutlineRect2.setAttribute("stroke-dasharray","2,2"),a.svgRoot.appendChild(this.svgClipOutlineRect2),this.concealClipping()}else{var g=document.createElementNS(e,"clipPath"),h=a.makeUniqueId("sozi-clip-path-");g.setAttribute("id",h),g.appendChild(this.svgClipRect),a.svgRoot.appendChild(g)}return this.svgTransformGroups=b.svgNodes.map(function(b){var c=document.createElementNS(e,"g");a.svgRoot.insertBefore(c,b),a.editMode?c.setAttribute("mask","url(#"+f+")"):c.setAttribute("clip-path","url(#"+h+")");var d=document.createElementNS(e,"g");return d.appendChild(b),c.appendChild(d),d}),this},f.revealClipping=function(){this.maskValue=64,this.svgClipOutlineRect1.style.display="inline",this.svgClipOutlineRect2.style.display="inline"},f.concealClipping=function(){this.maskValue=0,this.svgClipOutlineRect1.style.display="none",this.svgClipOutlineRect2.style.display="none"},Object.defineProperty(f,"scale",{get:function(){return Math.min(this.viewport.width/this.width,this.viewport.height/this.height)}}),f.rotate=function(a){return this.restoreAspectRatio(),this.setAngle(this.angle+a).update()},f.zoom=function(a,b,c){return this.width/=a,this.height/=a,this.restoreAspectRatio(),this.translate((1-a)*(b-this.viewport.width/2),(1-a)*(c-this.viewport.height/2))},f.translate=function(a,b){var c=this.scale,d=this.angle*Math.PI/180,e=Math.sin(d),f=Math.cos(d);return this.cx-=(a*f-b*e)/c,this.cy-=(a*e+b*f)/c,this.restoreAspectRatio(),this.update()},f.clip=function(a,b,c,d){this.clipped=!0;var e=this.scale,f=Math.abs(c-a)+1,g=Math.abs(d-b)+1;return this.clipXOffset=(Math.min(a,c)-(this.viewport.width-f)/2)*this.width/f,this.clipYOffset=(Math.min(b,d)-(this.viewport.height-g)/2)*this.height/g,this.clipWidthFactor=f/this.width/e,this.clipHeightFactor=g/this.height/e,this.update()},f.restoreAspectRatio=function(){var a=this.viewport.width/this.viewport.height,b=this.width/this.height,c=a/b;c>1?(this.width*=c,this.clipped&&(this.clipWidthFactor/=c)):(this.height/=c,this.clipped&&(this.clipHeightFactor*=c))},f.getCandidateReferenceElement=function(){if(!this.svgRoot.getIntersectionList||!this.layer.svgNodes.length)return this.svgRoot;var a=this.svgRoot.createSVGRect();a.x=0,a.y=0,a.width=this.viewport.width,a.height=this.viewport.height;for(var b,c=this.viewport.width*this.viewport.height,d=this.svgRoot.getIntersectionList(a,this.layer.svgNodes[0]),e=-1,f=0;f<d.length;f++){var g=d[f];if(g.hasAttribute("id")){var h=g.getBoundingClientRect(),i=h.width*h.height,j=Math.max(h.left,this.viewport.x),k=Math.max(h.top,this.viewport.y),l=Math.min(h.right,this.viewport.x+this.viewport.width),m=Math.min(h.bottom,this.viewport.y+this.viewport.height),n=(l-j)*(m-k),o=c+i-2*n;(0>e||e>o)&&(e=o,b=g)}}return b},Object.defineProperty(f,"clipRect",{get:function(){var a,b,c,d;if(this.clipped){var e=this.scale;a=Math.round(this.width*this.clipWidthFactor*e),b=Math.round(this.height*this.clipHeightFactor*e),c=Math.round((this.viewport.width-a)/2+this.clipXOffset*this.clipWidthFactor*e),d=Math.round((this.viewport.height-b)/2+this.clipYOffset*this.clipHeightFactor*e)}else a=this.viewport.width,b=this.viewport.height,c=0,d=0;return{width:a,height:b,x:c,y:d}}}),f.update=function(){var a=this,b=this.clipRect;this.svgClipRect.setAttribute("x",b.x),this.svgClipRect.setAttribute("y",b.y),this.svgClipRect.setAttribute("width",b.width),this.svgClipRect.setAttribute("height",b.height),this.viewport.editMode&&(this.svgMaskRect.setAttribute("fill","rgb("+this.maskValue+","+this.maskValue+","+this.maskValue+")"),this.svgMaskRect.setAttribute("x",0),this.svgMaskRect.setAttribute("y",0),this.svgMaskRect.setAttribute("width",this.viewport.width),this.svgMaskRect.setAttribute("height",this.viewport.height),this.svgClipOutlineRect1.setAttribute("x",b.x),this.svgClipOutlineRect1.setAttribute("y",b.y),this.svgClipOutlineRect1.setAttribute("width",b.width),this.svgClipOutlineRect1.setAttribute("height",b.height),this.svgClipOutlineRect2.setAttribute("x",b.x),this.svgClipOutlineRect2.setAttribute("y",b.y),this.svgClipOutlineRect2.setAttribute("width",b.width),this.svgClipOutlineRect2.setAttribute("height",b.height));var c=this.scale,d=this.viewport.width/c/2-this.cx,e=this.viewport.height/c/2-this.cy;return this.svgTransformGroups.forEach(function(b){b.setAttribute("transform","scale("+c+")translate("+d+","+e+")rotate("+-a.angle+","+a.cx+","+a.cy+")"),b.setAttribute("opacity",a.opacity)}),this},f.interpolate=function(a,b,c,d,e,f,g){function h(a,b){return b*j+a*k}function i(a,b){var d=(e>0?Math.max(a,b):Math.min(a,b))*(1-e),f=a-d,g=b-d,h=Math.sqrt(f/g),i=h/(1+h),j=f/i/i,k=c-i;return j*k*k+d}var j=d(c),k=1-j;if(e?(this.width=i(a.width,b.width),this.height=i(a.height,b.height)):(this.width=h(a.width,b.width),this.height=h(a.height,b.height)),f){var l=f.getTotalLength(),m=f.getPointAtLength(g?l:0),n=f.getPointAtLength(g?0:l),o=f.getPointAtLength(l*(g?k:j));this.cx=o.x+h(a.cx-m.x,b.cx-n.x),this.cy=o.y+h(a.cy-m.y,b.cy-n.y)}else this.cx=h(a.cx,b.cx),this.cy=h(a.cy,b.cy);this.opacity=h(a.opacity,b.opacity),b.angle-a.angle>180?this.angle=h(a.angle,b.angle-360):b.angle-a.angle<-180?this.angle=h(a.angle-360,b.angle):this.angle=h(a.angle,b.angle),this.clipped=!0;var p=this.scale,q={clipXOffset:0,clipYOffset:0,clipWidthFactor:this.viewport.width/this.width/p,clipHeightFactor:this.viewport.height/this.height/p},r=a.clipped?a:q,s=b.clipped?b:q;for(var t in q)this[t]=h(r[t],s[t])}},{"../model/CameraState":1}],6:[function(a,b,c){function d(a){if(a&&a.__esModule)return a;var b={};if(null!=a)for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&(b[c]=a[c]);return b["default"]=a,b}function e(a){w=a,u=document.querySelector(".sozi-frame-list"),v=(0,p.toArray)(u.querySelectorAll("li a")),v.forEach(function(a){a.addEventListener("click",function(b){0===b.button&&(w.previewFrame(parseInt(a.dataset.frameIndex)),b.preventDefault())})}),x=Object.create(q.Animator).init(),x.addListener("step",l),window.addEventListener("keypress",k,!1),w.viewport.addListener("mouseDown",m),u.addEventListener("mouseout",n,!1),a.addListener("frameChange",o),f(y)}function f(a){A=a,u.style.left=A*u.clientWidth+"px"}function g(a){w.pause(),y=A,z=a,x.start(Math.abs(z-y)*t)}function h(){g(0)}function i(){g(-1)}function j(){g(-1-z)}function k(a){if(!(a.altKey||a.ctrlKey||a.metaKey)){switch(a.charCode||a.which){case 84:case 116:j();break;default:return}a.stopPropagation(),a.preventDefault()}}function l(a){var b=s.ease(a);f(z*b+y*(1-b))}function m(a){1===a&&j()}function n(a){for(var b=a.relatedTarget;b&&b!==u&&b!==document.documentElement;)b=b.parentNode;b!==u&&(i(),a.stopPropagation())}function o(){v.forEach(function(a){a.className=parseInt(a.dataset.frameIndex)===w.currentFrameIndex?"current":""})}Object.defineProperty(c,"__esModule",{value:!0}),c.init=e,c.open=h,c.close=i,c.toggle=j;var p=a("../utils"),q=a("./Animator"),r=a("./Timing"),s=d(r);const t=500;var u,v,w,x,y=-1,z=-1,A=y},{"../utils":14,"./Animator":4,"./Timing":11}],7:[function(a,b,c){function d(a){if(a&&a.__esModule)return a;var b={};if(null!=a)for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&(b[c]=a[c]);return b["default"]=a,b}function e(a){var b=document.querySelector(".sozi-frame-number");a.addListener("frameChange",function(){b.innerHTML=a.currentFrameIndex+1,b.style.visibility=a.currentFrame.showFrameNumber?"visible":"hidden"}),b.addEventListener("click",g.open)}Object.defineProperty(c,"__esModule",{value:!0}),c.init=e;var f=a("./FrameList"),g=d(f)},{"./FrameList":6}],8:[function(a,b,c){"use strict";function d(a){h=a,window.addEventListener("hashchange",f,!1),h.addListener("frameChange",g)}function e(){if(window.location.hash){var a=window.location.hash.slice(1),b=h.presentation.getFrameWithId(a);if(b)return b.index;var c=parseInt(a);return!isNaN(c)&&c>0&&c<=h.presentation.frames.length?c-1:h.currentFrameIndex}return h.currentFrameIndex}function f(){var a=e();h.currentFrameIndex!==a&&h.moveToFrame(a)}function g(){window.location.hash="#"+h.currentFrame.frameId}Object.defineProperty(c,"__esModule",{value:!0}),c.init=d,c.getFrameIndex=e;var h},{}],9:[function(a,b,c){function d(a){a.stopPropagation()}function e(){var a=g.currentFrame.frameId;a in l&&l[a].forEach(function(a){a.play()}),a in m&&m[a].forEach(function(a){a.pause()})}function f(a){g=a,g.addListener("frameChange",e);for(var b,c=g.presentation.document.root,f=c.attributes,n=0;n<f.length;n++)if(f[n].value===j){b=f[n].name.slice(6);break}if(b){var o=c.getElementsByTagName(b+":video"),p=c.getElementsByTagName(b+":audio"),q=(0,h.toArray)(o).concat((0,h.toArray)(p)),r=[];q.forEach(function(a){var c=a.parentNode,e=a.localName.slice(b.length+1),f=document.createElementNS(k,"source");f.setAttribute("type",a.getAttribute(b+":type")),f.setAttribute("src",a.getAttribute(b+":src"));for(var g=0;g<r.length&&r[g].rect!==c;g+=1);if(g===r.length){c.setAttribute("visibility","hidden");var h=document.createElementNS(k,e);h.setAttribute("controls","controls"),"video"===e&&(h.setAttribute("width",c.getAttribute("width")),h.setAttribute("height",c.getAttribute("height"))),h.addEventListener("click",d,!1),h.addEventListener("mousedown",d,!1),h.addEventListener("mouseup",d,!1),h.addEventListener("mousemove",d,!1),h.addEventListener("contextmenu",d,!1);var j=document.createElementNS(k,"html");j.appendChild(h);var n=document.createElementNS(i,"foreignObject");if(n.setAttribute("x",c.getAttribute("x")),n.setAttribute("y",c.getAttribute("y")),n.setAttribute("width",c.getAttribute("width")),n.setAttribute("height",c.getAttribute("height")),n.appendChild(j),c.parentNode.insertBefore(n,c.nextSibling),a.hasAttribute(b+":start-frame")){var o=a.getAttribute(b+":start-frame"),p=a.getAttribute(b+":stop-frame");o in l||(l[o]=[]),p in m||(m[p]=[]),l[o].push(h),m[p].push(h)}"true"===a.getAttribute(b+":loop")&&h.setAttribute("loop","true"),r.push({rect:a.parentNode,htmlMedia:h})}r[g].htmlMedia.appendChild(f)})}}Object.defineProperty(c,"__esModule",{value:!0}),c.init=f;var g,h=a("../utils"),i="http://www.w3.org/2000/svg",j="http://sozi.baierouge.fr",k="http://www.w3.org/1999/xhtml",l={},m={}},{"../utils":14}],10:[function(a,b,c){function d(a){if(a&&a.__esModule)return a;var b={};if(null!=a)for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&(b[c]=a[c]);return b["default"]=a,b}Object.defineProperty(c,"__esModule",{value:!0});var e=a("./Animator"),f=a("./Timing"),g=d(f),h=a("../model/CameraState"),i=a("events"),j=500,k=0,l="ease",m=1.05,n=5,o=Object.create(i.EventEmitter.prototype);c.Player=o,o.init=function(a,b){return i.EventEmitter.call(this),this.viewport=a,this.presentation=b,this.animator=Object.create(e.Animator).init(),this.playing=!1,this.waitingTimeout=!1,this.currentFrameIndex=0,this.targetFrameIndex=0,this.timeoutHandle=null,this.transitions=[],this.setupEventHandlers(),this},o.setupEventHandlers=function(){this.viewport.addListener("click",this.onClick.bind(this)),this.viewport.addListener("dragStart",this.pause.bind(this)),this.viewport.addListener("userChangeState",this.pause.bind(this)),window.addEventListener("keydown",this.onKeyDown.bind(this),!1),window.addEventListener("keypress",this.onKeyPress.bind(this),!1),this.animator.addListener("step",this.onAnimatorStep.bind(this)),this.animator.addListener("stop",this.onAnimatorStop.bind(this)),this.animator.addListener("done",this.onAnimatorDone.bind(this))},o.onClick=function(a){switch(a){case 0:this.moveToNext();break;case 2:this.moveToPrevious()}},o.onKeyDown=function(a){if(!(a.altKey||a.ctrlKey||a.metaKey)){switch(a.keyCode){case 36:a.shiftKey?this.jumpToFirst():this.moveToFirst();break;case 35:a.shiftKey?this.jumpToLast():this.moveToLast();break;case 38:case 33:case 37:a.shiftKey?this.jumpToPrevious():this.moveToPrevious();break;case 40:case 34:case 39:case 13:case 32:a.shiftKey?this.jumpToNext():this.moveToNext();break;default:return}a.stopPropagation(),a.preventDefault()}},o.onKeyPress=function(a){if(!(a.altKey||a.ctrlKey||a.metaKey)){switch(a.charCode||a.which){case 43:this.viewport.zoom(m,this.viewport.width/2,this.viewport.height/2),this.pause();break;case 45:this.viewport.zoom(1/m,this.viewport.width/2,this.viewport.height/2),this.pause();break;case 82:this.viewport.rotate(-n),this.pause();break;case 114:this.viewport.rotate(n),this.pause();break;case 80:case 112:this.playing?this.pause():this.resume();break;default:return}a.stopPropagation(),a.preventDefault()}},Object.defineProperty(o,"currentFrame",{get:function(){return this.presentation.frames[this.currentFrameIndex]}}),Object.defineProperty(o,"targetFrame",{get:function(){return this.presentation.frames[this.targetFrameIndex]}}),Object.defineProperty(o,"previousFrameIndex",{get:function(){var a=this.animator.running?this.targetFrameIndex:this.currentFrameIndex;return(a+this.presentation.frames.length-1)%this.presentation.frames.length}}),Object.defineProperty(o,"nextFrameIndex",{get:function(){var a=this.animator.running?this.targetFrameIndex:this.currentFrameIndex;return(a+1)%this.presentation.frames.length}}),o.showCurrentFrame=function(){return this.viewport.setAtStates(this.currentFrame.cameraStates).update(),this.emit("frameChange"),this},o.playFromIndex=function(a){return this.playing=!0,this.waitingTimeout=!1,this.targetFrameIndex=a,this.currentFrameIndex=a,this.showCurrentFrame(),this.waitTimeout(),this},o.pause=function(){return this.animator.stop(),this.waitingTimeout&&(window.clearTimeout(this.timeoutHandle),this.waitingTimeout=!1),this.playing=!1,this.targetFrameIndex=this.currentFrameIndex,this},o.resume=function(){return this.playFromIndex(this.currentFrameIndex),this},o.waitTimeout=function(){return this.currentFrame.timeoutEnable&&(this.waitingTimeout=!0,this.timeoutHandle=window.setTimeout(this.moveToFrame.bind(this,this.nextFrameIndex),this.currentFrame.timeoutMs)),this},o.jumpToFrame=function(a){return this.pause(),this.targetFrameIndex=a,this.currentFrameIndex=a,this.showCurrentFrame(),this},o.jumpToFirst=function(){return this.jumpToFrame(0)},o.jumpToLast=function(){return this.jumpToFrame(this.presentation.frames.length-1)},o.jumpToPrevious=function(){return this.jumpToFrame(this.previousFrameIndex)},o.jumpToNext=function(){return this.jumpToFrame(this.nextFrameIndex)},o.moveToFrame=function(a){var b=this;this.waitingTimeout&&(window.clearTimeout(this.timeoutHandle),this.waitingTimeout=!1),this.targetFrameIndex=a;var c=null,d=j,e=!1,f=!1;return a===this.nextFrameIndex?(d=this.targetFrame.transitionDurationMs,c=this.targetFrame.layerProperties,e=!0):a===this.previousFrameIndex&&(d=this.currentFrame.transitionDurationMs,c=this.currentFrame.layerProperties,e=!0,f=!0),this.playing=!0,this.viewport.cameras.forEach(function(a){var d=g[l],h=k,i=null;if(c){var j=c[a.layer.index];h=j.transitionRelativeZoom,d=g[j.transitionTimingFunction],e&&(i=j.transitionPath),f&&(d=d.reverse)}b.setupTransition(a,d,h,i,f)}),this.animator.start(d),this},o.moveToFirst=function(){return this.moveToFrame(0)},o.moveToLast=function(){return this.moveToFrame(this.presentation.frames.length-1)},o.moveToPrevious=function(){for(var a=this.previousFrameIndex;a>=0;a--){var b=this.presentation.frames[a];if(!b.timeoutEnable||0!==b.timeoutMs){this.moveToFrame(a);break}}return this},o.moveToNext=function(){return this.moveToFrame(this.nextFrameIndex)},o.moveToCurrent=function(){return this.moveToFrame(this.currentFrameIndex)},o.previewFrame=function(a){var b=this;return this.targetFrameIndex=a,this.viewport.cameras.forEach(function(a){b.setupTransition(a,g[l],k)}),this.animator.start(j),this},o.setupTransition=function(a,b,c,d,e){return this.animator.running&&this.animator.stop(),this.transitions.push({camera:a,initialState:Object.create(h.CameraState).initFrom(a),finalState:this.targetFrame.cameraStates[a.layer.index],timingFunction:b,relativeZoom:c,svgPath:d,reverse:e}),this},o.onAnimatorStep=function(a){this.transitions.forEach(function(b){b.camera.interpolate(b.initialState,b.finalState,a,b.timingFunction,b.relativeZoom,b.svgPath,b.reverse),b.camera.update()})},o.onAnimatorStop=function(){this.transitions=[],this.currentFrameIndex=this.targetFrameIndex,this.emit("frameChange")},o.onAnimatorDone=function(){this.transitions=[],this.currentFrameIndex=this.targetFrameIndex,this.emit("frameChange"),this.playing&&this.waitTimeout()}},{"../model/CameraState":1,"./Animator":4,"./Timing":11,events:15}],11:[function(a,b,c){"use strict";function d(a,b){return 1-3*b+3*a}function e(a,b){return 3*b-6*a}function f(a){return 3*a}function g(a,b,c,d){return((b*a+c)*a+d)*a}function h(a,b,c,d){return(3*b*a+2*c)*a+d}function i(a,b,c,i){var j=d(a,c),k=e(a,c),l=f(a),m=d(b,i),n=e(b,i),o=f(b);return a===b&&c===i?function(a){return a}:function(a){for(var b=a,c=0;4>c;c++){var d=h(b,j,k,l);if(0===d)break;var e=g(b,j,k,l)-a;b-=e/d}return g(b,m,n,o)}}function j(a,b){var c="start"===b?Math.ceil:Math.floor;return function(b){return c(a*b)/a}}function k(a){return a>=.5?1:0}Object.defineProperty(c,"__esModule",{value:!0}),c.makeBezier=i,c.makeSteps=j,c.stepMiddle=k;var l=i(0,0,1,1);c.linear=l,l.reverse=l;var m=i(.25,.1,.25,1);c.ease=m,m.reverse=m;var n=i(.42,0,1,1);c.easeIn=n;var o=i(0,0,.58,1);c.easeOut=o,n.reverse=o,o.reverse=n;var p=i(.42,0,.58,1);c.easeInOut=p,p.reverse=p;var q=j(1,"start");c.stepStart=q;var r=j(1,"end");c.stepEnd=r,q.reverse=r,r.reverse=q,k.reverse=k},{}],12:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});var d=a("./Camera"),e=a("events"),f=0,g=5,h=1.05,i=5,j=200,k=3,l=Object.create(e.EventEmitter.prototype);c.Viewport=l,l.init=function(a,b){return e.EventEmitter.call(this),this.presentation=a,this.editMode=!!b,this.cameras=[],this.mouseDragX=0,this.mouseDragY=0,this.dragMode="translate",
this.clipMode={cameras:[],operation:"select"},this.showHiddenElements=!1,this.wheelTimeout=null,this.dragHandler=this.onDrag.bind(this),this.dragEndHandler=this.onDragEnd.bind(this),this},l.makeUniqueId=function(a){var b,c=Math.floor(1e3*(1+9*Math.random()));do b=a+c,c++;while(this.svgRoot.getElementById(b));return b},l.onLoad=function(){var a=this;this.svgRoot.addEventListener("mousedown",this.onMouseDown.bind(this),!1),this.svgRoot.addEventListener("mousemove",this.onMouseMove.bind(this),!1),this.svgRoot.addEventListener("contextmenu",this.onContextMenu.bind(this),!1);var b="onwheel"in document.createElement("div")?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll";return this.svgRoot.addEventListener(b,this.onWheel.bind(this),!1),this.cameras=this.presentation.layers.map(function(b){return Object.create(d.Camera).init(a,b)}),this},Object.defineProperty(l,"svgRoot",{get:function(){return this.presentation.document.root}}),l.getLayer=function(a){return this.layers.filter(function(b){return b.nodeId===a})[0]},l.onContextMenu=function(a){a.stopPropagation(),a.preventDefault(),this.emit("click",2,a)},l.onMouseMove=function(a){if("clip"===this.dragMode)switch(this.getClipMode(a).operation){case"select":this.svgRoot.style.cursor="crosshair";break;case"n":case"s":this.svgRoot.style.cursor="ns-resize";break;case"w":case"e":this.svgRoot.style.cursor="ew-resize";break;case"nw":case"se":this.svgRoot.style.cursor="nwse-resize";break;case"ne":case"sw":this.svgRoot.style.cursor="nesw-resize";break;case"move":this.svgRoot.style.cursor="move";break;default:this.svgRoot.style.cursor="default"}else this.svgRoot.style.cursor="default"},l.onMouseDown=function(a){a.stopPropagation(),a.preventDefault(),a.button===f&&(this.mouseDragged=!1,this.mouseDragX=this.mouseDragStartX=a.clientX,this.mouseDragY=this.mouseDragStartY=a.clientY,document.documentElement.addEventListener("mousemove",this.dragHandler,!1),document.documentElement.addEventListener("mouseup",this.dragEndHandler,!1),"clip"===this.dragMode&&(this.clipMode=this.getClipMode(a))),this.emit("mouseDown",a.button)},l.getClipMode=function(a){var b=a.clientX-this.x,c=a.clientY-this.y,d={nw:[],sw:[],ne:[],se:[],w:[],e:[],n:[],s:[],move:[]},e=this.cameras.filter(function(a){return a.selected});e.forEach(function(a){var e=a.clipRect;if(b>=e.x-k&&b<=e.x+e.width+k&&c>=e.y-k&&c<=e.y+e.height+k){var f=b<=e.x+k,g=b>=e.x+e.width-k-1,h=c<=e.y+k,i=c>=e.y+e.height-k-1,j=f||g||h||i?(h?"n":i?"s":"")+(f?"w":g?"e":""):"move";d[j].push(a)}});for(var f in d)if(d[f].length)return{cameras:d[f],operation:f};return{cameras:e,operation:"select"}},l.onDrag=function(a){a.stopPropagation();var b=a.clientX-this.x-this.width/2,c=a.clientY-this.y-this.height/2,d=180*Math.atan2(c,b)/Math.PI,e=a.clientX,f=a.clientY,h=Math.sqrt(b*b+c*c),i=a.clientX-this.mouseDragX,j=a.clientY-this.mouseDragY;if(!this.mouseDragged&&(Math.abs(i)>g||Math.abs(j)>g)&&(this.mouseDragged=!0,this.rotateStart=this.rotatePrev=d,this.translateStartX=this.translateXPrev=e,this.translateStartY=this.translateYPrev=f,this.zoomPrev=h,this.emit("dragStart")),this.mouseDragged){var k=this.dragMode;switch("translate"==k&&(a.altKey?k="scale":a.shiftKey&&(k="rotate")),k){case"scale":0!==this.zoomPrev&&this.zoom(h/this.zoomPrev,this.width/2,this.height/2),this.zoomPrev=h;break;case"rotate":a.ctrlKey&&(d=10*Math.round((d-this.rotateStart)/10)+this.rotateStart),this.rotate(this.rotatePrev-d),this.rotatePrev=d;break;case"clip":switch(this.clipMode.operation){case"select":this.clip(this.mouseDragStartX-this.x,this.mouseDragStartY-this.y,this.mouseDragX-this.x,this.mouseDragY-this.y);break;case"move":this.clipRel(i,j,i,j);break;case"w":this.clipRel(i,0,0,0);break;case"e":this.clipRel(0,0,i,0);break;case"n":this.clipRel(0,j,0,0);break;case"s":this.clipRel(0,0,0,j);break;case"nw":this.clipRel(i,j,0,0);break;case"ne":this.clipRel(0,j,i,0);break;case"sw":this.clipRel(i,0,0,j);break;case"se":this.clipRel(0,0,i,j)}break;default:a.ctrlKey&&(Math.abs(e-this.translateStartX)>=Math.abs(f-this.translateStartY)?f=this.translateStartY:e=this.translateStartX),this.translate(e-this.translateXPrev,f-this.translateYPrev),this.translateXPrev=e,this.translateYPrev=f}this.mouseDragX=a.clientX,this.mouseDragY=a.clientY}},l.onDragEnd=function(a){a.stopPropagation(),a.preventDefault(),a.button===f?(this.mouseDragged?(this.emit("dragEnd"),this.emit("userChangeState")):this.emit("click",a.button,a),document.documentElement.removeEventListener("mousemove",this.dragHandler,!1),document.documentElement.removeEventListener("mouseup",this.dragEndHandler,!1)):this.emit("click",a.button,a)},l.onWheel=function(a){var b=this;null!==this.wheelTimeout&&window.clearTimeout(this.wheelTimeout),a.stopPropagation(),a.preventDefault();var c=0;c=a.wheelDelta?a.wheelDelta:a.detail?-a.detail:-a.deltaY,0!==c&&(a.shiftKey?this.rotate(c>0?i:-i):this.zoom(c>0?h:1/h,a.clientX-this.x,a.clientY-this.y)),this.wheelTimeout=window.setTimeout(function(){b.wheelTimeout=null,b.emit("userChangeState")},j)},Object.defineProperty(l,"x",{get:function(){return this.svgRoot.getScreenCTM().e}}),Object.defineProperty(l,"y",{get:function(){return this.svgRoot.getScreenCTM().f}}),Object.defineProperty(l,"width",{get:function(){return this.svgRoot===document.documentElement?window.innerWidth:this.svgRoot.parentNode.clientWidth}}),Object.defineProperty(l,"height",{get:function(){return this.svgRoot===document.documentElement?window.innerHeight:this.svgRoot.parentNode.clientHeight}}),l.repaint=function(){var a=this;return this.svgRoot.setAttribute("width",this.width),this.svgRoot.setAttribute("height",this.height),this.update(),this.presentation.elementsToHide.forEach(function(b){var c=document.getElementById(b);c&&(c.style.visibility=a.showHiddenElements?"visible":"hidden")}),this},l.update=function(){return this.cameras.forEach(function(a){a.update()}),this},l.setAtStates=function(a){var b=this;return a.forEach(function(a,c){b.cameras[c].initFrom(a)}),this},l.translate=function(a,b){return this.cameras.forEach(function(c){c.selected&&c.translate(a,b)}),this},l.zoom=function(a,b,c){return this.cameras.forEach(function(d){d.selected&&d.zoom(a,b,c)}),this},l.rotate=function(a){return this.cameras.forEach(function(b){b.selected&&b.rotate(a)}),this},l.clip=function(a,b,c,d){return this.clipMode.cameras.forEach(function(e){e.clip(a,b,c,d)}),this},l.clipRel=function(a,b,c,d){return this.clipMode.cameras.forEach(function(e){var f=e.clipRect;a<=f.width+c-1&&b<=f.height+d-1&&e.clip(f.x+a,f.y+b,f.x+f.width+c-1,f.y+f.height+d-1)}),this}},{"./Camera":5,events:15}],13:[function(a,b,c){function d(a,b){h[a]=b}Object.defineProperty(c,"__esModule",{value:!0}),c.registerHandler=d;var e=a("../utils"),f="http://www.w3.org/2000/svg",g=["g","image","path","rect","circle","ellipse","line","polyline","polygon","text","clippath"],h={},i={matches:function(a){return!0},transform:function(a){return this},isLayer:function(a){return!0},getLabel:function(a){return null}};c.DefaultHandler=i;var j={asText:"",root:void 0,handler:i,init:function(a){this.root=a,this.handler=i;for(var b in h)if(h[b].matches(a)){console.log("Using handler: "+b),this.handler=h[b];break}var c=(0,e.toArray)(this.root.getElementsByTagName("a"));return c.forEach(function(a){a.addEventListener("mousedown",function(a){a.stopPropagation()},!1)}),this},get isValidSVG(){return this.root instanceof SVGSVGElement},isLayer:function(a){return a instanceof SVGGElement&&a.hasAttribute("id")&&this.handler.isLayer(a)},"import":function(a){var b=this;this.asText="",this.root=void 0;var c=document.createElement("div");for(c.innerHTML=a;c.firstChild!==c.firstElementChild;)c.removeChild(c.firstChild);if(this.init(c.firstChild),this.isValidSVG){this.handler.transform(this.root),this.root.removeAttribute("viewBox"),this.root.style.width=this.root.style.height="auto";var d=(0,e.toArray)(this.root.getElementsByTagName("script"));d.forEach(function(a){a.parentNode.removeChild(a)});var h=document.createElementNS(f,"g");return(0,e.toArray)(this.root.childNodes).forEach(function(a){void 0===a.tagName?b.root.removeChild(a):g.indexOf(a.localName)>=0&&(b.isLayer(a)?h.firstChild&&(b.root.insertBefore(h,a),h=document.createElementNS(f,"g")):h.appendChild(a))}),h.firstChild&&this.root.appendChild(h),this.asText=c.innerHTML,this}}};c.SVGDocument=j},{"../utils":14}],14:[function(a,b,c){function d(a){return Array.prototype.slice.call(a)}Object.defineProperty(c,"__esModule",{value:!0}),c.toArray=d},{}],15:[function(a,b,c){function d(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function e(a){return"function"==typeof a}function f(a){return"number"==typeof a}function g(a){return"object"==typeof a&&null!==a}function h(a){return void 0===a}b.exports=d,d.EventEmitter=d,d.prototype._events=void 0,d.prototype._maxListeners=void 0,d.defaultMaxListeners=10,d.prototype.setMaxListeners=function(a){if(!f(a)||0>a||isNaN(a))throw TypeError("n must be a positive number");return this._maxListeners=a,this},d.prototype.emit=function(a){var b,c,d,f,i,j;if(this._events||(this._events={}),"error"===a&&(!this._events.error||g(this._events.error)&&!this._events.error.length)){if(b=arguments[1],b instanceof Error)throw b;throw TypeError('Uncaught, unspecified "error" event.')}if(c=this._events[a],h(c))return!1;if(e(c))switch(arguments.length){case 1:c.call(this);break;case 2:c.call(this,arguments[1]);break;case 3:c.call(this,arguments[1],arguments[2]);break;default:for(d=arguments.length,f=new Array(d-1),i=1;d>i;i++)f[i-1]=arguments[i];c.apply(this,f)}else if(g(c)){for(d=arguments.length,f=new Array(d-1),i=1;d>i;i++)f[i-1]=arguments[i];for(j=c.slice(),d=j.length,i=0;d>i;i++)j[i].apply(this,f)}return!0},d.prototype.addListener=function(a,b){var c;if(!e(b))throw TypeError("listener must be a function");if(this._events||(this._events={}),this._events.newListener&&this.emit("newListener",a,e(b.listener)?b.listener:b),this._events[a]?g(this._events[a])?this._events[a].push(b):this._events[a]=[this._events[a],b]:this._events[a]=b,g(this._events[a])&&!this._events[a].warned){var c;c=h(this._maxListeners)?d.defaultMaxListeners:this._maxListeners,c&&c>0&&this._events[a].length>c&&(this._events[a].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[a].length),"function"==typeof console.trace&&console.trace())}return this},d.prototype.on=d.prototype.addListener,d.prototype.once=function(a,b){function c(){this.removeListener(a,c),d||(d=!0,b.apply(this,arguments))}if(!e(b))throw TypeError("listener must be a function");var d=!1;return c.listener=b,this.on(a,c),this},d.prototype.removeListener=function(a,b){var c,d,f,h;if(!e(b))throw TypeError("listener must be a function");if(!this._events||!this._events[a])return this;if(c=this._events[a],f=c.length,d=-1,c===b||e(c.listener)&&c.listener===b)delete this._events[a],this._events.removeListener&&this.emit("removeListener",a,b);else if(g(c)){for(h=f;h-- >0;)if(c[h]===b||c[h].listener&&c[h].listener===b){d=h;break}if(0>d)return this;1===c.length?(c.length=0,delete this._events[a]):c.splice(d,1),this._events.removeListener&&this.emit("removeListener",a,b)}return this},d.prototype.removeAllListeners=function(a){var b,c;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[a]&&delete this._events[a],this;if(0===arguments.length){for(b in this._events)"removeListener"!==b&&this.removeAllListeners(b);return this.removeAllListeners("removeListener"),this._events={},this}if(c=this._events[a],e(c))this.removeListener(a,c);else for(;c.length;)this.removeListener(a,c[c.length-1]);return delete this._events[a],this},d.prototype.listeners=function(a){var b;return b=this._events&&this._events[a]?e(this._events[a])?[this._events[a]]:this._events[a].slice():[]},d.listenerCount=function(a,b){var c;return c=a._events&&a._events[b]?e(a._events[b])?1:a._events[b].length:0}},{}]},{},[3]);
            
          
!
999px
Loading ..................

Console