Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 440 280" xml:space="preserve">
<style type="text/css">
.arrow .line{fill:none;stroke:#8B999E;stroke-width:3;stroke-miterlimit:10;}
.arrow .head{fill:#8B999E;}
.person{fill:#617D8C;}
.present{fill:#B72427;}
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
.edge {
animation-name: appear;
animation-duration: 60s;
animation-fill-mode: backwards;
--spacing: 0.6s;
}
.edge:nth-of-type(2) {
animation-delay: calc( 1*var(--spacing) );
}
.edge:nth-of-type(3) {
animation-delay: calc( 2*var(--spacing) );
}
.edge:nth-of-type(4) {
animation-delay: calc( 3*var(--spacing) );
}
.edge:nth-of-type(5) {
animation-delay: calc( 4*var(--spacing) );
}
</style>
<defs id="defs77">
<symbol id="person">
<path class="person" d="M217 41.4c5.6 0 10.1-4.5 10.1-10.1s-4.5-10.1-10.1-10.1-10.1 4.5-10.1 10.1 4.5 10.1 10.1 10.1zm0 5.1c-6.8 0-20.3 3.4-20.3 10.1v5.1h40.6v-5.1c-.1-6.7-13.6-10.1-20.3-10.1z" id="path4"/>
</symbol>
<symbol id="present">
<path class="present" d="M158.5 43.5V49c0 1-.9 1.9-1.9 1.9v14.8c0 2-1.6 3.8-3.7 3.8h-29.7c-2 0-3.7-1.6-3.7-3.8V50.9c-1 0-1.9-.9-1.9-1.9v-5.5c0-2 1.6-3.8 3.7-3.8h5.9c-.2-.6-.3-1.2-.3-1.9 0-3.1 2.5-5.5 5.5-5.5 1.9 0 3.5.9 4.5 2.3l1 1.4 1-1.4c1-1.4 2.6-2.3 4.5-2.3 3.1 0 5.5 2.5 5.5 5.5 0 .7-.1 1.3-.3 1.9h5.9c2.4.1 4 1.8 4 3.8zm-3.7 3.8v-3.7H140v3.7h14.8zM153 65.8V50.9h-13v14.8h13zM145.5 38c0-1-.9-1.9-1.9-1.9s-1.9.9-1.9 1.9.9 1.9 1.9 1.9 1.9-.9 1.9-1.9zm-9.2 27.8V50.9h-13v14.8h13zm0-18.5v-3.7h-14.8v3.7h14.8zm-1.8-9.3c0-1-.9-1.9-1.9-1.9-1 0-1.9.9-1.9 1.9s.9 1.9 1.9 1.9c1-.1 1.9-.9 1.9-1.9z" id="path22"/>
</symbol>
</defs>
<use xlink:href="#person"/>
<use xlink:href="#person" transform="translate(129.8,66.6)"/>
<use xlink:href="#person" transform="translate(73.5,161.3)"/>
<use xlink:href="#person" transform="translate(-66.4,171.5)"/>
<use xlink:href="#person" transform="translate(-119.4,71.6)"/>
<g class="edge">
<g class="arrow">
<path class="line" d="M160,41.4c9.2-4.9,21-7.2,29.8-8.2"/>
<polygon class="head" points="187.2,37.9 203.1,32.3 186.5,29.2"/>
<path class="line" d="M95,90.2c10-18.5,22.7-26.7,22.7-26.7"/>
</g>
<use xlink:href="#present"/>
</g>
<g class="edge">
<g class="arrow">
<path class="line" d="M326.6,191.9c-1.6,2.7-3.9,5.5-6.3,8.1"/>
<polygon class="head" points="319.2,194.8 310.8,209.4 325.4,201"/>
<path class="line" d="M353,130.9c-0.9,10.4-6.1,20.9-6.1,20.9"/>
</g>
<use xlink:href="#present" transform="translate(199.4,120.6)"/>
</g>
<g class="edge">
<g class="arrow">
<path class="line" d="M218.5,65.2c0,34.8-19.5,76.5-19.5,76.5"/>
<path class="line" d="M181.5,180c-2,3.7-4.4,7.3-6.6,10.5"/>
<polygon class="head" points="173.2,185.5 166.8,201 180.1,190.7"/>
</g>
<use xlink:href="#present" transform="translate(43.4,106.7)"/>
</g>
<g class="edge">
<g class="arrow">
<path class="line" d="M181.5,117.1c59.4,18.7,100.6,64.6,100.6,64.6"/>
<path class="line" d="M137.4,104.4c-3.9-1.2-8.3-2-12.2-2.4"/>
<polygon class="head" points="128.3,97.9 111.9,101.5 127.9,106.6"/>
</g>
<use xlink:href="#present" transform="translate(21.8,57.6)"/>
</g>
<g class="edge">
<g class="arrow">
<path class="line" d="M174.2,207.8c36.4-50.5,85.7-81.9,85.7-81.9"/>
<path class="line" d="M299.5,108.4c3.8-0.8,7.9-1.4,11.6-1.7"/>
<polygon class="head" points="308.3,111.5 325.1,105.9 307.7,102.4"/>
</g>
<use xlink:href="#present" transform="translate(142.2,70.6)"/>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.