Skip to content

Instantly share code, notes, and snippets.

@nathakits
Last active November 23, 2016 09:11
Show Gist options
  • Save nathakits/d5dbbad055c3fda2694d43a3471349ef to your computer and use it in GitHub Desktop.
Save nathakits/d5dbbad055c3fda2694d43a3471349ef to your computer and use it in GitHub Desktop.
SVG Animation - animating with css

SVG Animation - animating with css

Moludar

.container {
width: 18%;
margin: 5em auto;
}
.inside-cube {
animation: inner .5s linear;
-webkit-animation: inner .5s linear;
-webkit-animation-fill-mode: forwards;
}
.cube_color {
animation: outer 3s 1s infinite cubic-bezier(.5, -1, 0.265, 1);
-webkit-animation: outer 3s 1s infinite cubic-bezier(.5, -1, 0.265, 1);
-webkit-animation-fill-mode: forwards;
}
.cube_outline {
animation: outer 3s 1s infinite cubic-bezier(.5, -1, 0.265, 1);
-webkit-animation: outer 3s 1s infinite cubic-bezier(.5, -1, 0.265, 1);
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes inner {
0% {-webkit-transform:scale(.2); -webkit-transform:rotate(0deg); opacity: 0; transform: ;
}
100% {-webkit-transform:scale(1); -webkit-transform:rotate(0deg); opacity: 100%; transform: }
}
@-webkit-keyframes outer {
0% {-webkit-transform:scale(.2); -webkit-transform:rotate(0deg); opacity: 0; transform: translate(0px, 0px);
}
100% {-webkit-transform:scale(1); -webkit-transform:rotate(0deg); opacity: 100%; transform: translate(-70px, -70px);}
}
<div class="container">
<svg id="_1.modular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 227.6 267.3">
<circle cx="109.8" cy="110.2" r="109.8" transform="translate(-45.7 109.9) rotate(-45)" fill="#e5e5e5"/>\
<g id="mod-cube">
<line x1="133.3" y1="196.5" x2="133.3" y2="217.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="26.4" x2="180.3" y2="49.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="49.9" x2="180.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="49.9" x2="192.4" y2="37.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="59.6" x2="133.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="83.1" x2="109.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="106.6" x2="133.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="133.3" y1="83.1" x2="133.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="26.4" x2="133.3" y2="2.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="26.4" x2="156.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="133.3" y1="49.9" x2="156.8" y2="26.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="26.4" x2="133.3" y2="2.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="133.3" y1="2.9" x2="156.8" y2="26.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="26.4" x2="156.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="139.8" x2="180.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="83.1" x2="180.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="133.3" y1="196.5" x2="149.4" y2="212.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="173" x2="179.1" y2="195.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="163.3" x2="180.3" y2="194.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="163.3" x2="180.3" y2="194.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="163.3" x2="180.3" y2="194.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="139.8" x2="203.8" y2="167" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="52.8" y1="16.3" x2="62.8" y2="26.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="27.3" y1="37.8" x2="39.3" y2="49.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="1.5" y1="92.2" x2="15.8" y2="106.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="139.8" x2="15.8" y2="167" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="40.5" y1="195.3" x2="62.8" y2="173" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="163.3" x2="39.3" y2="194.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="163.3" x2="39.3" y2="194.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="163.3" x2="39.3" y2="194.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="196.5" x2="86.3" y2="217.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="106.6" x2="109.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="83.1" x2="109.8" y2="106.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="2.9" x2="109.8" y2="26.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="26.4" x2="133.3" y2="49.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="133.3" y1="49.9" x2="133.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="133.3" y1="83.1" x2="156.8" y2="106.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="106.6" x2="156.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="83.1" x2="180.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="83.1" x2="203.8" y2="106.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="83.1" x2="180.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="106.6" x2="203.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="83.1" x2="39.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="83.1" x2="62.8" y2="106.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="83.1" x2="39.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="106.6" x2="62.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="106.6" x2="15.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="26.4" x2="62.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="26.4" x2="86.3" y2="49.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="26.4" x2="62.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="49.9" x2="86.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="49.9" x2="39.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="26.4" x2="156.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="26.4" x2="156.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="139.8" x2="62.8" y2="173" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="116.3" x2="109.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="116.3" x2="203.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="116.3" x2="203.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="116.3" x2="62.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="116.3" x2="62.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="59.6" x2="39.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="59.6" x2="39.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="59.6" x2="180.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="59.6" x2="180.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="196.5" x2="109.8" y2="220" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="1" y1="124.9" x2="15.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="9.2" y1="66.3" x2="15.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="9.2" y1="66.3" x2="15.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="9.2" y1="66.3" x2="15.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="53.4" x2="15.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="53.4" x2="15.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="7" y1="148.7" x2="15.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="7" y1="148.7" x2="15.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="70.2" y1="212.6" x2="86.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="70.2" y1="212.6" x2="86.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="70.2" y1="212.6" x2="86.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="139.8" x2="212.7" y2="148.7" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="139.8" x2="218.6" y2="124.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="59.6" x2="210.5" y2="66.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="139.8" x2="218.6" y2="124.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="106.6" x2="218.1" y2="92.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="139.8" x2="218.6" y2="124.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="26.4" x2="166.8" y2="16.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="26.4" x2="166.8" y2="16.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="26.4" x2="166.8" y2="16.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="53.4" x2="203.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="53.4" x2="203.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="52.8" y1="16.3" x2="62.8" y2="26.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="26.4" x2="156.8" y2="10.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="26.4" x2="109.8" y2="0.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="26.4" x2="62.8" y2="10.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="133.3" y1="83.1" x2="156.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="196.5" x2="109.8" y2="173" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="173" x2="86.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="220" x2="133.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="163.3" x2="203.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="139.8" x2="180.3" y2="163.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="163.3" x2="86.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="220" x2="133.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="163.3" x2="109.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="220" x2="133.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="163.3" x2="86.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="163.3" x2="62.8" y2="139.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="139.8" x2="86.3" y2="163.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="163.3" x2="86.3" y2="196.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="139.8" x2="39.3" y2="163.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="26.4" x2="86.3" y2="2.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="26.4" x2="86.3" y2="2.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="83.1" x2="203.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="83.1" x2="203.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="49.9" x2="62.8" y2="26.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="83.1" x2="109.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="26.4" x2="86.3" y2="2.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="49.9" x2="109.8" y2="26.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="109.8" y1="26.4" x2="109.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="59.6" x2="39.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="139.8" x2="39.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="106.6" x2="39.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="15.8" y1="139.8" x2="39.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="59.6" x2="86.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="139.8" x2="86.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="39.3" y1="83.1" x2="62.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="62.8" y1="106.6" x2="86.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="86.3" y1="83.1" x2="86.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="83.1" x2="203.8" y2="59.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="59.6" x2="180.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="139.8" x2="180.3" y2="116.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="156.8" y1="106.6" x2="180.3" y2="83.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
</g>
<polygon class="inside-cube" points="133.3 116.3 156.8 139.8 156.8 173 133.3 196.5 109.8 173 109.8 139.8 133.3 116.3" fill="none" stroke="#97d2ad" stroke-miterlimit="10" stroke-width="2" id="inside-cube"/>
<polygon class="cube_color" points="180.3 210.3 203.8 186.8 227.3 210.3 227.3 243.5 203.8 267 180.3 243.5 180.3 210.3" fill="#97d2ad"/>
<g class="cube_outline" id="cube_outline" data-name="cube outline">
<line x1="203.8" y1="233.8" x2="203.8" y2="267" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<polygon points="180.3 210.3 203.8 186.8 227.3 210.3 227.3 243.5 203.8 267 180.3 243.5 180.3 210.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="203.8" y1="233.8" x2="227.3" y2="210.3" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
<line x1="180.3" y1="210.3" x2="203.8" y2="233.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
</g>
</svg>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment