var two = new Two().appendTo(document.body);
var el = $('#assets svg')[0];
var shape = two.interpret(el).center();
var keys = Object.keys(shape.children);
var child = shape.children[keys[0]];
shape.opacity= 0;
two.bind('update', function(frameCount) {
if (keys.length > 0) {
if (child.opacity > 0.999) {
keys.shift();
child = shape.children[keys[0]];
}
if (child) child.opacity += 0.1;
}
else if (shape.scale > 0) {
shape.scale -= 0.01;
}
else {
shape.opacity= 0;
shape.scale = 1;
keys = Object.keys(shape.children);
child = shape.children[keys[0]];
}
}).play();
Following resources are loaded into result:
- two.min.js
<div id="assets">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="316.134px" height="455.322px" viewBox="0 0 316.134 455.322" enable-background="new 0 0 316.134 455.322"
xml:space="preserve">
<path id="path3097" inkscape:connector-curvature="0" fill="#F4981E" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M288.002,104.939c0.957-10.555,11.039-12.953,20.629-22.07c12.959-11.998-3.354-31.67-3.354-31.67
c1.916,13.436-4.324,18.232-15.838,26.393c-3.355,2.398-6.24,5.756-6.24,10.074c-0.475,5.281-0.955,10.557-1.92,15.836
C283.682,103.98,286.084,104.461,288.002,104.939z"/>
<path id="path3099" inkscape:connector-curvature="0" fill="#F4981E" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M253.451,86.227c-2.877,2.398-5.758,4.797-8.156,6.721c-1.918,1.918-3.84,3.838-5.76,5.756c11.039,0.959,22.072,1.92,32.154,3.357
c6.715-11.996,10.07-25.43,5.756-48.943C277.445,53.117,276.484,68.953,253.451,86.227L253.451,86.227z"/>
<path id="path3101" inkscape:connector-curvature="0" fill="#F4981E" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M192.029,96.305c12.48,0,24.957,0.48,36.949,1.439c0.484-0.48,0.965-0.959,1.439-1.439c7.682-8.639,20.637-15.836,26.873-25.434
c6.715-10.074,4.316-22.072,1.918-36.467c-4.316-24.951,6.242-29.268,6.242-29.268s-21.117,2.879-20.637,14.875
c0.48,16.311,17.273,31.666-8.156,36.467c-27.832,4.799-45.105,20.152-48.943,39.826C189.154,96.305,190.592,96.305,192.029,96.305
L192.029,96.305z"/>
<path id="path3121" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M2.98,346.299c3.357,15.832,11.99,34.551,29.744,47.021c5.762,3.842,11.52,6.721,17.754,9.117
c-3.836-6.236-8.152-12.955-12.951-19.674c-8.639-12.477-17.273-25.912-23.033-39.822c-5.76-14.396-7.199-29.273-4.799-44.627
C5.377,310.791,2.5,323.746,2.5,338.139C2.5,340.539,2.98,343.42,2.98,346.299L2.98,346.299z"/>
<path id="path3123" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M22.174,340.064c5.275,12.949,13.914,25.906,22.07,37.904c6.719,9.598,12.957,18.713,17.273,27.826
c5.277,1.441,11.037,2.402,16.313,2.402c-5.756-8.156-10.555-17.277-14.873-27.828c-16.314-41.271-13.916-92.129,6.24-121.402
c10.553-15.354,23.512-25.43,39.826-34.547c13.916-7.676,22.549-9.598,31.664-14.875c9.6-6.236,14.877-15.836,8.639-37.428
c-1.918-6.236-2.398-11.518-1.918-15.354c-2.396,4.316-3.838,9.598-4.797,15.354c-0.963,5.756-1.441,12.479-3.844,19.674
c-8.633,22.551-50.379,35.027-55.656,36.467c-15.836,4.801-28.311,11.996-38.389,20.631
C16.416,274.324,11.135,312.229,22.174,340.064L22.174,340.064z"/>
<path id="path3125" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M195.393,136.609c0.479,1.439,0.961,2.879,0.961,4.318c1.439,7.68-0.961,14.395-10.559,15.836
c-10.074,1.438-13.438-7.197-14.395-13.918c0-2.877,0.48-4.797,0.48-6.236c-1.441,0-3.361,0.48-4.801,0.48
c-3.355,1.439-7.676,4.316-11.516,8.639c-1.918,4.318-4.318,10.074-0.48,23.99c6.24,23.99,3.357,38.865-15.836,47.025
c-24.949,11.035-40.783,17.27-62.375,44.143c-10.078,12.479-15.836,33.588-16.316,55.182c-0.957,20.633,3.361,42.705,10.557,60.939
c4.803,11.994,10.557,22.553,17.275,31.67c6.719-0.48,13.434-1.441,20.154-2.883c-7.678-8.633-11.998-19.189-12.479-31.184
c-2.395-39.352,18.715-55.664,51.344-82.055l14.396-12.477c58.537-49.424,41.264-99.807,47.982-142.99
C204.99,137.09,200.189,137.09,195.393,136.609L195.393,136.609z"/>
<path id="path3127" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M218.9,137.568c-1.914,8.641-2.393,17.754-2.873,26.873c-2.402,37.428-1.441,80.131-48.947,122.355l-14.395,11.518
c-31.672,25.432-49.902,41.264-48.465,75.813c0.48,11.518,5.281,21.596,13.438,29.271c8.639-2.396,17.275-6.236,25.912-11.033
c41.264-23.516,67.174-58.541,77.252-103.646c6.234-28.311,6.234-51.342,5.758-70.057c0-9.117,1.438-27.83,1.438-27.83
c1.445-11.514,3.363-27.83,16.797-48.945c0.48-0.959,0.48-1.439,0.957-2.396C237.619,139.01,228.502,138.049,218.9,137.568
L218.9,137.568z"/>
<path id="path3129" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M232.82,258.008L232.82,258.008L232.82,258.008c-1.439,7.197-1.439,14.396-2.402,22.072c-0.475,2.879-0.955,5.76-0.955,8.16
c-0.484,0.959-0.484,1.918-0.484,2.398c-10.551,47.5-37.426,83.973-81.09,108.922c-7.201,4.316-14.877,7.676-22.551,10.072
c12.953,8.639,27.828,11.039,37.906,9.6c38.867-5.756,58.059-31.188,67.174-58.537c9.117-27.832,8.162-57.584,7.682-69.576
c-1.441-41.266,30.229-56.621,30.229-56.621c-24.471-1.439-32.627,9.594-35.51,23.51H232.82z"/>
<path id="path3131" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M206.908,410.113c-15.836,13.436-33.109,16.314-40.785,17.275c-15.357,2.4-33.59-0.961-49.904-13.912l-0.48-0.48
c-7.195,1.922-13.916,2.877-20.631,3.357c15.836,17.277,36.465,26.391,64.297,28.307l0,0l0,0
c19.193-7.195,35.508-19.67,47.984-35.027L206.908,410.113L206.908,410.113z"/>
<path id="path3133" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M61.996,438.426c0-8.637-2.396-17.273-6.234-25.912c-9.598-2.4-18.715-6.719-27.832-11.992c-5.275-3.359-9.596-8.156-13.436-12.477
l0,0C24.572,409.633,41.365,426.908,61.996,438.426L61.996,438.426L61.996,438.426z"/>
<path id="path3135" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M141.17,450.42c-15.354-3.836-28.789-9.113-40.305-18.23c-5.758-4.32-11.516-9.596-16.316-15.355c-6.238,0-12.475-0.48-18.711-1.916
c3.359,9.111,5.275,18.232,3.834,27.346l0,0c14.877,6.721,30.713,10.559,47.986,10.559c8.158,0,16.314-0.961,23.99-2.402
C141.648,450.42,141.648,450.42,141.17,450.42z"/>
<path id="path3137" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
M275.043,168.279c-2.873,8.635-11.518,7.676-14.396,2.879c-3.836-7.68-2.396-13.436,1.922-17.754
c4.318-3.838,11.035-6.236,17.75-9.119l0,0c-7.676-1.439-15.828-2.398-24.469-3.357c-0.48,0-0.48,0-0.48,0
c-0.957,0.959-1.438,1.918-2.398,2.879c-13.916,20.635-15.352,36.467-16.793,47.984l-0.477,3.836
c-0.961,6.242-0.961,13.918-0.48,23.035c0,1.441,0,2.879,0,3.838c-0.48,3.359-0.48,6.238-0.48,9.6l0,0
c0-1.443,0.48-1.922,0.48-0.965c3.834-12.473,11.035-20.15,21.109-24.469c11.037-4.316,21.594-8.639,22.074-24.471
c0.48-6.719,0.961-13.436,2.395-16.795c2.883-6.238,7.684-7.678,7.684-7.678C283.199,157.242,277.445,159.641,275.043,168.279
L275.043,168.279z"/>
<path fill="#F15A29" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M210.787,129.236l-16.738-1
c-11.334-22.667-7.334-24.931-7.334-24.931l35.264,1.439C214.049,111.939,210.787,129.236,210.787,129.236z"/>
<path fill="#F15A29" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M248.771,131.49l-27.871-1.922
c0,0,3.925-18.694,13.635-23.865l32.154,3.357C256.611,120.081,248.771,131.49,248.771,131.49z"/>
<path fill="#F15A29" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M288.318,137.285l-27.469-4.357l19.43-22.426
l7.723,1.438C293.524,120.303,297.456,129.236,288.318,137.285z"/>
</svg>
</div>
#assets {
display: none;
}