Skip to content

Instantly share code, notes, and snippets.

@Ern-st

Ern-st/automate01.html

Last active November 24, 2016 18:15
Show Gist options
  • Save Ern-st/67c7ddce7690d36997daf295b70ca778 to your computer and use it in GitHub Desktop.
Save Ern-st/67c7ddce7690d36997daf295b70ca778 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
automate01.html
<html>
<head>
<style type="text/css">
body{
display: flex;
flex-direction: column;
background-image: url(https://www.prosa.dk/fileadmin/images/logo.gif);
background-repeat: no-repeat;
background-position: 10px 10px;
overflow: hidden;
}
svg{
flex: 1;
margin: auto auto;
display: block;
animation: spin 8s linear infinite;
transform-origin: 62.5% 50%;
}
@keyframes spin{
0%{
-webkit-transform: rotate3d(0,0,1,0deg);
transform: rotate3d(0,0,1,0deg)
}
10%{
-webkit-transform: rotate3d(0,0,1,360deg);
transform: rotate3d(0,0,1,360deg)
}
100%{
-webkit-transform: rotate3d(0,0,1,720deg);
transform: rotate3d(0,0,1,720deg)
}
}
/*.svg-bg, .svg-automate, .svg-it{
animation: svg 8s linear infinite;
}*/
@keyframes svg{
0%{
opacity: 1;
}
2%{
opacity: 0;
}
20%{
opacity: 1;
}
}
</style>
</head>
<body>
<!-- <img src="automate01.svg"> -->
<svg width="414px" height="468px" viewBox="0 0 414 468" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" transform="skewX(-19)" x="0" y="0" width="260.737505" height="48.1789069">
<!-- <animate id="ani" attributeName="width" values="261; 261; 215; 261; 261" dur="4s" begin="6s;ani.end+4s" restart="whenNotActive"/>
--> <animate id="ani" attributeName="x" values="0; 218; 218; 0" dur="4s" begin="6s;ani.end+4s" restart="whenNotActive"/>
</rect>
<rect id="path-3" x="0.931822828" y="0.238284632" width="260.737505" height="48.1789069"></rect>
<rect id="path-5" x="0.931822828" y="0.238284632" width="260.737505" height="48.1789069"></rect>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(-3.035927, -3.000000)">
<g id="01" transform="translate(0.403697, 211.838947)">
<g id="BG">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Rectangle-Copy"></g>
<path class="svg-bg" d="M18.0746522,0.238284632 L241,0.238284632 L241,48.4171915 L2.87921686,48.4171915 L18.0746522,0.238284632 Z" id="Combined-Shape" fill="#C50B15" mask="url(#mask-2)"></path>
<path d="M260.966358,0.238284632 L217.468026,0.238284632 L200.858898,48.4171915 L244.35723,48.4171915 L260.966358,0.238284632 Z" id="Combined-Shape" fill="#000000" mask="url(#mask-2)"></path>
</g>
<g id="seperated" transform="translate(15.417742, 8.120986)" >
<path class="svg-automate" d="M18.3639322,21.9501782 L7.24803551,21.9501782 L4.35554802,28.2514792 L0.134534302,28.2514792 L12.9825601,0.676986226 L25.3765327,28.2514792 L21.0882518,28.2514792 L18.3639322,21.9501782 Z M16.7663374,18.2702185 L12.915293,9.44839715 L8.87926392,18.2702185 L16.7663374,18.2702185 Z M31.5482938,2.30692274 L31.5482938,17.9341491 C31.5482938,20.1634205 31.9126539,21.7933407 32.641385,22.8239586 C33.728876,24.3138737 35.2591884,25.05882 37.232368,25.05882 C39.2167589,25.05882 40.7526768,24.3138737 41.8401679,22.8239586 C42.568899,21.8269478 42.9332591,20.1970276 42.9332591,17.9341491 L42.9332591,2.30692274 L46.8515706,2.30692274 L46.8515706,19.0095711 C46.8515706,21.7429491 45.9995285,23.9945915 44.2954189,25.7645657 C42.3782955,27.7361827 40.0239687,28.7219763 37.232368,28.7219763 C34.4407673,28.7219763 32.0920461,27.7361827 30.186134,25.7645657 C28.4820243,23.9945915 27.6299822,21.7429491 27.6299822,19.0095711 L27.6299822,2.30692274 L31.5482938,2.30692274 Z M60.2377336,5.98688249 L60.2377336,28.2514792 L56.3194221,28.2514792 L56.3194221,5.98688249 L50.3494624,5.98688249 L50.3494624,2.30692274 L66.1908765,2.30692274 L66.1908765,5.98688249 L60.2377336,5.98688249 Z M67.5698531,15.1615767 C67.5698531,11.5096044 68.9095771,8.37298823 71.5890653,5.75163393 C74.2573423,3.13027962 77.4637111,1.81962213 81.2082679,1.81962213 C84.9079797,1.81962213 88.0807153,3.14148182 90.7265698,5.78524086 C93.3836355,8.4289999 94.7121485,11.6048238 94.7121485,15.3128079 C94.7121485,19.0431967 93.37803,22.2078184 90.709753,24.806768 C88.0302647,27.4169199 84.7958682,28.7219763 81.0064665,28.7219763 C77.6543033,28.7219763 74.6441284,27.5625485 71.9758515,25.2436582 C69.0385045,22.6783157 67.5698531,19.3176555 67.5698531,15.1615767 Z M71.5217982,15.2119871 C71.5217982,18.0797935 72.485951,20.4378568 74.4142857,22.2862476 C76.3314091,24.1346385 78.5455973,25.05882 81.0569168,25.05882 C83.7812501,25.05882 86.0795214,24.1178352 87.9517998,22.2358372 C89.8240782,20.3314345 90.7602033,18.012579 90.7602033,15.279201 C90.7602033,12.5122159 89.8352893,10.1933603 87.9854334,8.32256471 C86.1467887,6.44056675 83.8709395,5.49958189 81.1578176,5.49958189 C78.4559068,5.49958189 76.1744521,6.44056675 74.3133849,8.32256471 C72.4523178,10.1821579 71.5217982,12.4786091 71.5217982,15.2119871 Z M98.7313607,28.2514792 L104.196817,0.357720312 L113.109714,20.5218834 L122.342131,0.357720312 L127.252633,28.2514792 L123.23342,28.2514792 L120.727719,12.5906459 L113.042447,29.4445255 L105.575793,12.5738424 L102.784207,28.2514792 L98.7313607,28.2514792 Z M148.004549,21.9501782 L136.888652,21.9501782 L133.996165,28.2514792 L129.775151,28.2514792 L142.623177,0.676986226 L155.017149,28.2514792 L150.728868,28.2514792 L148.004549,21.9501782 Z M146.406954,18.2702185 L142.55591,9.44839715 L138.51988,18.2702185 L146.406954,18.2702185 Z M163.980497,5.98688249 L163.980497,28.2514792 L160.062186,28.2514792 L160.062186,5.98688249 L154.092226,5.98688249 L154.092226,2.30692274 L169.93364,2.30692274 L169.93364,5.98688249 L163.980497,5.98688249 Z M187.759435,5.98688249 L177.349843,5.98688249 L177.349843,12.2209696 L187.456733,12.2209696 L187.456733,15.9009293 L177.349843,15.9009293 L177.349843,24.5715194 L187.759435,24.5715194 L187.759435,28.2514792 L173.431532,28.2514792 L173.431532,2.30692274 L187.759435,2.30692274 L187.759435,5.98688249 Z" id="AUTOMATE" fill="#000000"></path>
<path class="svg-it" d="M188.855167,30.4191267 L208.898137,30.4191267 L208.898137,33.9478552 L187.632056,33.9478552 L188.855167,30.4191267 Z M215.927554,2.30692274 L215.927554,28.2514792 L212.009243,28.2514792 L212.009243,2.30692274 L215.927554,2.30692274 Z M229.330534,5.98688249 L229.330534,28.2514792 L225.412223,28.2514792 L225.412223,5.98688249 L219.442263,5.98688249 L219.442263,2.30692274 L235.283677,2.30692274 L235.283677,5.98688249 L229.330534,5.98688249 Z" id="_IT" fill="#FFFFFF"></path>
</g>
</g>
<g id="01" transform="translate(338.816652, 126.871769) rotate(120.000000) translate(-338.816652, -126.871769) translate(207.316652, 101.871769)">
<g id="BG" transform="translate(0.034348, 0.934734)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Rectangle-Copy"></g>
<path class="svg-bg" d="M18.0746522,0.238284632 L241,0.238284632 L241,48.4171915 L2.87921686,48.4171915 L18.0746522,0.238284632 Z" id="Combined-Shape" fill="#FF5800" mask="url(#mask-4)"></path>
<path d="M260.966358,0.238284632 L217.468026,0.238284632 L200.858898,48.4171915 L244.35723,48.4171915 L260.966358,0.238284632 Z" id="Combined-Shape" fill="#000000" mask="url(#mask-4)"></path>
</g>
<g id="seperated" transform="translate(16.417742, 9.120986)">
<path class="svg-automate" d="M18.3639322,21.9501782 L7.24803551,21.9501782 L4.35554802,28.2514792 L0.134534302,28.2514792 L12.9825601,0.676986226 L25.3765327,28.2514792 L21.0882518,28.2514792 L18.3639322,21.9501782 Z M16.7663374,18.2702185 L12.915293,9.44839715 L8.87926392,18.2702185 L16.7663374,18.2702185 Z M31.5482938,2.30692274 L31.5482938,17.9341491 C31.5482938,20.1634205 31.9126539,21.7933407 32.641385,22.8239586 C33.728876,24.3138737 35.2591884,25.05882 37.232368,25.05882 C39.2167589,25.05882 40.7526768,24.3138737 41.8401679,22.8239586 C42.568899,21.8269478 42.9332591,20.1970276 42.9332591,17.9341491 L42.9332591,2.30692274 L46.8515706,2.30692274 L46.8515706,19.0095711 C46.8515706,21.7429491 45.9995285,23.9945915 44.2954189,25.7645657 C42.3782955,27.7361827 40.0239687,28.7219763 37.232368,28.7219763 C34.4407673,28.7219763 32.0920461,27.7361827 30.186134,25.7645657 C28.4820243,23.9945915 27.6299822,21.7429491 27.6299822,19.0095711 L27.6299822,2.30692274 L31.5482938,2.30692274 Z M60.2377336,5.98688249 L60.2377336,28.2514792 L56.3194221,28.2514792 L56.3194221,5.98688249 L50.3494624,5.98688249 L50.3494624,2.30692274 L66.1908765,2.30692274 L66.1908765,5.98688249 L60.2377336,5.98688249 Z M67.5698531,15.1615767 C67.5698531,11.5096044 68.9095771,8.37298823 71.5890653,5.75163393 C74.2573423,3.13027962 77.4637111,1.81962213 81.2082679,1.81962213 C84.9079797,1.81962213 88.0807153,3.14148182 90.7265698,5.78524086 C93.3836355,8.4289999 94.7121485,11.6048238 94.7121485,15.3128079 C94.7121485,19.0431967 93.37803,22.2078184 90.709753,24.806768 C88.0302647,27.4169199 84.7958682,28.7219763 81.0064665,28.7219763 C77.6543033,28.7219763 74.6441284,27.5625485 71.9758515,25.2436582 C69.0385045,22.6783157 67.5698531,19.3176555 67.5698531,15.1615767 Z M71.5217982,15.2119871 C71.5217982,18.0797935 72.485951,20.4378568 74.4142857,22.2862476 C76.3314091,24.1346385 78.5455973,25.05882 81.0569168,25.05882 C83.7812501,25.05882 86.0795214,24.1178352 87.9517998,22.2358372 C89.8240782,20.3314345 90.7602033,18.012579 90.7602033,15.279201 C90.7602033,12.5122159 89.8352893,10.1933603 87.9854334,8.32256471 C86.1467887,6.44056675 83.8709395,5.49958189 81.1578176,5.49958189 C78.4559068,5.49958189 76.1744521,6.44056675 74.3133849,8.32256471 C72.4523178,10.1821579 71.5217982,12.4786091 71.5217982,15.2119871 Z M98.7313607,28.2514792 L104.196817,0.357720312 L113.109714,20.5218834 L122.342131,0.357720312 L127.252633,28.2514792 L123.23342,28.2514792 L120.727719,12.5906459 L113.042447,29.4445255 L105.575793,12.5738424 L102.784207,28.2514792 L98.7313607,28.2514792 Z M148.004549,21.9501782 L136.888652,21.9501782 L133.996165,28.2514792 L129.775151,28.2514792 L142.623177,0.676986226 L155.017149,28.2514792 L150.728868,28.2514792 L148.004549,21.9501782 Z M146.406954,18.2702185 L142.55591,9.44839715 L138.51988,18.2702185 L146.406954,18.2702185 Z M163.980497,5.98688249 L163.980497,28.2514792 L160.062186,28.2514792 L160.062186,5.98688249 L154.092226,5.98688249 L154.092226,2.30692274 L169.93364,2.30692274 L169.93364,5.98688249 L163.980497,5.98688249 Z M187.759435,5.98688249 L177.349843,5.98688249 L177.349843,12.2209696 L187.456733,12.2209696 L187.456733,15.9009293 L177.349843,15.9009293 L177.349843,24.5715194 L187.759435,24.5715194 L187.759435,28.2514792 L173.431532,28.2514792 L173.431532,2.30692274 L187.759435,2.30692274 L187.759435,5.98688249 Z" id="AUTOMATE" fill="#000000"></path>
<path class="svg-it" d="M188.855167,30.4191267 L208.898137,30.4191267 L208.898137,33.9478552 L187.632056,33.9478552 L188.855167,30.4191267 Z M215.927554,2.30692274 L215.927554,28.2514792 L212.009243,28.2514792 L212.009243,2.30692274 L215.927554,2.30692274 Z M229.330534,5.98688249 L229.330534,28.2514792 L225.412223,28.2514792 L225.412223,5.98688249 L219.442263,5.98688249 L219.442263,2.30692274 L235.283677,2.30692274 L235.283677,5.98688249 L229.330534,5.98688249 Z" id="_IT" fill="#FFFFFF"></path>
</g>
</g>
<g id="01" transform="translate(330.832837, 360.514440) rotate(240.000000) translate(-330.832837, -360.514440) translate(199.832837, 336.014440)">
<g id="BG">
<mask id="mask-6" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Rectangle-Copy"></g>
<path class="svg-bg" d="M18.0746522,0.238284632 L241,0.238284632 L241,48.4171915 L2.87921686,48.4171915 L18.0746522,0.238284632 Z" id="Combined-Shape" fill="#00CCA2" mask="url(#mask-6)"></path>
<path d="M260.966358,0.238284632 L217.468026,0.238284632 L200.858898,48.4171915 L244.35723,48.4171915 L260.966358,0.238284632 Z" id="Combined-Shape" fill="#000000" mask="url(#mask-6)"></path>
</g>
<g id="seperated" transform="translate(15.417742, 8.120986)">
<path class="svg-automate" d="M18.3639322,21.9501782 L7.24803551,21.9501782 L4.35554802,28.2514792 L0.134534302,28.2514792 L12.9825601,0.676986226 L25.3765327,28.2514792 L21.0882518,28.2514792 L18.3639322,21.9501782 Z M16.7663374,18.2702185 L12.915293,9.44839715 L8.87926392,18.2702185 L16.7663374,18.2702185 Z M31.5482938,2.30692274 L31.5482938,17.9341491 C31.5482938,20.1634205 31.9126539,21.7933407 32.641385,22.8239586 C33.728876,24.3138737 35.2591884,25.05882 37.232368,25.05882 C39.2167589,25.05882 40.7526768,24.3138737 41.8401679,22.8239586 C42.568899,21.8269478 42.9332591,20.1970276 42.9332591,17.9341491 L42.9332591,2.30692274 L46.8515706,2.30692274 L46.8515706,19.0095711 C46.8515706,21.7429491 45.9995285,23.9945915 44.2954189,25.7645657 C42.3782955,27.7361827 40.0239687,28.7219763 37.232368,28.7219763 C34.4407673,28.7219763 32.0920461,27.7361827 30.186134,25.7645657 C28.4820243,23.9945915 27.6299822,21.7429491 27.6299822,19.0095711 L27.6299822,2.30692274 L31.5482938,2.30692274 Z M60.2377336,5.98688249 L60.2377336,28.2514792 L56.3194221,28.2514792 L56.3194221,5.98688249 L50.3494624,5.98688249 L50.3494624,2.30692274 L66.1908765,2.30692274 L66.1908765,5.98688249 L60.2377336,5.98688249 Z M67.5698531,15.1615767 C67.5698531,11.5096044 68.9095771,8.37298823 71.5890653,5.75163393 C74.2573423,3.13027962 77.4637111,1.81962213 81.2082679,1.81962213 C84.9079797,1.81962213 88.0807153,3.14148182 90.7265698,5.78524086 C93.3836355,8.4289999 94.7121485,11.6048238 94.7121485,15.3128079 C94.7121485,19.0431967 93.37803,22.2078184 90.709753,24.806768 C88.0302647,27.4169199 84.7958682,28.7219763 81.0064665,28.7219763 C77.6543033,28.7219763 74.6441284,27.5625485 71.9758515,25.2436582 C69.0385045,22.6783157 67.5698531,19.3176555 67.5698531,15.1615767 Z M71.5217982,15.2119871 C71.5217982,18.0797935 72.485951,20.4378568 74.4142857,22.2862476 C76.3314091,24.1346385 78.5455973,25.05882 81.0569168,25.05882 C83.7812501,25.05882 86.0795214,24.1178352 87.9517998,22.2358372 C89.8240782,20.3314345 90.7602033,18.012579 90.7602033,15.279201 C90.7602033,12.5122159 89.8352893,10.1933603 87.9854334,8.32256471 C86.1467887,6.44056675 83.8709395,5.49958189 81.1578176,5.49958189 C78.4559068,5.49958189 76.1744521,6.44056675 74.3133849,8.32256471 C72.4523178,10.1821579 71.5217982,12.4786091 71.5217982,15.2119871 Z M98.7313607,28.2514792 L104.196817,0.357720312 L113.109714,20.5218834 L122.342131,0.357720312 L127.252633,28.2514792 L123.23342,28.2514792 L120.727719,12.5906459 L113.042447,29.4445255 L105.575793,12.5738424 L102.784207,28.2514792 L98.7313607,28.2514792 Z M148.004549,21.9501782 L136.888652,21.9501782 L133.996165,28.2514792 L129.775151,28.2514792 L142.623177,0.676986226 L155.017149,28.2514792 L150.728868,28.2514792 L148.004549,21.9501782 Z M146.406954,18.2702185 L142.55591,9.44839715 L138.51988,18.2702185 L146.406954,18.2702185 Z M163.980497,5.98688249 L163.980497,28.2514792 L160.062186,28.2514792 L160.062186,5.98688249 L154.092226,5.98688249 L154.092226,2.30692274 L169.93364,2.30692274 L169.93364,5.98688249 L163.980497,5.98688249 Z M187.759435,5.98688249 L177.349843,5.98688249 L177.349843,12.2209696 L187.456733,12.2209696 L187.456733,15.9009293 L177.349843,15.9009293 L177.349843,24.5715194 L187.759435,24.5715194 L187.759435,28.2514792 L173.431532,28.2514792 L173.431532,2.30692274 L187.759435,2.30692274 L187.759435,5.98688249 Z" id="AUTOMATE" fill="#000000"></path>
<path class="svg-it" d="M188.855167,30.4191267 L208.898137,30.4191267 L208.898137,33.9478552 L187.632056,33.9478552 L188.855167,30.4191267 Z M215.927554,2.30692274 L215.927554,28.2514792 L212.009243,28.2514792 L212.009243,2.30692274 L215.927554,2.30692274 Z M229.330534,5.98688249 L229.330534,28.2514792 L225.412223,28.2514792 L225.412223,5.98688249 L219.442263,5.98688249 L219.442263,2.30692274 L235.283677,2.30692274 L235.283677,5.98688249 L229.330534,5.98688249 Z" id="_IT" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment