<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="interacthings" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52px" height="60px" viewBox="0 0 52 60" enable-background="new 0 0 52 60" xml:space="preserve">
<g>
  <line id="yesil2" fill="none" stroke="#B2E04C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="2" y1="44" x2="2" y2="16" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 2 16" to="0 2 16" begin="3400ms" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="3400ms" dur="100ms" />
  </line>
  
  <line id="sari2" fill="none" stroke="#FFD100" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="2" y1="16" x2="26" y2="2" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 26 2" to="0 26 2" begin="3200ms" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="3200ms" dur="100ms" />
  </line>
  
  <line id="turuncu2" fill="none" stroke="#FF9700" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="50" y1="16" x2="26" y2="2" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 50 16" to="0 50 16" begin="3s" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="3s" dur="100ms" />
  </line>
  
  <line id="kirmizi2" fill="none" stroke="#FD5857" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="50" y1="44" x2="50" y2="16" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 50 44" to="0 50 44" begin="2800ms" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2800ms" dur="100ms" />
  </line>
  
  <line id="mor" fill="none" stroke="#A086C4" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="50" y1="44" x2="26" y2="58" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 26 58" to="0 26 58" begin="2600ms" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2600ms" dur="100ms" />
  </line>
  
  <line id="mavi" fill="none" stroke="#00ACE6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="14" y1="51" x2="26" y2="58" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 14 51" to="0 14 51" begin="2400ms" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2400ms" dur="100ms" />
  </line>
  
  <line id="turkuaz" fill="none" stroke="#3ECFE6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="14" y1="51" x2="14" y2="23" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 14 23" to="0 14 23" begin="2200ms" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2200ms" dur="100ms" />
  </line>
  
  
  <line id="koyuyesil" fill="none" stroke="#37CBA2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26" y1="16" x2="14" y2="23" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 26 16" to="0 26 16" begin="2s" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2s" dur="100ms" />
  </line>
  
  <line id="yesil" fill="none" stroke="#B2E04C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26" y1="16" x2="38" y2="23" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 38 23" to="0 38 23" begin="1800ms" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1800ms" dur="100ms" />
  </line>
  
  <line id="sari" fill="none" stroke="#FFD100" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38" y1="37" x2="38" y2="23" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 38 37" to="0 38 37" begin="1600ms" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1600ms" dur="100ms" />
  </line>
  
  <line id="turuncu" fill="none" stroke="#FF9700" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38" y1="37" x2="26" y2="44" opacity="0">
    <animateTransform attributeName="transform" type="rotate" from="-60 26 44" to="0 26 44" begin="1400ms" dur="200ms" additive="replace" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1400ms" dur="100ms" />
  </line>
  
  <line id="kirmizi" fill="none" stroke="#FD5857" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26" y1="44" x2="26" y2="30" opacity="0">
    <animate attributeName="y1" begin="1200ms" dur="200ms" fill="freeze" from="30" to="44" />
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1200ms" dur="100ms" />
  </line>
  
  <circle id="nokta" fill="#FD5857" cx="26" cy="30" r="4" opacity="0">
    <animate attributeName="r" begin="1s" dur="200ms" fill="freeze" from="0" to="4" />
    <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1s" dur="100ms" />
  </circle>
</g>
</svg>
@import "bourbon";

// elle
$size: 1;

// elleme
$width: 52px * $size;
$height: 60px * $size;

#interacthings { 
  @include position(absolute, 50% 0 0 50%);
  @include transform(translateX(-50%) translateY(-50%));
  @include size($width $height);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.