Difference between revisions of "Team:Calgary/TestingAtika"

Line 7: Line 7:
  
  
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"> </script>
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
 +
<script src ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"> </script>
 +
<script type ="text/javascript">
 +
$( document ).ready(function() {
 +
  console.clear();
 +
  TweenMax.set("#circle1", {xPercent:-50, yPercent:-50});
 +
  var pathArcLeft = MorphSVGPlugin.pathDataToBezier("#motionPath", {align:"#circle1"});
 +
  TweenMax.to("#circle1", 3, {bezier:{values:pathArcLeft, type:"cubic"}, repeat:-1, yoyo:false});
 +
  TweenMax.set("#circle2", {xPercent:-50, yPercent:-40});
 +
  var pathArcLeft = MorphSVGPlugin.pathDataToBezier("#motionPath", {align:"#circle2"});
 +
  TweenMax.to("#circle2", 5, {bezier:{values:pathArcLeft, type:"cubic"}, repeat:-1, yoyo:false});
  
−
<img id="Box1" style="position:absolute; top: 230%;
+
});
−
                left: 50%;
+
</script>
−
                -webkit-transform: translate(-50%, -50%);
+
−
                -moz-transform: translate(-50%, -50%);
+
−
                -ms-transform: translate(-50%, -50%);
+
−
                -o-transform: translate(-50%, -50%);
+
−
                transform: translate(-50%, -50%); WIDTH:500px; HEIGHT:320px"  src="https://static.igem.org/mediawiki/2017/7/7a/Textbox1.png">
+
−
<img id="Box2" style="position:absolute; top: 230%;
+
−
                left: 50%;
+
−
                -webkit-transform: translate(-50%, -50%);
+
−
                -moz-transform: translate(-50%, -50%);
+
−
                -ms-transform: translate(-50%, -50%);
+
−
                -o-transform: translate(-50%, -50%);
+
−
                transform: translate(-50%, -50%); WIDTH:500px; HEIGHT:320px"  src="https://static.igem.org/mediawiki/2017/a/a9/Textbox2.png">
+
−
<img id="Box3" style="position:absolute; top: 230%;
+
−
                left: 50%;
+
−
                -webkit-transform: translate(-50%, -50%);
+
−
                -moz-transform: translate(-50%, -50%);
+
−
                -ms-transform: translate(-50%, -50%);
+
−
                -o-transform: translate(-50%, -50%);
+
−
                transform: translate(-50%, -50%); WIDTH:500px; HEIGHT:320px"  src="https://static.igem.org/mediawiki/2017/6/6e/Textbox3.png">
+
−
<!-- <img src="https://static.igem.org/mediawiki/2017/7/7a/Textbox1.png" id="test" onclick ="change();"/> -->
+
  
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1367.61 2001.61">
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1367.61 2001.61">
−
  <script type="text/JavaScript">
 
  
−
    /*function change()
 
−
        {
 
−
            var img1 = document.getElementById('Box1'),
 
−
              img2 = document.getElementById('Box2');
 
−
            var imgElement = document.getElementById('Box1');
 
  
−
            imgElement.src = (imgElement.src === img1)? img2 : img1;
+
 
−
        }*/
+
 
 +
  <script type="text/JavaScript">
  
 
   function toggleBox(myID)
 
   function toggleBox(myID)
Line 80: Line 68:
 
           }
 
           }
 
         }
 
         }
−
  /*
 
−
          function toggleBox2()
 
−
    {
 
−
    var x = document.getElementById('Box2');
 
−
    if (x.style.display === 'none')
 
−
    {
 
−
        x.style.display = 'block';
 
−
    }
 
−
    else
 
−
    {
 
−
        x.style.display = 'none';
 
−
    }
 
−
          }
 
  
−
            function toggleBox3()
+
        function setCursorByID(id,pointer)
−
      {
+
        {
−
      var x = document.getElementById('Box3');
+
            var elem;
−
      if (x.style.display === 'none')
+
            if (document.getElementById &&
−
      {
+
              (elem=document.getElementById(id)) ) {
−
          x.style.display = 'block';
+
            if (elem.style) elem.style.cursor=cursorStyle;
−
      }
+
            }
−
      else
+
        }
−
      {
+
 
−
          x.style.display = 'none';
+
−
      }
+
−
              }
+
−
  */
+
−
            function setCursorByID(id,pointer)
+
−
            {
+
−
                var elem;
+
−
                if (document.getElementById &&
+
−
                    (elem=document.getElementById(id)) ) {
+
−
                  if (elem.style) elem.style.cursor=cursorStyle;
+
−
                }
+
−
                }
+
 
   </script>
 
   </script>
−
 
+
 
 
<defs>
 
<defs>
 
<style>
 
<style>
Line 182: Line 145:
 
.cls-70,.cls-71,.cls-72{stroke-width:5.27px;}
 
.cls-70,.cls-71,.cls-72{stroke-width:5.27px;}
 
.cls-73{stroke:#daede9;stroke-width:0.25px;}
 
.cls-73{stroke:#daede9;stroke-width:0.25px;}
−
.cls-74{stroke-width:3px;}</style>
+
.cls-74{stroke-width:3px;}
 +
    .top{
 +
          margin: 0 auto;
 +
          position: absolute;
 +
          top: 1900px;
 +
          left: 500px;
 +
          text-align:center;
 +
        }
 +
    .fill {
 +
      animation-name: fillAction;
 +
      animation-iteration-count: infinite;
 +
      animation-timing-function: cubic-bezier(.3, .6, .4, .8);
 +
      animation-duration: 6s;
 +
      animation-fill-mode: downwards;
 +
    }
 +
    #waveShape {
 +
      animation-name: waveAction;
 +
      animation-iteration-count: infinite;
 +
      animation-timing-function: linear;
 +
      animation-duration: 0.5s;
 +
      width: 300px;
 +
      height: 150px;
 +
      fill: #04ACFF;
 +
    }
 +
    @keyframes fillAction {
 +
      0% {
 +
        transform: translate(0, 150px);
 +
      }
 +
      100% {
 +
        transform: translate(0, -5px);
 +
      }
 +
    }
 +
    @keyframes waveAction {
 +
      0% {
 +
        transform: translate(-150px, 0);
 +
      }
 +
      100% {
 +
        transform: translate(0, 0);
 +
      }
 +
    }
 +
  </style>
 
</defs>
 
</defs>
 
<title>ModelAnimationDesign6</title>
 
<title>ModelAnimationDesign6</title>
Line 188: Line 191:
 
<rect class="cls-1" x="0.81" y="0.81" width="1366" height="2000"/>
 
<rect class="cls-1" x="0.81" y="0.81" width="1366" height="2000"/>
 
</g>
 
</g>
 +
 
<g id="Graphics">
 
<g id="Graphics">
 
<g id="Layer_9" data-name="Layer 9">
 
<g id="Layer_9" data-name="Layer 9">
Line 392: Line 396:
 
<path class="cls-12" d="M286.44,1785.94v24.87c-35.21,0-34.54-30.86-34.54-30.86A99.48,99.48,0,0,0,286.44,1785.94Z" transform="translate(0.31 1.31)"/><path class="cls-21" d="M286.46,1785.94a99.52,99.52,0,0,0,34.54-6s.67,30.85-34.54,30.86" transform="translate(0.31 1.31)"/>
 
<path class="cls-12" d="M286.44,1785.94v24.87c-35.21,0-34.54-30.86-34.54-30.86A99.48,99.48,0,0,0,286.44,1785.94Z" transform="translate(0.31 1.31)"/><path class="cls-21" d="M286.46,1785.94a99.52,99.52,0,0,0,34.54-6s.67,30.85-34.54,30.86" transform="translate(0.31 1.31)"/>
 
<path class="cls-21" d="M286.46,1785.94h0a99.48,99.48,0,0,1-34.54-6s-.67,30.85,34.54,30.86h0" transform="translate(0.31 1.31)"/>
 
<path class="cls-21" d="M286.46,1785.94h0a99.48,99.48,0,0,1-34.54-6s-.67,30.85,34.54,30.86h0" transform="translate(0.31 1.31)"/>
−
<circle class="cls-22" cx="304.99" cy="1828.6" r="5.75"/>
+
  <circle class="cls-22" cx="304.99" cy="1828.6" r="5.75"/>
 
<path class="cls-19" d="M301.1,1806.3l.53-.29a1.83,1.83,0,0,0,.65-2.48,1.86,1.86,0,0,0-2.48-.65l-.53.29a1.83,1.83,0,0,0-.65,2.48,1.86,1.86,0,0,0,2.48.65Z" transform="translate(0.31 1.31)"/>
 
<path class="cls-19" d="M301.1,1806.3l.53-.29a1.83,1.83,0,0,0,.65-2.48,1.86,1.86,0,0,0-2.48-.65l-.53.29a1.83,1.83,0,0,0-.65,2.48,1.86,1.86,0,0,0,2.48.65Z" transform="translate(0.31 1.31)"/>
 
<path class="cls-19" d="M313.52,1787.15a21.72,21.72,0,0,1-9.45,12.85c-2,1.26-.14,4.41,1.83,3.14,5.23-3.37,9.71-8.83,11.12-15,.52-2.28-3-3.25-3.5-1Z" transform="translate(0.31 1.31)"/>
 
<path class="cls-19" d="M313.52,1787.15a21.72,21.72,0,0,1-9.45,12.85c-2,1.26-.14,4.41,1.83,3.14,5.23-3.37,9.71-8.83,11.12-15,.52-2.28-3-3.25-3.5-1Z" transform="translate(0.31 1.31)"/>
Line 424: Line 428:
 
<line class="cls-26" x1="172.65" y1="1719.96" x2="175.28" y2="1722.15"/>
 
<line class="cls-26" x1="172.65" y1="1719.96" x2="175.28" y2="1722.15"/>
 
<line class="cls-26" x1="186.65" y1="1746.21" x2="189.28" y2="1748.39"/>
 
<line class="cls-26" x1="186.65" y1="1746.21" x2="189.28" y2="1748.39"/>
−
<line class="cls-26" x1="188.84" y1="1745.33" x2="191.46" y2="1747.52"/>
+
  <line class="cls-26" x1="188.84" y1="1745.33" x2="191.46" y2="1747.52"/>
 
<line class="cls-26" x1="190.15" y1="1744.89" x2="192.78" y2="1747.08"/>
 
<line class="cls-26" x1="190.15" y1="1744.89" x2="192.78" y2="1747.08"/>
 
<line class="cls-26" x1="191.03" y1="1742.71" x2="193.65" y2="1744.89"/>
 
<line class="cls-26" x1="191.03" y1="1742.71" x2="193.65" y2="1744.89"/>
Line 452: Line 456:
  
 
<g id="Text_Box_2" data-name="Text Box 2">
 
<g id="Text_Box_2" data-name="Text Box 2">
−
<path class="cls-19" d="M1175.28,1464.66v6.4a1.2,1.2,0,0,0,2.4,0v-6.4a1.2,1.2,0,0,0-2.4,0Z" transform="translate(0.31 1.31)"/>
+
        <!-- plastic -->
−
<path class="cls-19" d="M1175.28,1481.46v16a1.2,1.2,0,0,0,2.4,0v-16a1.2,1.2,0,0,0-2.4,0Z" transform="translate(0.31 1.31)"/>
+
 
−
<path class="cls-19" d="M1175.28,1505.06v17a1.2,1.2,0,0,0,2.4,0v-17a1.2,1.2,0,0,0-2.4,0Z" transform="translate(0.31 1.31)"/>
+
        <defs>
−
<path class="cls-19" d="M1128.88,1567.06s48-39.2,48-56v60l-48-4" transform="translate(0.31 1.31)"/>
+
          <clipPath id="drop">
−
<path class="cls-19" d="M1224.88,1567.06s-48-39.2-48-56v60l48-4" transform="translate(0.31 1.31)"/>
+
            <path class="cls-19" d="M1175.28,1464.66v6.4a1.2,1.2,0,0,0,2.4,0v-6.4a1.2,1.2,0,0,0-2.4,0Z" transform="translate(0.31 1.31)"/>
 +
    <path class="cls-19" d="M1175.28,1481.46v16a1.2,1.2,0,0,0,2.4,0v-16a1.2,1.2,0,0,0-2.4,0Z" transform="translate(0.31 1.31)"/>
 +
    <path class="cls-19" d="M1175.28,1505.06v17a1.2,1.2,0,0,0,2.4,0v-17a1.2,1.2,0,0,0-2.4,0Z" transform="translate(0.31 1.31)"/>
 +
    <path class="cls-19" d="M1128.88,1567.06s48-39.2,48-56v60l-48-4" transform="translate(0.31 1.31)"/>
 +
    <path class="cls-19" d="M1224.88,1567.06s-48-39.2-48-56v60l48-4" transform="translate(0.31 1.31)"/>
 +
          </clipPath>
 +
        </defs>
 +
        <g clip-path="url(#drop)">
 +
          <g class="fill">
 +
            <path class="cls-19" d="M1175.28,1464.66v6.4a1.2,1.2,0,0,0,2.4,0v-6.4a1.2,1.2,0,0,0-2.4,0Z" transform="translate(0.31 1.31)"/>
 +
    <path class="cls-19" d="M1175.28,1481.46v16a1.2,1.2,0,0,0,2.4,0v-16a1.2,1.2,0,0,0-2.4,0Z" transform="translate(0.31 1.31)"/>
 +
    <path class="cls-19" d="M1175.28,1505.06v17a1.2,1.2,0,0,0,2.4,0v-17a1.2,1.2,0,0,0-2.4,0Z" transform="translate(0.31 1.31)"/>
 +
    <path class="cls-19" d="M1128.88,1567.06s48-39.2,48-56v60l-48-4" transform="translate(0.31 1.31)"/>
 +
    <path class="cls-19" d="M1224.88,1567.06s-48-39.2-48-56v60l48-4" transform="translate(0.31 1.31)"/>s
 +
          </g>
 +
        </g>
 +
        <!-- end of plastic-->
 
<rect class="cls-29" x="1129.58" y="1575.31" width="96" height="34.65"/>
 
<rect class="cls-29" x="1129.58" y="1575.31" width="96" height="34.65"/>
 
<line class="cls-30" x1="1175.98" y1="1664.97" x2="1177.58" y2="1663.18"/>
 
<line class="cls-30" x1="1175.98" y1="1664.97" x2="1177.58" y2="1663.18"/>
Line 470: Line 490:
 
<line class="cls-37" x1="237.26" y1="1026.65" x2="434.81" y2="1025.81"/>
 
<line class="cls-37" x1="237.26" y1="1026.65" x2="434.81" y2="1025.81"/>
 
<line class="cls-37" x1="283.26" y1="1307.65" x2="480.81" y2="1306.81"/>
 
<line class="cls-37" x1="283.26" y1="1307.65" x2="480.81" y2="1306.81"/>
−
<path class="cls-38" d="M251.32,1025c-52.55,0-64,14.86-64,83.07l.18,137" transform="translate(0.31 1.31)"/>
+
<!--after separation path-->
 +
        <path class="cls-38" d="M251.32,1025c-52.55,0-64,14.86-64,83.07l.18,137" transform="translate(0.31 1.31)"/>
 +
        <!---->
 
<circle class="cls-39" cx="317.86" cy="1025.92" r="9.6"/>
 
<circle class="cls-39" cx="317.86" cy="1025.92" r="9.6"/>
 
<circle class="cls-39" cx="253.86" cy="1025.92" r="9.6"/>
 
<circle class="cls-39" cx="253.86" cy="1025.92" r="9.6"/>
Line 477: Line 499:
 
<circle class="cls-39" cx="381.86" cy="1025.92" r="9.6"/>
 
<circle class="cls-39" cx="381.86" cy="1025.92" r="9.6"/>
 
<line class="cls-37" x1="246.63" y1="1307.98" x2="265.83" y2="1307.98"/>
 
<line class="cls-37" x1="246.63" y1="1307.98" x2="265.83" y2="1307.98"/>
−
<path class="cls-37" d="M187.45,1242.67c0,52.55,11.45,64,64,64l105.52-.18" transform="translate(0.31 1.31)"/>
+
<path class="cls-37" d="M187.45,1242.67c0,52.55,11.45,64,64,64l105.52-.18" transform="translate(0.31 1.31)"/> <!--after separation path-->
 
<circle class="cls-39" cx="187.39" cy="1234.74" r="9.6"/>
 
<circle class="cls-39" cx="187.39" cy="1234.74" r="9.6"/>
 
<circle class="cls-39" cx="252.39" cy="1307.74" r="9.6"/>
 
<circle class="cls-39" cx="252.39" cy="1307.74" r="9.6"/>
Line 488: Line 510:
 
<line class="cls-37" x1="1174.93" y1="976.32" x2="1175.77" y2="778.77"/>
 
<line class="cls-37" x1="1174.93" y1="976.32" x2="1175.77" y2="778.77"/>
 
<line class="cls-37" x1="1116.42" y1="1025.96" x2="1097.22" y2="1025.96"/>
 
<line class="cls-37" x1="1116.42" y1="1025.96" x2="1097.22" y2="1025.96"/>
−
<path class="cls-37" d="M1175,960.65c0,52.55-11.45,64-64,64l-105.53-.18" transform="translate(0.31 1.31)"/>
+
<path id="motionPath" class="cls-37" d="M1175,960.65c0,52.55-11.45,64-64,64l-105.53-.18" transform="translate(0.31 1.31)"/>
−
<circle class="cls-41" cx="1174.86" cy="895.32" r="9.6"/>
+
<!-- Following is first four circles -->
−
<circle class="cls-41" cx="1091.86" cy="1026.32" r="9.6"/>
+
        <circle id="circle1" class="cls-41" cx="1174.86" cy="895.32" r="9.6"/>
−
<circle class="cls-41" cx="1155.86" cy="1018.32" r="9.6"/>
+
<circle id="circle2" class="cls-41" cx="1091.86" cy="1026.32" r="9.6"/>
−
<circle class="cls-41" cx="1175.86" cy="960.32" r="9.6"/>
+
<!--<circle id="circle3" class="cls-41" cx="1155.86" cy="1018.32" r="9.6"/>
 +
<circle id="circle4" class="cls-41" cx="1175.86" cy="960.32" r="9.6"/>-->
 +
        <!-- end of circles -->
 
<line class="cls-42" x1="1177.14" y1="877.8" x2="1177.14" y2="877.16"/>
 
<line class="cls-42" x1="1177.14" y1="877.8" x2="1177.14" y2="877.16"/>
 
<path class="cls-12" d="M1228.43,764.38c11.1,2.77,17.85,6.43,17.85,10.43a3.85,3.85,0,0,1-.46,1.8c-4,7.81-33.79,13.88-69.94,13.88-38.06,0-69.07-6.73-70.36-15.14a0,0,0,0,1,0,0c0-.28,0-.49,0-.62v0c.15-3.84,6.5-7.35,16.93-10.05,12.91-3.35,32.08-5.48,53.47-5.48C1196.77,759.14,1215.53,761.16,1228.43,764.38Z" transform="translate(0.31 1.31)"/>
 
<path class="cls-12" d="M1228.43,764.38c11.1,2.77,17.85,6.43,17.85,10.43a3.85,3.85,0,0,1-.46,1.8c-4,7.81-33.79,13.88-69.94,13.88-38.06,0-69.07-6.73-70.36-15.14a0,0,0,0,1,0,0c0-.28,0-.49,0-.62v0c.15-3.84,6.5-7.35,16.93-10.05,12.91-3.35,32.08-5.48,53.47-5.48C1196.77,759.14,1215.53,761.16,1228.43,764.38Z" transform="translate(0.31 1.31)"/>
Line 519: Line 543:
 
<g id="Bacteria" onclick='toggleBox(this.id)' onMouseOver="this.style.cursor='pointer'">
 
<g id="Bacteria" onclick='toggleBox(this.id)' onMouseOver="this.style.cursor='pointer'">
 
<rect class="cls-50" x="791.31" y="930.31" width="240.5" height="192" rx="6.66" ry="6.66"/>
 
<rect class="cls-50" x="791.31" y="930.31" width="240.5" height="192" rx="6.66" ry="6.66"/>
−
<path class="cls-51" d="M952.6,1018.9s-9-4-3.53-12.29-5.16-10.48-5.16-10.48" transform="translate(0.31 1.31)"/>
+
<!-- Bacteria to transform -->
−
<path class="cls-51" d="M968.56,1057.12s9.49-2.69,10.53,7.26,10.64,4.82,10.64,4.82" transform="translate(0.31 1.31)"/>
+
          <g>
−
<path class="cls-51" d="M921.57,1029.54s4,9,12.32,3.41,10.53,5.06,10.53,5.06" transform="translate(0.31 1.31)"/>
+
            <path class="cls-51" d="M952.6,1018.9s-9-4-3.53-12.29-5.16-10.48-5.16-10.48" transform="translate(0.31 1.31)"/>
−
<path class="cls-51" d="M912.11,1093.94s4.19-8.93,12.38-3.19,10.61-4.87,10.61-4.87" transform="translate(0.31 1.31)"/>
+
    <path class="cls-51" d="M968.56,1057.12s9.49-2.69,10.53,7.26,10.64,4.82,10.64,4.82" transform="translate(0.31 1.31)"/>
−
<path class="cls-51" d="M973.81,1032.17s4.19-8.93,12.38-3.19,10.61-4.87,10.61-4.87" transform="translate(0.31 1.31)"/>
+
    <path class="cls-51" d="M921.57,1029.54s4,9,12.32,3.41,10.53,5.06,10.53,5.06" transform="translate(0.31 1.31)"/>
−
<path class="cls-51" d="M960.15,1069.73s-1.65,9.72,8.34,9.69,5.93,10.06,5.93,10.06" transform="translate(0.31 1.31)"/>
+
    <path class="cls-51" d="M912.11,1093.94s4.19-8.93,12.38-3.19,10.61-4.87,10.61-4.87" transform="translate(0.31 1.31)"/>
−
<path class="cls-52" d="M963.12,1072.64l-2.38,6.77c-4.84,13.78-16.49,11.21-19.75,10.18-.53-.17-.85-.3-.85-.3-3.18-1.23-13.87-6.51-9-20.29l1.1-3.14,1.28-3.63,10.41-29.63,2.38-6.77c4.84-13.78,16.48-11.21,19.73-10.19,0,0,.33.1.85.3,3.18,1.23,13.88,6.52,9,20.29l-2.38,6.77Z" transform="translate(0.31 1.31)"/>
+
    <path class="cls-51" d="M973.81,1032.17s4.19-8.93,12.38-3.19,10.61-4.87,10.61-4.87" transform="translate(0.31 1.31)"/>
−
<path class="cls-53" d="M966,1015.64c-3.25-1-14.9-3.59-19.73,10.19l-2.38,6.77-10.41,29.63" transform="translate(0.31 1.31)"/>
+
    <path class="cls-51" d="M960.15,1069.73s-1.65,9.72,8.34,9.69,5.93,10.06,5.93,10.06" transform="translate(0.31 1.31)"/>
−
<path class="cls-53" d="M966,1015.64s.33.1.85.3c3.18,1.23,13.88,6.52,9,20.29l-2.38,6.77-10.41,29.63" transform="translate(0.31 1.31)"/>
+
    <path class="cls-52" d="M963.12,1072.64l-2.38,6.77c-4.84,13.78-16.49,11.21-19.75,10.18-.53-.17-.85-.3-.85-.3-3.18-1.23-13.87-6.51-9-20.29l1.1-3.14,1.28-3.63,10.41-29.63,2.38-6.77c4.84-13.78,16.48-11.21,19.73-10.19,0,0,.33.1.85.3,3.18,1.23,13.88,6.52,9,20.29l-2.38,6.77Z" transform="translate(0.31 1.31)"/>
−
<path class="cls-53" d="M940.14,1089.29c-3.18-1.23-13.87-6.51-9-20.29l1.1-3.14,1.28-3.63" transform="translate(0.31 1.31)"/> -->
+
    <path class="cls-53" d="M966,1015.64c-3.25-1-14.9-3.59-19.73,10.19l-2.38,6.77-10.41,29.63" transform="translate(0.31 1.31)"/>
−
<path class="cls-53" d="M940.14,1089.29s.32.13.85.3c3.25,1,14.91,3.59,19.75-10.18l2.38-6.77" transform="translate(0.31 1.31)"/>
+
    <path class="cls-53" d="M966,1015.64s.33.1.85.3c3.18,1.23,13.88,6.52,9,20.29l-2.38,6.77-10.41,29.63" transform="translate(0.31 1.31)"/>
−
<circle class="cls-54" cx="956.71" cy="1031.23" r="4.79" transform="translate(-332.94 1593.57) rotate(-70.65)"/>
+
    <path class="cls-53" d="M940.14,1089.29c-3.18-1.23-13.87-6.51-9-20.29l1.1-3.14,1.28-3.63" transform="translate(0.31 1.31)"/>
 +
    <path class="cls-53" d="M940.14,1089.29s.32.13.85.3c3.25,1,14.91,3.59,19.75-10.18l2.38-6.77" transform="translate(0.31 1.31)"/>
 +
            <!-- Gear 1 -->
 +
            <g>
 +
              <line class="cls-59" x1="953.76" y1="1078.76" x2="956.31" y2="1079.1"/>
 +
              <line class="cls-59" x1="939.64" y1="1076.88" x2="942.18" y2="1077.22"/>
 +
              <line class="cls-60" x1="946.86" y1="1086.32" x2="947.2" y2="1083.78"/>
 +
              <line class="cls-60" x1="948.74" y1="1072.2" x2="949.08" y2="1069.65"/>
 +
              <line class="cls-61" x1="952.94" y1="1084.64" x2="951.39" y2="1082.59"/>
 +
              <line class="cls-61" x1="944.52" y1="1073.62" x2="942.97" y2="1071.57"/>
 +
              <circle class="cls-58" cx="947.66" cy="1076.68" r="5.84" transform="translate(-244.72 1874.74) rotate(-82.39)"/>
 +
              <circle class="cls-62" cx="947.66" cy="1076.68" r="3.04" transform="translate(-244.72 1874.74) rotate(-82.39)"/>
 +
              <animateTransform attributeName="transform"
 +
                  type="rotate"
 +
                  from="0 947.66 1076.68"
 +
                  to="360 947.66 1076.68"
 +
                  repeatCount="indefinite"
 +
                  dur = "7s"
 +
                />
 +
            <!-- End of gear 1 group-->
 +
            </g>
 +
            <!-- gear 2 group -->
 +
            <g>
 +
              <line class="cls-59" x1="948.11" y1="1063.26" x2="949.92" y2="1062.66"/>
 +
              <line class="cls-59" x1="938.1" y1="1066.6" x2="939.91" y2="1065.99"/>
 +
              <line class="cls-60" x1="945.98" y1="1070.54" x2="945.38" y2="1068.73"/>
 +
              <line class="cls-60" x1="942.64" y1="1060.52" x2="942.04" y2="1058.72"/>
 +
              <line class="cls-61" x1="949.48" y1="1067.44" x2="947.78" y2="1066.58"/>
 +
              <line class="cls-61" x1="940.29" y1="1062.84" x2="938.59" y2="1061.98"/>
 +
              <circle class="cls-58" cx="943.7" cy="1063.32" r="4.33" transform="translate(-287.34 353.98) rotate(-18.42)"/>
 +
              <circle class="cls-62" cx="943.7" cy="1063.32" r="2.25" transform="translate(-287.34 353.98) rotate(-18.42)"/>
 +
              <animateTransform attributeName="transform"
 +
                  type="rotate"
 +
                  from="0 943.7 1063.32"
 +
                  to="-360 943.7 1063.32"
 +
                  repeatCount="indefinite"
 +
                  dur = "7s"
 +
                />
 +
            </g><!-- end of gear 2-->
 +
            <circle class="cls-54" cx="956.71" cy="1031.23" r="4.79" transform="translate(-332.94 1593.57) rotate(-70.65)"/>
 +
          <!-- end of bacteria  -->
 +
          <animateTransform attributeName="transform"
 +
  type="translate"
 +
  from="15 -10"
 +
  to="-35 -7"
 +
  repeatCount="indefinite"
 +
  dur = "3s"
 +
  />
 +
          </g>
 
</g>
 
</g>
  
 +
 +
        <circle class="cls-40" cx="733.86" cy="1026.92" r="9.6"/>
 
<text class="cls-55" transform="translate(824.51 973.99)">BIOREACTOR</text>
 
<text class="cls-55" transform="translate(824.51 973.99)">BIOREACTOR</text>
 
<circle class="cls-56" cx="852.86" cy="1042.92" r="5.76"/>
 
<circle class="cls-56" cx="852.86" cy="1042.92" r="5.76"/>
Line 544: Line 618:
 
         </g>
 
         </g>
 
<circle class="cls-57" cx="734.86" cy="1307.92" r="9.6"/>
 
<circle class="cls-57" cx="734.86" cy="1307.92" r="9.6"/>
−
 
−
 
 
<text class="cls-55" transform="translate(461.73 1252.99)">STIRRED-TANK</text>
 
<text class="cls-55" transform="translate(461.73 1252.99)">STIRRED-TANK</text>
−
        <circle class="cls-58" cx="943.7" cy="1063.32" r="4.33" transform="translate(-287.34 353.98) rotate(-18.42)"/>
 
−
<line class="cls-59" x1="948.11" y1="1063.26" x2="949.92" y2="1062.66"/>
 
−
<line class="cls-59" x1="938.1" y1="1066.6" x2="939.91" y2="1065.99"/>
 
−
<line class="cls-60" x1="945.98" y1="1070.54" x2="945.38" y2="1068.73"/>
 
−
<line class="cls-60" x1="942.64" y1="1060.52" x2="942.04" y2="1058.72"/>
 
−
<line class="cls-61" x1="949.48" y1="1067.44" x2="947.78" y2="1066.58"/>
 
−
<line class="cls-61" x1="940.29" y1="1062.84" x2="938.59" y2="1061.98"/>
 
−
<circle class="cls-62" cx="943.7" cy="1063.32" r="2.25" transform="translate(-287.34 353.98) rotate(-18.42)"/>
 
−
<circle class="cls-58" cx="947.66" cy="1076.68" r="5.84" transform="translate(-244.72 1874.74) rotate(-82.39)"/>
 
−
<line class="cls-59" x1="953.76" y1="1078.76" x2="956.31" y2="1079.1"/>
 
−
<line class="cls-59" x1="939.64" y1="1076.88" x2="942.18" y2="1077.22"/>
 
−
<line class="cls-60" x1="946.86" y1="1086.32" x2="947.2" y2="1083.78"/>
 
−
<line class="cls-60" x1="948.74" y1="1072.2" x2="949.08" y2="1069.65"/>
 
−
<line class="cls-61" x1="952.94" y1="1084.64" x2="951.39" y2="1082.59"/>
 
−
<line class="cls-61" x1="944.52" y1="1073.62" x2="942.97" y2="1071.57"/>
 
−
<circle class="cls-62" cx="947.66" cy="1076.68" r="3.04" transform="translate(-244.72 1874.74) rotate(-82.39)"/>
 
−
<circle class="cls-40" cx="733.86" cy="1026.92" r="9.6"/>
 
  
 
         <g id="Separation" onclick='toggleBox(this.id)' onMouseOver="this.style.cursor='pointer'">
 
         <g id="Separation" onclick='toggleBox(this.id)' onMouseOver="this.style.cursor='pointer'">
 
         <rect class="cls-50" x="437.31" y="930.31" width="240.5" height="192" rx="6.66" ry="6.66"/>
 
         <rect class="cls-50" x="437.31" y="930.31" width="240.5" height="192" rx="6.66" ry="6.66"/>
−
         <path class="cls-66" d="M606.28,1079.64l37.25-64.52a2.49,2.49,0,0,0-2.16-3.74h-74.5a2.49,2.49,0,0,0-2.16,3.74L602,1079.64A2.49,2.49,0,0,0,606.28,1079.64Z" transform="translate(0.31 1.31)"/>
+
         <!-- Separation tank rotation -->
−
        <path class="cls-67" d="M616.27,1032.19c-6.61-9.24-16.94-9.24-23.55,0-.94,1.32,1.24,2.58,2.18,1.27,5.47-7.65,13.73-7.65,19.2,0,.94,1.31,3.12.05,2.18-1.27Z" transform="translate(0.31 1.31)"/>
+
        <g>
−
        <path class="cls-67" d="M593.07,1035.65l4.63-1c1.59-.33.92-2.76-.67-2.43l-4.63,1c-1.59.33-.92,2.76.67,2.43Z" transform="translate(0.31 1.31)"/>
+
          <path class="cls-66" d="M606.28,1079.64l37.25-64.52a2.49,2.49,0,0,0-2.16-3.74h-74.5a2.49,2.49,0,0,0-2.16,3.74L602,1079.64A2.49,2.49,0,0,0,606.28,1079.64Z" transform="translate(0.31 1.31)"/>
−
        <path class="cls-67" d="M594,1034.43l.64-6.95c.15-1.61-2.37-1.6-2.52,0l-.64,6.95c-.15,1.61,2.37,1.6,2.52,0Z" transform="translate(0.31 1.31)"/>
+
          <path class="cls-67" d="M616.27,1032.19c-6.61-9.24-16.94-9.24-23.55,0-.94,1.32,1.24,2.58,2.18,1.27,5.47-7.65,13.73-7.65,19.2,0,.94,1.31,3.12.05,2.18-1.27Z" transform="translate(0.31 1.31)"/>
−
        <path class="cls-67" d="M592.16,1049.43c6.61,9.24,16.94,9.24,23.55,0,.94-1.32-1.24-2.58-2.18-1.27-5.47,7.65-13.73,7.65-19.2,0-.94-1.31-3.12-.05-2.18,1.27Z" transform="translate(0.31 1.31)"/>
+
          <path class="cls-67" d="M593.07,1035.65l4.63-1c1.59-.33.92-2.76-.67-2.43l-4.63,1c-1.59.33-.92,2.76.67,2.43Z" transform="translate(0.31 1.31)"/>
−
        <path class="cls-67" d="M615.36,1046l-4.63,1c-1.59.33-.92,2.76.67,2.43l4.63-1c1.59-.33.92-2.76-.67-2.43Z" transform="translate(0.31 1.31)"/>
+
          <path class="cls-67" d="M594,1034.43l.64-6.95c.15-1.61-2.37-1.6-2.52,0l-.64,6.95c-.15,1.61,2.37,1.6,2.52,0Z" transform="translate(0.31 1.31)"/>
−
        <path class="cls-67" d="M614.44,1047.19l-.64,6.95c-.15,1.61,2.37,1.6,2.52,0l.64-6.95c.15-1.61-2.37-1.6-2.52,0Z" transform="translate(0.31 1.31)"/>
+
          <path class="cls-67" d="M592.16,1049.43c6.61,9.24,16.94,9.24,23.55,0,.94-1.32-1.24-2.58-2.18-1.27-5.47,7.65-13.73,7.65-19.2,0-.94-1.31-3.12-.05-2.18,1.27Z" transform="translate(0.31 1.31)"/>
 +
          <path class="cls-67" d="M615.36,1046l-4.63,1c-1.59.33-.92,2.76.67,2.43l4.63-1c1.59-.33.92-2.76-.67-2.43Z" transform="translate(0.31 1.31)"/>
 +
          <path class="cls-67" d="M614.44,1047.19l-.64,6.95c-.15,1.61,2.37,1.6,2.52,0l.64-6.95c.15-1.61-2.37-1.6-2.52,0Z" transform="translate(0.31 1.31)"/>
 +
          <animateTransform attributeName="transform"
 +
              type="rotate"
 +
              from="0 606.28 1040.64"
 +
              to="-360 606.28 1040.64"
 +
              repeatCount="indefinite"
 +
              dur = "7s"
 +
            />
 +
        </g>
 +
 
 
         <path class="cls-23" d="M511.78,1008.69l-19.6,73.14a1.26,1.26,0,0,0,2.43.67l19.6-73.14a1.26,1.26,0,0,0-2.43-.67Z" transform="translate(0.31 1.31)"/>
 
         <path class="cls-23" d="M511.78,1008.69l-19.6,73.14a1.26,1.26,0,0,0,2.43.67l19.6-73.14a1.26,1.26,0,0,0-2.43-.67Z" transform="translate(0.31 1.31)"/>
 
         <path class="cls-23" d="M534.22,1008.69l-19.6,73.14a1.26,1.26,0,0,0,2.43.67l19.6-73.14a1.26,1.26,0,0,0-2.43-.67Z" transform="translate(0.31 1.31)"/>
 
         <path class="cls-23" d="M534.22,1008.69l-19.6,73.14a1.26,1.26,0,0,0,2.43.67l19.6-73.14a1.26,1.26,0,0,0-2.43-.67Z" transform="translate(0.31 1.31)"/>
 
         <path class="cls-23" d="M489.22,1008.69l-19.6,73.14a1.26,1.26,0,0,0,2.43.67l19.6-73.14a1.26,1.26,0,0,0-2.43-.67Z" transform="translate(0.31 1.31)"/>
 
         <path class="cls-23" d="M489.22,1008.69l-19.6,73.14a1.26,1.26,0,0,0,2.43.67l19.6-73.14a1.26,1.26,0,0,0-2.43-.67Z" transform="translate(0.31 1.31)"/>
−
        </g>
+
      </g>
 
<path class="cls-63" d="M555.6,1294.9s-9-4-3.53-12.29-5.16-10.48-5.16-10.48" transform="translate(0.31 1.31)"/>
 
<path class="cls-63" d="M555.6,1294.9s-9-4-3.53-12.29-5.16-10.48-5.16-10.48" transform="translate(0.31 1.31)"/>
 
<path class="cls-63" d="M571.56,1333.12s9.49-2.69,10.53,7.26,10.64,4.82,10.64,4.82" transform="translate(0.31 1.31)"/>
 
<path class="cls-63" d="M571.56,1333.12s9.49-2.69,10.53,7.26,10.64,4.82,10.64,4.82" transform="translate(0.31 1.31)"/>
Line 633: Line 699:
 
</g>
 
</g>
 
</g>
 
</g>
−
</svg>
 
  
 +
  <img id="Box1" class = "top" x="0" y="100" width="37%" height="38%" style=preserveAspectRatio="xMinYMin slice"  src="https://static.igem.org/mediawiki/2017/7/7a/Textbox1.png">
 +
  <img id="Box2" class = "top" x="0" y="100" width="37%" height="38%" style=preserveAspectRatio="xMinYMin slice"  src="https://static.igem.org/mediawiki/2017/a/a9/Textbox2.png">
 +
  <img id="Box3" class = "top" x="0" y="100" width="37%" height="38%" style=preserveAspectRatio="xMinYMin slice"  src="https://static.igem.org/mediawiki/2017/6/6e/Textbox3.png">
 +
 +
 +
</svg>
  
  

Revision as of 08:03, 29 October 2017

Header

ModelAnimationDesign6 s ON BIOREACTOR STIRRED-TANK EXTRACTION SEPARATION Win Start

References

Rose, C., Parker, A., Jefferson, B., & Cartmell, E. (2015). The Characterization of Feces and Urine: A Review of the Literature to Inform Advanced Treatment Technology. Critical Reviews In Environmental Science And Technology, 45(17), 1827-1879. http://dx.doi.org/10.1080/10643389.2014.1000761