Develop Reference

How do I stack the images above the text?

I am trying to figure out how do I stack each of the images above the text? The way it is currently it is it produces each image on the same line as the associated text so I am trying to do the opposite and stack it.
<div class="flash-infos">
<div class="flash-info truck">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.1 491.1" style="enable-background:new 0 0 491.1 491.1;" xml:space="preserve"> <path transform="translate(0 -540.36)" d="M401.5,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S426.1,863.31,401.5,863.31z M401.5,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S415.1,933.31,401.5,933.31z M413.1,713.41c-1.8-1.7-4.2-2.6-6.7-2.6h-51.3 c-5.5,0-10,4.5-10,10v82c0,5.5,4.5,10,10,10h81.4c5.5,0,10-4.5,10-10v-54.9c0-2.8-1.2-5.5-3.3-7.4L413.1,713.41z M426.5,792.81 h-61.4v-62.1h37.4l24,21.6V792.81z M157.3,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S181.9,863.31,157.3,863.31z M157.3,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S170.9,933.31,157.3,933.31z M90.6,875.61H70.5v-26.6c0-5.5-4.5-10-10-10s-10,4.5-10,10 v36.6c0,5.5,4.5,10,10,10h30.1c5.5,0,10-4.5,10-10S96.1,875.61,90.6,875.61z M141.3,821.11c0-5.5-4.5-10-10-10H10 c-5.5,0-10,4.5-10,10s4.5,10,10,10h121.3C136.8,831.11,141.3,826.71,141.3,821.11z M30.3,785.01l121.3,0.7c5.5,0,10-4.4,10.1-9.9 c0.1-5.6-4.4-10.1-9.9-10.1l-121.3-0.7c-0.1,0-0.1,0-0.1,0c-5.5,0-10,4.4-10,9.9C20.3,780.51,24.8,785.01,30.3,785.01z M50.7,739.61 H172c5.5,0,10-4.5,10-10s-4.5-10-10-10H50.7c-5.5,0-10,4.5-10,10S45.2,739.61,50.7,739.61z M487.4,726.11L487.4,726.11l-71.6-59.3 c-1.8-1.5-4-2.3-6.4-2.3h-84.2v-36c0-5.5-4.5-10-10-10H60.5c-5.5,0-10,4.5-10,10v73.2c0,5.5,4.5,10,10,10s10-4.5,10-10v-63.2h234.8 v237.1h-82c-5.5,0-10,4.5-10,10s4.5,10,10,10h122.1c5.5,0,10-4.5,10-10s-4.5-10-10-10h-20.1v-191.1h80.6l65.2,54l-0.7,136.9H460 c-5.5,0-10,4.5-10,10s4.5,10,10,10h20.3c5.5,0,10-4.4,10-9.9l0.8-151.6C491,730.91,489.7,728.01,487.4,726.11z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
Free shipping
</div>
</div>
<style>
.flash-infos {
padding:6px 10px;
background:#333;
color:#FFF;
display:flex;
width:100%;
max-width:100%;
align-items:center;
}
.flash-info {
padding:0;
display:flex !important;
align-items:center;
justify-content:center;
}
.flash-info svg {
fill:#FFF;
margin-right:7px;
width:auto;
height:28px;
}
.flash-info.truck svg {
height:30px;
}
.flash-info-pulse {
animation: flash-pulse 2s infinite;
}
#keyframes flash-pulse {
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
</style>

Just add flex-direction:column on your element .flash-info
<div class="flash-infos">
<div class="flash-info truck">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.1 491.1" style="enable-background:new 0 0 491.1 491.1;" xml:space="preserve"> <path transform="translate(0 -540.36)" d="M401.5,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S426.1,863.31,401.5,863.31z M401.5,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S415.1,933.31,401.5,933.31z M413.1,713.41c-1.8-1.7-4.2-2.6-6.7-2.6h-51.3 c-5.5,0-10,4.5-10,10v82c0,5.5,4.5,10,10,10h81.4c5.5,0,10-4.5,10-10v-54.9c0-2.8-1.2-5.5-3.3-7.4L413.1,713.41z M426.5,792.81 h-61.4v-62.1h37.4l24,21.6V792.81z M157.3,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S181.9,863.31,157.3,863.31z M157.3,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S170.9,933.31,157.3,933.31z M90.6,875.61H70.5v-26.6c0-5.5-4.5-10-10-10s-10,4.5-10,10 v36.6c0,5.5,4.5,10,10,10h30.1c5.5,0,10-4.5,10-10S96.1,875.61,90.6,875.61z M141.3,821.11c0-5.5-4.5-10-10-10H10 c-5.5,0-10,4.5-10,10s4.5,10,10,10h121.3C136.8,831.11,141.3,826.71,141.3,821.11z M30.3,785.01l121.3,0.7c5.5,0,10-4.4,10.1-9.9 c0.1-5.6-4.4-10.1-9.9-10.1l-121.3-0.7c-0.1,0-0.1,0-0.1,0c-5.5,0-10,4.4-10,9.9C20.3,780.51,24.8,785.01,30.3,785.01z M50.7,739.61 H172c5.5,0,10-4.5,10-10s-4.5-10-10-10H50.7c-5.5,0-10,4.5-10,10S45.2,739.61,50.7,739.61z M487.4,726.11L487.4,726.11l-71.6-59.3 c-1.8-1.5-4-2.3-6.4-2.3h-84.2v-36c0-5.5-4.5-10-10-10H60.5c-5.5,0-10,4.5-10,10v73.2c0,5.5,4.5,10,10,10s10-4.5,10-10v-63.2h234.8 v237.1h-82c-5.5,0-10,4.5-10,10s4.5,10,10,10h122.1c5.5,0,10-4.5,10-10s-4.5-10-10-10h-20.1v-191.1h80.6l65.2,54l-0.7,136.9H460 c-5.5,0-10,4.5-10,10s4.5,10,10,10h20.3c5.5,0,10-4.4,10-9.9l0.8-151.6C491,730.91,489.7,728.01,487.4,726.11z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
Free shipping
</div>
</div>
<style>
.flash-infos {
padding:6px 10px;
background:#333;
color:#FFF;
display:flex;
width:100%;
max-width:100%;
align-items:center;
}
.flash-info {
padding:0;
display:flex !important;
align-items:center;
justify-content:center;
flex-direction:column;
}
.flash-info svg {
fill:#FFF;
margin-right:7px;
width:auto;
height:28px;
}
.flash-info.truck svg {
height:30px;
}
.flash-info-pulse {
animation: flash-pulse 2s infinite;
}
#keyframes flash-pulse {
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
</style>

If you want a multiple containers siblings display as flex, You give the property to the parent... as you have done, but it makes no sense to give the same propertie to this containers (even with !important), just remove it and give the svg's display block so they take the full width (they are inline by default).
Like this:
.flash-infos {
padding:6px 10px;
background:#333;
color:#FFF;
display:flex;
width:100%;
max-width:100%;
align-items:center;
}
.flash-info {
padding:0;
align-items:center;
justify-content:center;
}
.flash-info svg {
fill:#FFF;
margin-right:7px;
width:auto;
height:28px;
display:block;
}
.flash-info.truck svg {
height:30px;
}
.flash-info-pulse {
animation: flash-pulse 2s infinite;
}
#keyframes flash-pulse {
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
<div class="flash-infos">
<div class="flash-info truck">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.1 491.1" style="enable-background:new 0 0 491.1 491.1;" xml:space="preserve"> <path transform="translate(0 -540.36)" d="M401.5,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S426.1,863.31,401.5,863.31z M401.5,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S415.1,933.31,401.5,933.31z M413.1,713.41c-1.8-1.7-4.2-2.6-6.7-2.6h-51.3 c-5.5,0-10,4.5-10,10v82c0,5.5,4.5,10,10,10h81.4c5.5,0,10-4.5,10-10v-54.9c0-2.8-1.2-5.5-3.3-7.4L413.1,713.41z M426.5,792.81 h-61.4v-62.1h37.4l24,21.6V792.81z M157.3,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S181.9,863.31,157.3,863.31z M157.3,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S170.9,933.31,157.3,933.31z M90.6,875.61H70.5v-26.6c0-5.5-4.5-10-10-10s-10,4.5-10,10 v36.6c0,5.5,4.5,10,10,10h30.1c5.5,0,10-4.5,10-10S96.1,875.61,90.6,875.61z M141.3,821.11c0-5.5-4.5-10-10-10H10 c-5.5,0-10,4.5-10,10s4.5,10,10,10h121.3C136.8,831.11,141.3,826.71,141.3,821.11z M30.3,785.01l121.3,0.7c5.5,0,10-4.4,10.1-9.9 c0.1-5.6-4.4-10.1-9.9-10.1l-121.3-0.7c-0.1,0-0.1,0-0.1,0c-5.5,0-10,4.4-10,9.9C20.3,780.51,24.8,785.01,30.3,785.01z M50.7,739.61 H172c5.5,0,10-4.5,10-10s-4.5-10-10-10H50.7c-5.5,0-10,4.5-10,10S45.2,739.61,50.7,739.61z M487.4,726.11L487.4,726.11l-71.6-59.3 c-1.8-1.5-4-2.3-6.4-2.3h-84.2v-36c0-5.5-4.5-10-10-10H60.5c-5.5,0-10,4.5-10,10v73.2c0,5.5,4.5,10,10,10s10-4.5,10-10v-63.2h234.8 v237.1h-82c-5.5,0-10,4.5-10,10s4.5,10,10,10h122.1c5.5,0,10-4.5,10-10s-4.5-10-10-10h-20.1v-191.1h80.6l65.2,54l-0.7,136.9H460 c-5.5,0-10,4.5-10,10s4.5,10,10,10h20.3c5.5,0,10-4.4,10-9.9l0.8-151.6C491,730.91,489.7,728.01,487.4,726.11z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
Free shipping
</div>
<div class="flash-info truck">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.1 491.1" style="enable-background:new 0 0 491.1 491.1;" xml:space="preserve"> <path transform="translate(0 -540.36)" d="M401.5,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S426.1,863.31,401.5,863.31z M401.5,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S415.1,933.31,401.5,933.31z M413.1,713.41c-1.8-1.7-4.2-2.6-6.7-2.6h-51.3 c-5.5,0-10,4.5-10,10v82c0,5.5,4.5,10,10,10h81.4c5.5,0,10-4.5,10-10v-54.9c0-2.8-1.2-5.5-3.3-7.4L413.1,713.41z M426.5,792.81 h-61.4v-62.1h37.4l24,21.6V792.81z M157.3,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S181.9,863.31,157.3,863.31z M157.3,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S170.9,933.31,157.3,933.31z M90.6,875.61H70.5v-26.6c0-5.5-4.5-10-10-10s-10,4.5-10,10 v36.6c0,5.5,4.5,10,10,10h30.1c5.5,0,10-4.5,10-10S96.1,875.61,90.6,875.61z M141.3,821.11c0-5.5-4.5-10-10-10H10 c-5.5,0-10,4.5-10,10s4.5,10,10,10h121.3C136.8,831.11,141.3,826.71,141.3,821.11z M30.3,785.01l121.3,0.7c5.5,0,10-4.4,10.1-9.9 c0.1-5.6-4.4-10.1-9.9-10.1l-121.3-0.7c-0.1,0-0.1,0-0.1,0c-5.5,0-10,4.4-10,9.9C20.3,780.51,24.8,785.01,30.3,785.01z M50.7,739.61 H172c5.5,0,10-4.5,10-10s-4.5-10-10-10H50.7c-5.5,0-10,4.5-10,10S45.2,739.61,50.7,739.61z M487.4,726.11L487.4,726.11l-71.6-59.3 c-1.8-1.5-4-2.3-6.4-2.3h-84.2v-36c0-5.5-4.5-10-10-10H60.5c-5.5,0-10,4.5-10,10v73.2c0,5.5,4.5,10,10,10s10-4.5,10-10v-63.2h234.8 v237.1h-82c-5.5,0-10,4.5-10,10s4.5,10,10,10h122.1c5.5,0,10-4.5,10-10s-4.5-10-10-10h-20.1v-191.1h80.6l65.2,54l-0.7,136.9H460 c-5.5,0-10,4.5-10,10s4.5,10,10,10h20.3c5.5,0,10-4.4,10-9.9l0.8-151.6C491,730.91,489.7,728.01,487.4,726.11z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
Free shipping
</div>
<div class="flash-info truck">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.1 491.1" style="enable-background:new 0 0 491.1 491.1;" xml:space="preserve"> <path transform="translate(0 -540.36)" d="M401.5,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S426.1,863.31,401.5,863.31z M401.5,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S415.1,933.31,401.5,933.31z M413.1,713.41c-1.8-1.7-4.2-2.6-6.7-2.6h-51.3 c-5.5,0-10,4.5-10,10v82c0,5.5,4.5,10,10,10h81.4c5.5,0,10-4.5,10-10v-54.9c0-2.8-1.2-5.5-3.3-7.4L413.1,713.41z M426.5,792.81 h-61.4v-62.1h37.4l24,21.6V792.81z M157.3,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S181.9,863.31,157.3,863.31z M157.3,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S170.9,933.31,157.3,933.31z M90.6,875.61H70.5v-26.6c0-5.5-4.5-10-10-10s-10,4.5-10,10 v36.6c0,5.5,4.5,10,10,10h30.1c5.5,0,10-4.5,10-10S96.1,875.61,90.6,875.61z M141.3,821.11c0-5.5-4.5-10-10-10H10 c-5.5,0-10,4.5-10,10s4.5,10,10,10h121.3C136.8,831.11,141.3,826.71,141.3,821.11z M30.3,785.01l121.3,0.7c5.5,0,10-4.4,10.1-9.9 c0.1-5.6-4.4-10.1-9.9-10.1l-121.3-0.7c-0.1,0-0.1,0-0.1,0c-5.5,0-10,4.4-10,9.9C20.3,780.51,24.8,785.01,30.3,785.01z M50.7,739.61 H172c5.5,0,10-4.5,10-10s-4.5-10-10-10H50.7c-5.5,0-10,4.5-10,10S45.2,739.61,50.7,739.61z M487.4,726.11L487.4,726.11l-71.6-59.3 c-1.8-1.5-4-2.3-6.4-2.3h-84.2v-36c0-5.5-4.5-10-10-10H60.5c-5.5,0-10,4.5-10,10v73.2c0,5.5,4.5,10,10,10s10-4.5,10-10v-63.2h234.8 v237.1h-82c-5.5,0-10,4.5-10,10s4.5,10,10,10h122.1c5.5,0,10-4.5,10-10s-4.5-10-10-10h-20.1v-191.1h80.6l65.2,54l-0.7,136.9H460 c-5.5,0-10,4.5-10,10s4.5,10,10,10h20.3c5.5,0,10-4.4,10-9.9l0.8-151.6C491,730.91,489.7,728.01,487.4,726.11z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
Free shipping
</div>
</div>

Svg which uses greensock to convert it only with css use

