secret-santa-principle.svg

<?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>