I'm trying to understand if it is how it can be possible to convert the animations of the following svg that greensock uses, using only the css code.
In the following example, I don't know why, only the animation of the browser and scrollbar seems to work, which scroll.
That of the terminal that opens and the code that you write on your own doesn't seem to work.
So the question is would it be possible to convert the following example which uses animations only using css.
Can you give me some suggestions?
(function() {
let illustration = document.querySelector('.Illustration');
if (!illustration) {
return;
}
const computer = gsap.timeline({
scrollTrigger: {
trigger: '.Illustration',
toggleActions: 'play none none none',
end: '+=10' // end after scrolling 500px beyond the start
}
});
computer
.to(
'#cursor',
{
repeat: 20,
keyframes: [
{
opacity: 0,
duration: 0.01,
delay: 0.4
},
{
opacity: 1,
duration: 0.01,
delay: 0.4
}
]
},
0
)
.from(
'.line',
{
scaleX: 0,
ease: Sine.easeOut,
stagger: {
duration: 3,
amount: 3
}
},
0
)
.to(
'#website',
{
ease: Sine.easeInOut,
yPercent: -60,
duration: 4
},
1
)
.to(
'#scrollbar',
{
ease: Sine.easeInOut,
yPercent: 260,
duration: 4
},
1
)
.to(
'#iterm',
{
opacity: 1,
delay: -0.1,
duration: 0.01
},
2
)
.from(
'#iterm',
{
ease: Elastic.easeOut.config(0.17, 0.2),
transformOrigin: '50% 50%',
y: 60,
x: -20,
duration: 1,
scale: 0
},
2
)
.fromTo(
'.steam',
{
opacity: 1,
drawSVG: '0%'
},
{
drawSVG: '100%',
duration: 3,
stagger: {
each: 0.5
}
},
2
)
.to(
'.steam',
{
opacity: 0,
duration: 4,
stagger: {
each: 0.5
}
},
3
);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://pastebin.com/raw/ywciu18p"></script>
<script src="https://pastebin.com/raw/u7GLGbfu"></script>
<svg
xmlns="http://www.w3.org/2000/svg" class="Illustration Hero__svg" preserveAspectRatio="xMinYMin meet" viewBox="120 200 300 288" width="300px" height="288px">
<defs>
<clipPath id="clippy">
<rect x="133.98" y="248.2" width="52.38" height="81.84" fill="none"></rect>
</clipPath>
<clipPath id="screen">
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="none"></rect>
</clipPath>
</defs>
<g style="isolation:isolate">
<g id="_1" data-name="1">
<rect id="shelf" x="10.16" y="266.81" width="99.83" height="4.23" fill="#404040"></rect>
<rect id="desk" x="37.83" y="380.3" width="282" height="10" rx="5" fill="#404040"></rect>
<g id="coffee">
<path d="M90.8 362a.87.87 0 01-1.74 0 2.14 2.14 0 00-.27-.89 3.33 3.33 0 00-.91-1.11 1.87 1.87 0 00-1.16-.41 1.79 1.79 0 00-.72.2l-.16.09a2.23 2.23 0 00-1 1.61 4.56 4.56 0 00.58 2.75c.08.16.18.34.29.52a17.28 17.28 0 002.71 3c1.79 1.72 3.65 3.51 4.2 6a.87.87 0 11-1.69.38c-.44-1.95-2.11-3.55-3.71-5.1a18.07 18.07 0 01-3-3.38c-.12-.2-.24-.41-.35-.63a6.31 6.31 0 01-.75-3.82 4 4 0 011.85-2.83l.28-.15a3.5 3.5 0 011.46-.39 3.6 3.6 0 012.25.76 5 5 0 011.41 1.71 4 4 0 01.43 1.69z" fill="#cc7d96"></path>
<path d="M107.54 356.89c.08 4.69-1.07 19.42-4.84 23.22h-8.08c-3.77-3.8-4.92-18.53-4.84-23.22z" fill="#dd859c" fill-rule="evenodd"></path>
<path opacity="0" class="steam" d="M99.48,350.34c-.56-.56-3-3.52,0-6.2s1.93-3.76.11-6.19" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4006; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M103.68,354.83c-.56-.56-3-3.52,0-6.19s1.93-3.76.11-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4011; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M93.57,354.83c-.57-.56-3-3.52,0-6.19s1.92-3.76.1-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 15.4049; stroke-dasharray: 0px, 999999px;"></path>
</g>
<g id="pc">
<polygon points="238.13 377.72 235.66 361.98 205.21 361.98 202.74 377.72 238.13 377.72" fill="#d2cfd6"></polygon>
<path d="M124.59 363.8a3.31 3.31 0 01-3.3-3.31v-18.76h198.29v18.76a3.32 3.32 0 01-3.31 3.31z" fill="#fff"></path>
<path d="M319.33 342v18.51a3.06 3.06 0 01-3.06 3.06H124.59a3.06 3.06 0 01-3-3.06V342h197.74m.5-.5H121v19a3.56 3.56 0 003.55 3.56h191.72a3.56 3.56 0 003.56-3.56v-19z" fill="#404040"></path>
<path d="M314.36 234.24H126.51a5.45 5.45 0 00-5.47 5.43v103.2h198.79v-103.2a5.45 5.45 0 00-5.47-5.43z" fill="#404040"></path>
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="#e3d1e5"></rect>
<rect x="188.3" y="377.72" width="64.27" height="2.36" fill="#eaeaea"></rect>
<ellipse cx="220.43" cy="353.63" rx="3.84" ry="3.81" fill="#333"></ellipse>
<g clip-path="url(#screen)">
<g id="vs-code">
<rect x="193.2" y="240.73" width="119.55" height="95.74" fill="#565266"></rect>
<rect x="193.2" y="240.73" width="119.55" height="6.45" fill="#b0baea"></rect>
<ellipse cx="198.98" cy="243.95" rx="1.4" ry="1.38" fill="#e84d4d"></ellipse>
<ellipse cx="204.19" cy="243.95" rx="1.4" ry="1.38" fill="#f2dd77"></ellipse>
<ellipse cx="209.14" cy="243.95" rx="1.4" ry="1.38" fill="#4eb785"></ellipse>
<g fill="#706d84">
<path d="M200.08 252.61c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.13 253.24l-.07-.61c1-.7 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.72c1.63 0 2.11.46 2.11 1s-.5 1.14-1.32 1.76h1.39v.67zM200.08 259.26c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54V258l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203.13 259.89l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1s-.5 1.15-1.32 1.77h1.39v.67zM200.08 265.91c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM205.23 266v.59h-.73V266h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.13l.73-.08v1.16h.37l-.07.67zM200.08 272.56c1.17-.08 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.13zM203.17 273.27v-.72c1.17-.09 1.53-.2 1.53-.49s-.39-.42-1.44-.54l.11-1.77h2l-.06.69H204v.59c1.11.17 1.44.56 1.44 1-.04.63-.7 1.15-2.27 1.24zM200.08 279.2c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.05-2.21 1.13zM203 278.55c0-1 .56-1.73 1.83-2.27l.32.65c-.84.31-1.19.61-1.33 1 .78-.45 1.67-.08 1.67.8a1.25 1.25 0 11-2.49-.17zm1.76.23c0-.48-.41-.67-1-.4v.09c0 .59.25.83.56.83s.44-.17.44-.52zM200.08 285.85c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.39 286.45a13.46 13.46 0 011.31-2.67h-1.6l.06-.7h2.33v.68a14.72 14.72 0 00-1.3 2.8zM200.08 292.5c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203 292.33a.92.92 0 00.05-1.74c0-.48.42-1 1.22-1 .63 0 1.13.33 1.13.84a1 1 0 01-.61.86c.36.21.68.47.68.89s-.49 1-1.3 1-1.17-.32-1.17-.85zm1.71 0c0-.25-.32-.44-.68-.64a.67.67 0 00-.29.52c0 .25.15.44.5.44s.48-.17.48-.35zm-.32-1.21a.63.63 0 00.27-.48c0-.23-.12-.4-.44-.4s-.42.14-.42.29.28.39.6.56zM200.08 299.15c1.17-.07 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.14zM203.33 299.25c.84-.32 1.19-.61 1.33-1-.78.44-1.67.08-1.67-.8a1.25 1.25 0 112.49.17c0 1-.56 1.73-1.83 2.27zm1.41-1.45v-.09c0-.59-.25-.83-.56-.83s-.46.17-.46.51c0 .49.41.67 1.02.41zM202.16 305.84v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM202.94 304.77c0-1.11.51-1.85 1.34-1.85s1.26.65 1.26 1.73-.51 1.85-1.35 1.85-1.25-.65-1.25-1.73zm.75-.07l1.05-.54c-.08-.38-.25-.61-.51-.61s-.54.38-.54 1.08zm1.1.09l-1 .53c.08.37.24.59.5.59s.5-.42.5-1.12zM202.16 312.49v.58h-.73v-.58H200a11.47 11.47 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM203.09 313.07v-.65h.91v-1.76h-.81v-.57l.81-.09v-.41l.76-.06v2.88h.82l-.06.65zM202.16 319.13v.59h-.73v-.59H200a11.44 11.44 0 01.33-2.87l.84.05-.55 2.15h.82v-1.07l.73-.08v1.15h.36l-.06.67zM203.13 319.72l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1.05s-.5 1.14-1.32 1.76h1.39v.67zM202.16 325.78v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82V324l.73-.07v1.15h.36l-.06.67zM203.15 325.74c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM202.16 332.43v.57h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM205.23 332.43v.57h-.73v-.59h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.37l-.07.67z"></path>
</g>
<g id="code">
<rect class="line" data-name="line" x="210.54" y="250.33" width="70.96" height="3.07" fill="#a3848d" opacity=".39" data-svg-origin="210.5399932861328 250.3300018310547" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 150.06; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="256.92" width="75.56" height="3.07" fill="#a58492" opacity=".39" data-svg-origin="210.5399932861328 256.9200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 159.26; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="263.57" width="61.58" height="3.07" fill="#a284a3" opacity=".39" data-svg-origin="210.5399932861328 263.57000732421875" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 131.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="270.28" width="52.68" height="3.07" fill="#9084a0" opacity=".39" data-svg-origin="210.5399932861328 270.2799987792969" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 113.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="276.86" width="43.68" height="3.07" fill="#83859e" opacity=".39" data-svg-origin="210.5399932861328 276.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 95.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="283.56" width="73.08" height="3.07" fill="#83929b" opacity=".39" data-svg-origin="210.5399932861328 283.55999755859375" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 154.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="290.42" width="85.72" height="3.07" fill="#829995" opacity=".39" data-svg-origin="210.5399932861328 290.4200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 179.58; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="296.86" width="71.54" height="3.07" fill="#84998b" opacity=".39" data-svg-origin="210.5399932861328 296.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 151.22; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="303.51" width="67.52" height="3.07" fill="#899985" opacity=".39" data-svg-origin="210.5399932861328 303.510009765625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="310.1" width="32.1" height="3.07" fill="#979987" opacity=".39" data-svg-origin="210.5399932861328 310.1000061035156" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 72.34; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="316.75" width="93.48" height="3.07" fill="#999488" opacity=".39" data-svg-origin="210.5399932861328 316.75" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 195.1; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="323.4" width="67.52" height="3.07" fill="#998e8a" opacity=".39" data-svg-origin="210.5399932861328 323.3999938964844" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.42" y="330.05" width="50.03" height="3.07" fill="#998c8c" opacity=".39" data-svg-origin="210.4199981689453 330.04998779296875" transform="matrix(0,0,0,1,210.42,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 108.2; stroke-dasharray: 0px, 999999px;"></rect>
</g>
</g>
<g id="iterm" opacity="0" data-svg-origin="283.99497985839844 311.64500427246094" transform="matrix(0,0,0,0,263.99498,371.645)" style="transform-origin: 0px 0px;">
<rect x="259.67" y="294.33" width="48.74" height="38.57" fill="#333"></rect>
<path d="M260.33 290.39h47.22a.86.86 0 01.86.86v4.38h-48.83v-4.49a.75.75 0 01.75-.75z" fill="#d3d3d3"></path>
<circle cx="262.39" cy="293.28" fill="#e84d4d" r="1.04"></circle>
<circle cx="266.28" cy="293.28" fill="#f2dd77" r="1.04"></circle>
<circle cx="269.99" cy="293.28" fill="#4eb785" r="1.04"></circle>
<path d="M264.11 303.17a.44.44 0 01-.29-.11.37.37 0 010-.56l1.36-1.28-1.36-1.29a.36.36 0 010-.55.41.41 0 01.58 0l1.66 1.56a.36.36 0 01.12.28.36.36 0 01-.12.27l-1.66 1.57a.46.46 0 01-.29.11z" fill="#83e5ab"></path>
<path id="cursor" d="M269.33 302.78a.4.4 0 00-.41-.39h-2.42a.39.39 0 100 .78h2.42a.4.4 0 00.41-.39z" fill="#83e5ab"></path>
</g>
<g class="webpage" clip-path="url(#clippy)">
<g id="website">
<rect x="133.88" y="243.41" width="52.47" height="242.13" rx="3.57" fill="#f0f0f2"></rect>
<line x1="141.67" y1="256.81" x2="174.02" y2="256.81" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="262.1" x2="179.77" y2="262.1" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="267.4" x2="174.02" y2="267.4" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<rect x="139.83" y="275.67" width="40.59" height="28.15" rx="3.22" fill="#f2c5c2"></rect>
<path d="M154.57 284.27a5.58 5.58 0 11-5.58-5.35 5.46 5.46 0 015.58 5.35z" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></path>
<line x1="144.8" y1="299.31" x2="161.56" y2="299.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.8" y1="294.69" x2="169.32" y2="294.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<g>
<rect x="139.83" y="308.41" width="37.69" height="49.32" rx="3.34" fill="#bdc0f4"></rect>
<line x1="146.12" y1="333.39" x2="157.69" y2="333.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="328.77" x2="163.05" y2="328.77" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="323.91" x2="168.46" y2="323.91" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="318.62" x2="172.42" y2="318.62" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="313.32" x2="168.46" y2="313.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
<g>
<rect x="139.83" y="363.82" width="40.59" height="58.46" rx="3.22" fill="#c2e7ef"></rect>
<line x1="144.98" y1="414.13" x2="158.87" y2="414.13" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.85" y1="410.5" x2="163.18" y2="410.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.62" y1="406.69" x2="166.2" y2="406.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.68" y1="402.92" x2="164.8" y2="402.92" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.75" y1="399.16" x2="158.5" y2="399.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<rect x="144.8" y="368.54" width="29.22" height="23.21" rx="6.86" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></rect>
</g>
<g>
<rect x="140.38" y="433.67" width="39.82" height="40.46" rx="3.34" fill="#d0b6d1"></rect>
<line x1="147.03" y1="467.66" x2="170.62" y2="467.66" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="463.31" x2="174.81" y2="463.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="458.97" x2="170.62" y2="458.97" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="454.16" x2="159.25" y2="454.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="450.37" x2="164.91" y2="450.37" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="446.39" x2="170.62" y2="446.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="442.04" x2="174.81" y2="442.04" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="437.7" x2="170.62" y2="437.7" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
</g>
</g>
</g>
<rect x="133.98" y="243.95" width="52.38" height="4.25" fill="#ddd"></rect>
<ellipse cx="136.91" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<ellipse cx="140.38" cy="246.08" rx=".93" ry=".92" fill="#eaeaea"></ellipse>
<ellipse cx="143.69" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<rect x="133.88" y="330.05" width="52.47" height="2.85" fill="#eaeaea"></rect>
<rect x="182.52" y="248.2" width="3.84" height="81.84" fill="#fff"></rect>
<rect id="scrollbar" x="183.24" y="249.77" width="2.4" height="22.21" rx="1.02" fill="#ddd"></rect>
</g>
</g>
</g>
</svg>

Javascript interfering with 2nd SVG line animation

Link to example: http://bss.com/RK/full3.html -- I want the word MEDIA to STAY on top of the background image after it writes in. Can anyone help me with that? Can I use a div within another div that is using javascript that is interfering with what I want to happen with the interior div.
I am sure this is an easy question for SOers. I've gotten very far but now just spinning my wheels and just can't figure this last bit. I saw this post CSS Animation property stays after animating because I used some from it and it is very close to working for me, however, I have this #box div inside another div that has js applied to it saying
$ (document).ready (function() {
setTimeout (function(){
$("div.center-div").fadeOut(1200); {
$("div.center-div").remove(1200);
};
},5500);
});
and the fadeOut and remove interferes with the second div. I have this (.center-div) div with an svg that fades in then out completely. There is a background image that stays after the fade.
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-
linejoin:round;stroke-miterlimit:10;stroke-dasharray:2000;stroke-dashoffset:
2000;animation-delay:4.5s;animation-timing-function: ease-in forwards;
} /*media word */
I think I need another div for the .st1 content (word media) to fade in and then STAY but can't get that to work. I want the word MEDIA to stay after it comes in. But another div just renders below the center-div.
Have used z-index to no avail. I've tried making a class instead of id, I've tried nesting them as mentioned -- what can I do to get this "media" svg line animation element to come in and STAY, when the enveloping div has javascript to fade out and remove? Thank you. I hope someone can help me as I really need to move on to other things.

Firstly, you are doing a .remove() of the <div> that contains the SVG. So you obviously can't do that.
What you need to do instead is just fade out the elements of the SVG that you want to hide.
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
Since you want to fade out the black background also. You'll need to remove the background color of that <div>, and instead add a black rectangle to the SVG. Then you can fade that out also.
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
Updated example:
<div class="wrapper">
<div class="center-div">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="893px"
height="332.7px" viewBox="0 0 893 332.7" style="enable-background:new 0 0 893 332.7;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#fcfafa;stroke:none;stroke-miterlimit:10;stroke-width:1; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;
} /*WHITE TINY LEAVES */
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:4.5s;
animation-timing-function: ease-in forwards;
} /*media word */
.st2{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:5.6s;
animation-timing-function: ease-in forwards;; } /* dot white*/
.st3{fill:none;stroke:#89CB6A;stroke-width:4;stroke-miterlimit:10;} /* the green line */
/* .st4{fill:none;stroke:#89CB6A;stroke-width:8;stroke-miterlimit:10;} cant see difference-tiny amount of leaves I guess */
.st5{fill:none;stroke:#89CB6A;stroke-width:2;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;} /* reg leaves */
]]>
</style>
<style type="text/css">
svg {
height: 100%;
width: 100%;
margin:auto;
}
path {
stroke-dasharray: 2100;
animation: draw 3.4s linear forwards;
/*transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); */
}
.path2 {
animation-delay: 2s; /*number not mattering here right now
animation: draw 3.4s linear ;*/
}
#keyframes draw {
from {
stroke-dashoffset: 2200;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes msvg {
0% { stroke-dashoffset: 1500; }
12% { stroke-dashoffset: 1500; }
44% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0;
}
}
.wrapper {
position: relative;
background-image: url(https://filedn.com/lPKPli3Xz1KVxCemkqFzHfL/bss/treebanner_893x332.jpg);
background-size: contain;
margin: 0 auto;
max-width: 100%;
width: 1300px;
height: 483px;
z-index: 25;
background-repeat: no-repeat;
/* object-fit: cover; nothing */
}
.center-div /*fades out green line and tree see js*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:13;
background-position: left top;
}
.media-div /*bring in word and stay*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:1;
background-position: left top;
}
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
</style>
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
<g id="MEDIA">
<path class="st1" d="M234.7,201.1l-2.4,10.4c0.3,0.4,14.3-19.9,15.6-0.7c0.5,0.1,8.4-15,12.2-2.9c1.9,2.9,4.1,3.4,5.6,3.7
c7.8,1.7,15.8-6.6,17.3-8.1c0,0,8.1-9.5,11-5.5c2.2,3-4,6.8-10.8,5.9c-0.7,2.5-1.2,6.1,6.8,7.8c11.9,2.5,25-5,29.2-8.6
c3.7-3.1,7.1-5.6,9.3,0c-2.3-8.9-12.4,1.5-9.2,8c0.8,1.6,2.6,1.6,5.1-0.2c3.5-2.4,24.1-35.8,17.2-36.3c-7.3,0.5-9.7,22.1-9.7,22.8
c0,0.7-0.1,15.3,11.1,14.6c11.9-0.8,18.3-6.7,20.5-12.2c-3,7-2.6,11.4,7.3,12.5c11.4,0.2,20.1-14.5,27.3-14.7
c-0.2-0.8-13.9,5.6-11,13.7c0.2,0.4,0.5,0.9,1.2,1.1c2.2,0.7,6.7-4.4,8.8-11.2c-0.8-0.2,4.5,22.4,29.2,1.2"/>
<path class="st2" d="M364.2,188.6c0,0,4.1-1,4.2-2.1"/>
</g>
<g id="line">
<path class="st3" d="M750.9,194.2c0.9,0.9,47.6-162.4,47.6-162.4l-34.8,0.6H55.2c0,0-13.9,0-13.7,13.7c0.1,8.7,0,248.6,0,248.6
s-1.2,9.9,7.5,11.2s659.2,0.4,659.2,0.4s1.5,1.3,9.9-21.1c6.2-16.5,23.8-57.6,23.8-57.6l4.5-12.6c0,0,1.8-6.2,1.1-7"/>
<path class="st4" d="M739.8,232.8"/>
</g>
<g id="tree_2">
<path class="st5" d="M737.5,127.7c-0.6,0.3-1.5,2.9-2.1,3.2l-15.6-2.8l-3.3,4.6l0.4,5.8c0,0-2.1,3.7-8.7,7
c-7.8,3.9-13.6-0.4-14.2-0.1c-0.6-1.2-1.3,2.1-3.2,2.5c-1.9,0.5-1.7-3.5-1.3-4.1c0.3-0.6,2.5-2.2,3.7-4.5c1.1-2.3-1.9-3.6-3.2-2.5
c-0.4,0.3-1.7,1.1-1.8,2c-0.3,2.6-4.2,4.4-5.6,3c-2.1-2.1-5.9,2.8-8.1,3.3c-3.7-1.8-1.2-4.3-1.2-4.3l6.4-2.4l2.7-2l-1.9-2.8
c0,0-0.2-7,6.1-7.8c2.7-0.3-1.1,6.2-0.7,6.9c0.4,0.8,4.6-0.4,4.6-0.4s2.9,1.7,2.9-2.5c0-4.1,2.9,0,2.9,0l2.1,6.2
c0,0,7.7-10,8.3-9.1c0,0,0.4,5.8-1.7,9.9c-2.1,4.1,9.5,0,6.6-5.4c-2.9-5.4-1.7-3.7,0.4-4.6c2.1-0.8,5.8-1.2,10.4-7
c4.6-5.8,4.1-5,8.3-1.7s-9.1,7.5-9.1,7.5s6.6-1.2,12.4-3.3c5.8-2.1,3.1-7.2,2.2-8.5c-0.9-1.3-6-1.8-6-1.8s1.7-5.5,1.2-6.6
c-0.4-1.1-2.5,2.5-2.5,2.5l-3.7-3.3l-2.5,3.7c0,0-3.7,0.8-6.2,9.9c-2.5,9.1,2.1,4.6-1.2,3.7c-3.3-0.8-4.4-8-1.7-12.8
c2.4-4.2,8.3-4,8.3-4l-4.3-2.5c0,0-3.2,2.7-4.7,0.4c-1.9,4.2,1.2,8.1-7.1,1.1c-2.4,0.9,2,7-0.5,7c-2.5,0-4.1-2.1-4.1-2.1l-5.4,5
c0,0-1.2-6.7-5.3-2c-1.8,2.2,2.8-9.1-0.1-9.4c-2.9-0.3-4.1,8.5-5.4,6s-4.9-4.6-6.6,0.4c-0.8,2.2-2.2,6.5-4.3,7.4
c-0.3,1.1-0.3,2.3,0.1,3.7c0.1,1.1,3.1,3,1.8,7.1c-0.7,2.1-7.2-4.4-6.2-8.5c0.2-0.7,9.8-11.1,4.8-16c-2-1.9-3.7-0.4-5,1.1
c-1.2,1.6,2.2,9.2,0.7,9.1s-3.8-6-4.6-6.4c-0.7-0.4-1.3,4.5-5.1,4.5c-3.7,0,2.7-9.5-3.9-5.4c-6.6,4.1-1.7,9.9-1.7,9.9l-5,0.4
c0,0,4.1,4.1,1.2,4.6s-5.8-9.1-5.8-9.1s3.1,12.9,1.2,11.2c-9.7-8.8-2.7,3-6,4.6c-3.3,1.7-2.9-5.3-7.6-4.4c-1.2,0.2-3.8,2.7-0.9,4.8
c2.9,2.1-6.2,6.2-10.4,6.6s-0.2,6.5-4.6,8.7c-3.1,1.6-7.8-2.5-7.8-2.5l3.7,9.5l-5.8,2.5l0.8,4.6c0,0-1.9,3.3-0.4,3.7
c1.5,0.4,4.6-2.5,4.6-2.5s4.6,2.9,5.8,0c1.2-2.9,7.9-0.4,12.8-1.7c5-1.2,1.2,5.8,1.2,5.8s-7.5-3.3-6.6,4.1s5.4,4.6,5.4,2.9
c0-1.7,0-4.6,5-4.1c5,0.4,2.5,2.9,6.6,2.1c4.1-0.8,3.1-4.4,6.6-8.7c3.1-3.8,13.3,4.4,11.6,8.4"/>
<line class="st5" x1="611.9" y1="166.5" x2="612.1" y2="166.2"/>
<path class="st5" d="M748.8,207.6c-2-1.5-6.9,2.2-6.9,2.2s-6.9,1.5-8.9,2.1c-1.5,0.5-6.9,1.3-8.2,1.6c-0.8-0.6-4.9,0.3-6.7-0.4
c-1.9-0.8-5.8,0-7.9-3.3c-2.1-3.3-4.7-0.1-4.7-0.1l2.7-3.2l-2.5-6.6l-6.2-1.7l-6.6-5c0,0-9.5,1.7-8.3,2.9s-3.7,3.7,0.4,5
c4.1,1.2-9.5,6.2-9.1,0c0.4-6.2,0.4-10.4-5-6.2s-6.6,5-8.7,9.1c-0.9,1.7-5.2-2.3-5.2-2.3s-4.7,7.2-8,5.2c-3.3-2.1-1.3-5.5,0.6-7.7
c0.7,1.6,0.7,1.7,1.9,3.5c3.3,3.3,2.9,2.5,4.6-0.4c1.7-2.9,2.1-8.7,2.1-8.7l-3.3-2.1c0,0-7,5-12,5.4c-5,0.4-4-2.9-0.3-3.4
c4.4-0.6-3-8.6-7.1-6.9c-4.1,1.7-1.2-5.4,3.3-5c4.6,0.4,6.6,3.3,6.6,3.3l2.9-3.3v2.5l4.6-2.9l0.4,3.7c0,0-1.7,4.6,3.7,3.7
s5.8-2.5,5.8-2.5s-2.9-3.3-5.4-1.2c-2.5,2.1,2.9-6.2,6.6-3.3c3.7,2.9,6.2,5,8.3,2.5c2.1-2.5,0.8-8.3,4.1-7.5
c3.3,0.8-9.9-2.1-9.9-2.1l3.3-2.5c0,0-2.5-6.2-5.8-4.6c-3.3,1.7-8.3-1.2-8.3-1.2l-0.8,4.1c0,0-9.1,2.6-11.2,2.7
c-9.9,0.3-12.7,9.4-16.5,8.5c-5-1.2-5.1-2.6-3.8-5c1.5-3-5.7-2.7-2.9-4.6c5.4-3.5-4.6-10.1-4.6-3.3c0,2.1-2.1,7-2.9,7.5
c-0.8,0.4-2.5-3.7-2.5-3.7s-3.3,2.1-3.1-1.6c0.2-2.1,2.8-5.3,4.1-4"/>
<path class="st5" d="M612.1,166.2c-0.2,0-0.4,0-0.5,0"/>
<path class="st5" d="M682.7,117.6c0,0-3,0.8-3.9,5.1c-0.3,1.3-1.2,2.7-1.2,2.7S685.9,124.8,682.7,117.6z"/>
<path class="st5" d="M626.8,181.2c0,0-2.9,1.1-1.9,3.9c1,2.8-0.4,2-0.4,2s5.8-1.2,2.6-5.5"/>
<path class="st5" d="M684,161.2c0,0,2.1,2,4.4,0.1c0.8-0.3,2-0.4,2-0.4s-3.5-4.7-6.1,0L684,161.2z"/>
<path class="st5" d="M633.5,149.5c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.7,3.6,5L633.5,149.5z"/>
<path class="st5" d="M618.3,158.8c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.6,3.6,5"/>
<path class="st5" d="M639.7,128.4"/>
<path class="st5" d="M646.9,122.7"/>
<path class="st5" d="M659.5,98.5"/>
<path class="st0" d="M714.3,112.8c0,0-0.5,2,1.4,2.5c1.9,0.5,0.9,1,0.9,1s1.5-3.6-2.1-3.5L714.3,112.8z"/>
<path class="st5" d="M691.4,148c0,0-2.6,7.9,0.7,12l0.7-0.9c0,0,4.4-7.7,5.4-6.6s-1,7.5-0.5,8.1c0.5,0.6,4.6-6,4.6-0.6
c0,0.7,1.7,2.4-0.6,2.8c-2.3,0.5,1.2,2.8-0.2,3.4c-1.5,0.6-1.6-1.2-5.4,0.4c-3.8,1.7-4.8,5.5-4.8,5.5l6.7-1.3c0,0,0.3,0.5-1.2,0.7
c-4.7,0.5-10.9,13.3-10.9,13.3s0.8-0.2,4,0.4c7.2,1.4,10.3,6.4,13.2,6.4c2.9,0,8.5,4.7,13.1,13.5c2.7,3.7,5.2,0.1,5.2-0.7
c0-0.8-0.3-2.7-0.3-2.7s-0.1-18.4,3.9-21.1c-3,4.2-4.6,19.1-2.5,19.9c2.1,0.8,5.4,0,5.4,0l1.2,1.7c0,0,1.7,2.3,6.6-0.4
s7.1-4.9,12.1-6.1c1.2-0.3,2.2-0.3,3-0.1"/>
<path class="st0" d="M703.3,147.5c0,0,2.7,3.7,6.2,3.9c3.5,0.2,2.9-2.1,4.8-1.4"/>
<path class="st0" d="M693.9,164.6c0,0,0.3-2.1-1.8-2.7c-0.5-0.4-1.1-1-1.1-1s-1.3,4.2,2.7,3.7L693.9,164.6z"/>
<line class="st5" x1="750.2" y1="192.6" x2="749.3" y2="195.1"/>
</g>
<g id="leaves">
<path class="st5" d="M661.6,156c0,0,5.7,2.3,1.4,5.7c-3.3-3-1.9-5.7-1.9-5.7l1.6-2.7c0,0-0.9-4.9-7.7-3.7c2.7,7,7.2,2.6,7.2,2.6"/>
<path class="st0" d="M727.3,129.8c-0.2,2.2,1.8-1.3,2.2,4c0.1,2-1.5,2.9-1.5,2.9c4.1,1.2,4-2.2,3.7-3.1c-0.3-0.8-2.6-2.1-2.6-2.1"
/>
<path class="st0" d="M702.6,116.5c0,0-1.7-4.3,1.9-6.8C706.7,113.1,702.6,116.5,702.6,116.5c-0.1-0.1-1.6,3.3-3.8,3.2
c-2.2-0.1-3.8,3.4-3.8,3.4s3.3,2.4,4.1-3.3c4.9-1.4,4.9,1.5,4.9,2.6c0,0-0.4,4.4,4.4,4.2c0.6-2.8-4.4-4.2-4.4-4.2s5.8,1.9,7.9-2.9"
/>
<path class="st5" d="M641.2,147.2c0,0-0.5,1.2,3.8,3.5c4.4,2.3,3.3-1.7,3.3-1.7s-1.5-5,3.7-6.2c1.7,7.7-2.8,7.6-2.8,7.6"/>
<path class="st5" d="M628.9,139.9c0,0-7.7,0.2-7.3-4.4c0,0,6.2-3.3,8.3,4.6"/>
<path class="st5" d="M670.8,129.6c0,0-7-0.4-4.8-6.2c2.5,0.2,4.3,4.8,3.7,5.8"/>
<path class="st5" d="M662.4,130.7c-1.6-0.6-2.5-0.4-2.5-0.4s-2.7-2.7-6.8,0.7c-2.1,1.3-2.2,0-2.2,0c2.7,2.7,3.4,2.7,6,2.1
s2.6-2.7,2.6-2.7l-2.8-2.4c0,0-2.8-3.3,1.5-5.7c2.6-1.3,0.6-2.8,0.6-2.8s4,2.7,3.2,4.8c-0.8,2.1-6.1,1.9-6.1,1.9"/>
<path class="st5" d="M626.2,146.1c0,0-0.4,3.5-7.9,3.7c4.1-5,0.4-3.1,7.2-5.8C626.2,145.5,626.2,146.1,626.2,146.1z"/>
<path class="st0" d="M654.6,108.5c0,0-5.1-3.9-7.2,1.8c3.6,1.5,3.9,0.8,6.4-1.1"/>
<path class="st5" d="M644.1,154.9c0,0,2.8-0.7,5.2,4.8c-5-1.6-2.5,0.6-6.6-3.7C643.6,155.1,644.1,154.9,644.1,154.9z"/>
<path class="st0" d="M681.5,193.9c0,0,1.4,2.4-2,4.6c-2.9-3.4,1.2-5.5,0.6-5c4.1-0.1,3.5-2,2.9-4.9c-1.1-4.8-3-1.4-3-1.4
s-3.2,4.2-7.5,1.1c4.8-6.2,7.2-1.1,7.2-1.1"/>
<path class="st0" d="M643.7,164.3c0,0,0.7-5.3-3.5-6.4c-4.2-1.1-2-2.2-2-2.2s-2.5,8.1,5.4,8"/>
<path class="st5" d="M685.8,178.1c0,0,3.8-2.7,1.3-6.3c-2.5-3.6-1.5-3-1.5-3s-5.5,4.7,0.6,9.7"/>
<path class="st0" d="M667.2,118.8c0,0,1.8-4.3-2.1-6.3c-3.9-2-1.5-2.6-1.5-2.6s-4.3,7.4,3.5,9L667.2,118.8z"/>
<path class="st0" d="M674.7,139c0,0,0.6-1.6-1.2-3.7c-2.2-2.5-2.9-2.2-2.9-2.2S668.4,139.6,674.7,139"/>
<path class="st0" d="M650.2,167.9"/>
<path class="st0" d="M653.6,174.3"/>
<path class="st0" d="M644.2,179.8c0,0,0.5-3.7-2.3-4.5c-2.8-0.8-1.3-1.5-1.3-1.5s-1.7,5.7,3.6,5.6"/>
<path class="st0" d="M674.1,164.5c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M633.9,172.1c0,0,3.7,0.5,4.5-2.2c0.8-2.8,1.5-1.3,1.5-1.3s-5.7-1.8-5.6,3.5"/>
<path class="st0" d="M683.7,189.5c1.1,0.8,4.7,1.4,4.7,1.4s-0.9-5.1-5.2-2"/>
<path class="st0" d="M610.1,163.2c0,0,0.6,3.9,3.8,3.8c3.2-0.1,1.9,1.1,1.9,1.1s0.1-6.3-5.5-4.5"/>
<path class="st5" d="M632.6,123.3c0,0-6.1-5.2,0.1-9.2c2.3,1.9,1.4,8.2,0.1,9.4L632.6,123.3z"/>
<path class="st0" d="M668.4,105.3c0,0-6.6-1.3-3.7-6.8c2.5,0.5,4.4,5.4,4,6.8L668.4,105.3z"/>
<path class="st0" d="M720.8,172.6c0,0,0.2,2.6,2.4,4.5c1.3,1.1,1.4,1.5,1.4,1.5s1.6-5.7-3.6-5.5"/>
<path class="st0" d="M680.5,100.9c0,0-0.8,3.1,2.1,3.9c2.9,0.8,1.4,1.5,1.4,1.5s1.8-5.7-3.7-5.6L680.5,100.9z"/>
<path class="st5" d="M679,110.5c0,0,6.7-0.1,5.1,5.9c-2.5,0.1-5.5-4.3-5.3-5.8L679,110.5z"/>
<path class="st0" d="M656.5,120.2c0,0,6.4-0.8,3.9-6.3c-3.6,1.5-3.4,2.1-3.8,5.3L656.5,120.2z"/>
<path class="st0" d="M711.6,118.1c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M724.9,111.7c0,0-2.5-0.5-4.9,1.1c-1.4,0.9-1.8,0.9-1.8,0.9s5.1,3.1,6.3-2"/>
<g>
<path class="st5" d="M693.1,123.3c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L693.1,123.3z"/>
</g>
<g>
<path class="st0" d="M721.1,143.1c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L721.1,143.1z"/>
</g>
<g>
<path class="st0" d="M686.5,138.1c0,0-5.5,1.3-3.2-4.2c2.1-0.9,3,2.6,3.1,3.3L686.5,138.1z"/>
</g>
<path class="st0" d="M705.5,154.4c0.9-1,0.5-2.3,0.3-2.7c-1-2.1-1.6-2.1-1.6-2.1s-2.8,4.1,1.7,4.9"/>
<path class="st0" d="M672.3,162.7c0,0,0.1-2.6-1.8-4.7c-1.1-1.2-1.2-1.6-1.2-1.6s-2.2,5.5,3,5.9"/>
<path class="st0" d="M620,147.8c0,0-2.2-4.7-5.8-1.4c2,2.4,2.5,2,5,1.6"/>
<path class="st0" d="M637.1,112.9c0,0,0.1,4.2,3.8,5.2c2.5,0.7,2,1.7,2,1.7s1.3-7.4-5.6-6.4"/>
<path class="st0" d="M646.9,200.1c0,0-2.5-0.3-4.8,1.4c-1.3,1-1.7,1-1.7,1s5.3,2.7,6.2-2.4"/>
<path class="st5" d="M640.5,143c0,0,2.7,5.4-2.2,8.8c-2.9-4,2-8.3,2-8.3s1.6-4.1,4.3-4.2c2.7,0,4.4-4.3,4.4-4.3s-3.3-2.5-4.9,2.8
c-6.6,4-6.1-1.1-6.1-1.1s-0.7-7.5-6.4-6.9c0.3,4.3,0.1,3.7,5.4,6.3c5.3,2.5-4.5-3-8.1,4.5c2.7,4.6,5.8-2.3,5.8-2.3"/>
<path class="st0" d="M618.8,137.3c0,0-5,2.8-5-2.3c0-1.5,0-1.2,0.5-2.9C615,133.2,616.7,136,618.8,137.3z"/>
<path class="st5" d="M706.5,147c0,0,3.7-1.3,1.2-5.6c-2.5-4.2-3.7-0.3-3.7-0.3s-1.4,5-6.4,3.3c2.6-7.4,6.3-4,6.3-4"/>
<path class="st5" d="M715.1,158.3"/>
<path class="st5" d="M682.7,164.5c0,0,0.1,6.8-5.9,5.1c-0.2-4.8,4-4.3,5.5-4.1"/>
<path class="st5" d="M665.4,143.9c0,0-0.7,2.9-8.6,2.1c-1.5-0.2-3.8-7.6,7.2-3c3.2,1.5,3.6-1.4,2.3-1c-1.2,0.4-8.2-6.8-4.4-9
c3.8-2.3,3.5-1.7,5.4-1.6c-2.5,4.8-4.7,7.6-4.7,7.6"/>
<path class="st0" d="M647.3,133.4c-0.3-1.2-1.6-0.8-1.6-0.8s-0.4-2.6-3.9-1.2c-0.4,0.1-2.3-0.3-2.3-0.3c0.4,1.1,1.7,2.6,3.6,2.7
c1.9,0.1,2.3-1.3,2.3-1.3l-1.4-2.2c0,0-1.8-2.9,1.6-3.6c1-0.1,2.3-0.9,2.3-0.9s1.4,1.9,0.5,3.1c-1,1.2-4.5-0.1-4.5-0.1"/>
<path class="st5" d="M662.5,190.7c0,0-2.5,7,4.5,7.3c0.5-6.4-3-6.1-4.6-6.5"/>
<path class="st0" d="M665.2,189.5c0,0-1.9,0.9-4.3-2.7c3.7,0.5,1.7-0.8,5.1,1.8C665.5,189.3,665.2,189.5,665.2,189.5z"/>
<path class="st5" d="M677.9,144.3c1.1,1.4,1.9,1.6,1.9,1.6s3.2,4.3,8,4.1c-0.6-2.5-1.5-4.1-4-4.9c-2.5-0.8-3.6,1-3.6,1l1.1,3.5
c0.6,4.6-5.9,5.3-5.9,5.3s-1.6-2.9,0.2-4.2c1.8-1.4,5.4,0.9,5.4,0.9"/>
<path class="st5" d="M676.5,183.1c0,0,4-5.5,6.9-0.8c-2.5,3.7-5.7-0.3-6.2-0.3"/>
<path class="st5" d="M661.4,179.2c0,0-3.7,0.3-3.3-7.1c3.5,1.9,5,2.6,5.4,6.7C662,179.3,661.4,179.2,661.4,179.2z"/>
<path class="st5" d="M665,150.9c-0.2,0.1,3.8-5.1,6.8-0.4C668.3,155.6,665,150.9,665,150.9C665.5,150.5,665.1,150.8,665,150.9z"/>
<path class="st0" d="M715.8,146.5c0.3,0.2,1.6,3.2-2.2,3.6C712.1,146.7,715.5,146.3,715.8,146.5z"/>
<path class="st0" d="M662.1,207.4c0,0,5.2-3.4,5.5,2.1c-4.4,1-5.7-1.7-5.7-1.7l-1.3-2.8c0,0-4.5-2-7.4,4.3c7.3,1.8,6.3-4.5,6.3-4.5
"/>
<path class="st5" d="M648.1,175.7c0,0,4-5.5,6.9-0.8c-2.7,6.5-3.6,0-6.1,0.7"/>
<path class="st0" d="M631.2,155.3c0,0-4.4,2-6.4-5.2c3.9,0.7,6.9,1.7,5.3,5.4"/>
<path class="st0" d="M674.4,161.7c0,0-0.6-4.9,6.9-4.5c-1.9,3.5-3.7,6-6.8,3.4"/>
<path class="st0" d="M646.3,171.9c0,0-1.9-4.5,5.3-6.3c-0.8,3.9-1.9,6.9-5.5,5.2"/>
<path class="st0" d="M648.3,195.4c0,0-4.7-1.2-1.7-8c2.6,3,4.3,5.7,0.7,7.6"/>
<path class="st0" d="M636.4,176.6c0,0-2.8,4-8.1-1.2c3.7-1.4,6.8-2,7.4,1.9"/>
<path class="st0" d="M626.7,133c-1.1-0.6-0.4-1.7-0.4-1.7s-2.4-1.1-0.1-4c0.2-0.4,0.3-2.3,0.3-2.3c1,0.7,2,2.3,1.7,4.2
c-0.4,1.8-1.8,1.9-1.8,1.9l-1.8-1.9c0,0-2.3-2.5-3.9,0.6c-0.3,1-1.5,2-1.5,2s1.4,1.9,2.9,1.3c1.5-0.6,1.1-4.4,1.1-4.4"/>
<path class="st0" d="M625.3,163.8c-1.1,0.5-1.6-0.8-1.6-0.8s-2.3,1.3-3.3-2.3c-0.2-0.4-1.7-1.6-1.7-1.6c1.1-0.4,3.1-0.2,4.3,1.1
c1.3,1.4,0.4,2.6,0.4,2.6l-2.6,0.3c0,0-3.4,0.4-1.8,3.5c0.6,0.8,0.7,2.4,0.7,2.4s2.4,0,2.7-1.6c0.4-1.5-2.9-3.5-2.9-3.5"/>
<path class="st0" d="M639.4,192.1c0,0-1.6,4-7.2,0.5c2.9-1.9,5.5-3,6.7,0.3"/>
<path class="st5" d="M697.3,107.4c0,0-3.4-1.5,0.7-7.8c2.1,3.3,3.1,4.7,1.4,8.5C697.8,107.8,697.3,107.4,697.3,107.4z"/>
<path class="st0" d="M738.1,110.1c0,0-1.5-5.6,2.5-4.8c-0.5,3.4-2.6,4.4-2.6,4.4s0-0.2-1.6,2c-2.2,3.1-0.2,2.4,2.2,2.9
c0.7-0.4,1.6-2.6,4.5,0.8c-3.1,2.2-4.3-0.6-4.5-0.8"/>
<polyline class="st5" points="720.4,128.7 722,133.2 724.2,133.2 "/>
<path class="st0" d="M668,189.7c0,0-1.5-1.4,1-4.9c0.8,3.7,1.3,1.3,0.1,5.4C668.3,189.9,668,189.7,668,189.7z"/>
<path class="st0" d="M696.9,170.2c1.3,0.9,2.1,0.8,2.1,0.8s3.9,2.7,7.9,1.1c-1.2-1.9-2.4-3-4.8-3c-2.3,0-2.8,1.9-2.8,1.9l2,2.6
c1.8,3.7-3.4,6.2-3.4,6.2s-2.2-1.9-1.1-3.6c1.1-1.7,4.8-0.8,4.8-0.8"/>
<path class="st0" d="M703.5,165.9c-0.1,0.1,2.1-5,5.4-1.8C707.2,169.1,703.5,165.9,703.5,165.9
C703.9,165.5,703.6,165.8,703.5,165.9z"/>
<path class="st0" d="M632.5,199.6c0,0.2-1.1-5.3,3.5-4.5C637.4,200.2,632.5,199.6,632.5,199.6C632.6,199.1,632.5,199.6,632.5,199.6
z"/>
</g>
</svg>
</div>
</div>

Is it possible to sequence the path animation

I have a html page which animates three svg paths all at once.
#keyframes draw {
100% {
stroke-dashoffset: 1;
}
}
.path {
stroke-dasharray: 555;
stroke-dashoffset: 555;
-webkit-animation: draw 19s normal linear forwards;
-moz-animation-name: draw 3s normal linear forwards;
-o-animation-name: draw 3s normal linear forwards;
animation-name: draw 3s normal linear forwards;
}
<svg class="multipath" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 21.079449,129.62288 c 33.842653,-15.80707 -32.075893,-17.10715 0,0"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M 29.259532,121.44279 C 61.098099,135.68206 62.642648,115.18396 41.844279,94.385593 36.3407,88.882014 10.779265,91.868643 18.5625,91.868643 c 18.104688,0 27.15088,-5.255721 37.754236,-15.101694"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 55.058262,119.55508 c 19.137979,21.06152 26.855914,6.64597 25.169494,-22.023302"/>
</svg>
How can i sequence the animation i,e animating second path after completion of first path, third after second.

You can use animation-delay to get the sequence of animation
Stack Snippet
#keyframes draw {
100% {
stroke-dashoffset: 1;
}
}
.path {
stroke-dasharray: 555;
stroke-dashoffset: 555;
animation: draw 3s linear forwards;
}
.path:nth-child(2) {
animation-delay: 1s;
}
.path:nth-child(3) {
animation-delay: 2s;
}
<svg class="multipath" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 21.079449,129.62288 c 33.842653,-15.80707 -32.075893,-17.10715 0,0"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M 29.259532,121.44279 C 61.098099,135.68206 62.642648,115.18396 41.844279,94.385593 36.3407,88.882014 10.779265,91.868643 18.5625,91.868643 c 18.104688,0 27.15088,-5.255721 37.754236,-15.101694"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 55.058262,119.55508 c 19.137979,21.06152 26.855914,6.64597 25.169494,-22.023302"/>
</svg>

Is there a way to run an svg on click?

<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="450px" height="450px" viewBox="0 0 450 450" style="enable-background:new 0 0 450 450;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<rect id="1" x="299.8" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="2" x="150.2" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="3" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="4" x="299.8" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="5" x="150.2" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="6" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="7" x="299.8" class="st0" width="149.5" height="150.5"/>
<rect id="8" x="150.2" class="st0" width="149.5" height="150.5"/>
<rect id="9" class="st0" width="149.5" height="150.5"/>
<line class="path" fill="none" stroke="#000000" x1="149.5" y1="0" x2="149.5" y2="450"/>
<line class="path" fill="none" stroke="#000000" x1="299.5" y1="450" x2="299.5" y2="0"/>
<line class="path" fill="none" stroke="#000000" x1="0" y1="150.5" x2="450" y2="150.5"/>
<line class="path" fill="none" stroke="#000000" x1="450" y1="300.5" x2="0" y2="300.5"/>
</svg>
I have this svg which is a tic tac toe board. I want it to load(run the animation of the line tags) AFTER the user enters the number of players and player names. Is there a way to do that? the rect elements are what I will use to target areas while playing the game.
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}

Like so perhaps i.e. set the class on click?
function run() {
var lines = document.getElementsByTagName("line");
for (var i = 0; i < lines.length; i++) {
lines[i].setAttribute("class", "path");
}
}
line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.path {
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<button onclick="run()">click me</button>
<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="450px" height="450px" viewBox="0 0 450 450" style="enable-background:new 0 0 450 450;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<rect id="1" x="299.8" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="2" x="150.2" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="3" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="4" x="299.8" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="5" x="150.2" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="6" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="7" x="299.8" class="st0" width="149.5" height="150.5"/>
<rect id="8" x="150.2" class="st0" width="149.5" height="150.5"/>
<rect id="9" class="st0" width="149.5" height="150.5"/>
<line fill="none" stroke="#000000" x1="149.5" y1="0" x2="149.5" y2="450"/>
<line fill="none" stroke="#000000" x1="299.5" y1="450" x2="299.5" y2="0"/>
<line fill="none" stroke="#000000" x1="0" y1="150.5" x2="450" y2="150.5"/>
<line fill="none" stroke="#000000" x1="450" y1="300.5" x2="0" y2="300.5"/>
</svg>