cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="pacman-wrapper">
  <div id="pacman-labirint">
    <div class="pacman"></div>
    <div class="red-ghost">
      <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
              <g id="labirint" sketch:type="MSLayerGroup" transform="translate(-157.000000, -37.000000)" fill="#F44336">
                  <path d="M157,45 C157,40.581722 160.590712,37 165,37 C169.418278,37 173,40.5907123 173,45 L173,53 L171.010132,50.6281738 L169.023865,53 L167.00116,50.6281738 L165.024414,53 L163.025696,50.6281738 L161.008179,53 L158.996765,50.6281738 L157,53 L157,45 Z M161.781065,46.0887574 C162.800668,46.0887574 163.627219,45.05027 163.627219,43.7692308 C163.627219,42.4881916 162.800668,41.4497041 161.781065,41.4497041 C160.761462,41.4497041 159.934911,42.4881916 159.934911,43.7692308 C159.934911,45.05027 160.761462,46.0887574 161.781065,46.0887574 Z M166.798817,46.0887574 C167.818419,46.0887574 168.64497,45.05027 168.64497,43.7692308 C168.64497,42.4881916 167.818419,41.4497041 166.798817,41.4497041 C165.779214,41.4497041 164.952663,42.4881916 164.952663,43.7692308 C164.952663,45.05027 165.779214,46.0887574 166.798817,46.0887574 Z M161.497041,45 C161.889196,45 162.207101,44.5761276 162.207101,44.0532544 C162.207101,43.5303813 161.889196,43.1065089 161.497041,43.1065089 C161.104887,43.1065089 160.786982,43.5303813 160.786982,44.0532544 C160.786982,44.5761276 161.104887,45 161.497041,45 Z M166.514793,45 C166.906948,45 167.224852,44.5761276 167.224852,44.0532544 C167.224852,43.5303813 166.906948,43.1065089 166.514793,43.1065089 C166.122638,43.1065089 165.804734,43.5303813 165.804734,44.0532544 C165.804734,44.5761276 166.122638,45 166.514793,45 Z" id="red-ghost" sketch:type="MSShapeGroup"></path>
              </g>
          </g>
      </svg>
    </div>
    <div class="green-ghost">
      <svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="labirint" sketch:type="MSLayerGroup" transform="translate(-277.000000, -67.000000)" fill="#4CAF50">
            <path d="M277,75.2728906 C277,70.8546126 280.590712,67.2728906 285,67.2728906 C289.418278,67.2728906 293,70.8636029 293,75.2728906 L293,83.2728906 L291.010132,80.9010644 L289.023865,83.2728906 L287.00116,80.9010644 L285.024414,83.2728906 L283.025696,80.9010644 L281.008179,83.2728906 L278.996765,80.9010644 L277,83.2728906 L277,75.2728906 Z M281.781065,76.361648 C282.800668,76.361648 283.627219,75.3231606 283.627219,74.0421214 C283.627219,72.7610822 282.800668,71.7225947 281.781065,71.7225947 C280.761462,71.7225947 279.934911,72.7610822 279.934911,74.0421214 C279.934911,75.3231606 280.761462,76.361648 281.781065,76.361648 Z M286.798817,76.361648 C287.818419,76.361648 288.64497,75.3231606 288.64497,74.0421214 C288.64497,72.7610822 287.818419,71.7225947 286.798817,71.7225947 C285.779214,71.7225947 284.952663,72.7610822 284.952663,74.0421214 C284.952663,75.3231606 285.779214,76.361648 286.798817,76.361648 Z M281.497041,75.2728906 C281.889196,75.2728906 282.207101,74.8490182 282.207101,74.326145 C282.207101,73.8032719 281.889196,73.3793995 281.497041,73.3793995 C281.104887,73.3793995 280.786982,73.8032719 280.786982,74.326145 C280.786982,74.8490182 281.104887,75.2728906 281.497041,75.2728906 Z M286.514793,75.2728906 C286.906948,75.2728906 287.224852,74.8490182 287.224852,74.326145 C287.224852,73.8032719 286.906948,73.3793995 286.514793,73.3793995 C286.122638,73.3793995 285.804734,73.8032719 285.804734,74.326145 C285.804734,74.8490182 286.122638,75.2728906 286.514793,75.2728906 Z" id="green-ghost" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>
    </div>
    <div class="blue-ghost">
      <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="labirint" sketch:type="MSLayerGroup" transform="translate(-37.000000, -127.000000)" fill="#2196F3">
            <path d="M37,135 C37,130.581722 40.5907123,127 45,127 C49.418278,127 53,130.590712 53,135 L53,143 L51.0101318,140.628174 L49.0238647,143 L47.0011597,140.628174 L45.0244141,143 L43.0256958,140.628174 L41.0081787,143 L38.9967651,140.628174 L37,143 L37,135 Z M41.7810651,136.088757 C42.8006677,136.088757 43.6272189,135.05027 43.6272189,133.769231 C43.6272189,132.488192 42.8006677,131.449704 41.7810651,131.449704 C40.7614625,131.449704 39.9349112,132.488192 39.9349112,133.769231 C39.9349112,135.05027 40.7614625,136.088757 41.7810651,136.088757 Z M46.7988166,136.088757 C47.8184192,136.088757 48.6449704,135.05027 48.6449704,133.769231 C48.6449704,132.488192 47.8184192,131.449704 46.7988166,131.449704 C45.779214,131.449704 44.9526627,132.488192 44.9526627,133.769231 C44.9526627,135.05027 45.779214,136.088757 46.7988166,136.088757 Z M41.4970414,135 C41.8891963,135 42.2071006,134.576128 42.2071006,134.053254 C42.2071006,133.530381 41.8891963,133.106509 41.4970414,133.106509 C41.1048866,133.106509 40.7869822,133.530381 40.7869822,134.053254 C40.7869822,134.576128 41.1048866,135 41.4970414,135 Z M46.5147929,135 C46.9069478,135 47.2248521,134.576128 47.2248521,134.053254 C47.2248521,133.530381 46.9069478,133.106509 46.5147929,133.106509 C46.122638,133.106509 45.8047337,133.530381 45.8047337,134.053254 C45.8047337,134.576128 46.122638,135 46.5147929,135 Z" id="blue-ghost" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>
    </div>
    <svg width="304px" height="352px" viewBox="0 0 304 352" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="labirint" transform="translate(2.000000, 0.000000)">
                <g id="borders" transform="translate(0.000000, 19.400000)" stroke="#9CA5BF" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup">
                    <path d="M179.983075,90.135119 L179.983075,119.974752" id="Line19"></path>
                    <path d="M30.0123429,90.9722342 L30.0123429,150.00629 L90.0473752,150.00629" id="line18"></path>
                    <path d="M0,0 L0,90 L60,90 L60,29.6362513" id="line17"></path>
                    <path d="M30,30 L30,0 L90.085392,0 L90.085392,30 L119.976135,30" id="line16"></path>
                    <path d="M270.030064,90.6609797 L270.030064,150.0004 L240.047453,150.0004 L240.047453,209.982864 L209.934389,209.982861 L209.934389,269.999755 L180.064514,269.999755 L180.064514,300.057434 L150.021307,300.057434 L150.021307,269.999755" id="line15"></path>
                    <path d="M90.023021,180.009867 L90.023021,209.995443 L150.05704,209.995443 L150.05704,149.816168" id="line14"></path>
                    <path d="M150.679218,180.055567 L210.043518,180.055567 L210.043518,120.010402 L240.039346,120.010402" id="line13"></path>
                    <path d="M31.2242155,119.978201 L59.9616537,119.978201" id="line12"></path>
                    <path d="M90.5,0 L270,0 L270,60.0401649" id="line11"></path>
                    <path d="M0.468888817,59.9976934 L30.0167542,59.9976934" id="line10"></path>
                    <path d="M180,59.7153026 L180,90 L300,90 L300,0 L270.428448,3.68128068e-15" id="line9"></path>
                    <path d="M60.5308708,59.9666538 L149.973116,59.9666538 L149.973116,30.0007817 L209.893801,30.0007817 L209.893801,59.9666538 L240.061343,59.9666538 L240.061343,30.0007817" id="line8"></path>
                    <path d="M90.0066342,60.5175825 L90.0066342,90.0281988" id="line7"></path>
                    <path d="M59.9951184,151.42645 L59.9951184,209.953335 L90.0262642,209.953335 L89.7509842,269.960426 L120.001968,269.960426 L120.001967,299.832849" id="line6"></path>
                    <path d="M90.0473752,119.978201 L120.001189,119.978201 L120.001189,179.986353" id="line5"></path>
                    <path d="M150.000427,119.424892 L150.000427,89.9201654" id="line4"></path>
                    <path d="M179.974364,150.016845 L179.974364,120.01246 L120.025081,120.012459 L120.025081,90.0005368" id="line3"></path>
                    <path d="M209.929804,239.980678 L120.051478,239.980678" id="line2"></path>
                    <path d="M180.052292,239.973977 L180.052292,210.006751" id="line1"></path>
                </g>
                <path d="M255,142 C256.656854,142 258,140.656854 258,139 C258,137.343146 256.656854,136 255,136 C253.343146,136 252,137.343146 252,139 C252,140.656854 253.343146,142 255,142 L255,142 Z M240,157 C241.656854,157 243,155.656854 243,154 C243,152.343146 241.656854,151 240,151 C238.343146,151 237,152.343146 237,154 C237,155.656854 238.343146,157 240,157 L240,157 Z M225,157 C226.656854,157 228,155.656854 228,154 C228,152.343146 226.656854,151 225,151 C223.343146,151 222,152.343146 222,154 C222,155.656854 223.343146,157 225,157 L225,157 Z M225,201 C226.656854,201 228,199.656854 228,198 C228,196.343146 226.656854,195 225,195 C223.343146,195 222,196.343146 222,198 C222,199.656854 223.343146,201 225,201 L225,201 Z M225,186 C226.656854,186 228,184.656854 228,183 C228,181.343146 226.656854,180 225,180 C223.343146,180 222,181.343146 222,183 C222,184.656854 223.343146,186 225,186 L225,186 Z M225,171 C226.656854,171 228,169.656854 228,168 C228,166.343146 226.656854,165 225,165 C223.343146,165 222,166.343146 222,168 C222,169.656854 223.343146,171 225,171 L225,171 Z M120,247 C121.656854,247 123,245.656854 123,244 C123,242.343146 121.656854,241 120,241 C118.343146,241 117,242.343146 117,244 C117,245.656854 118.343146,247 120,247 L120,247 Z M105,247 C106.656854,247 108,245.656854 108,244 C108,242.343146 106.656854,241 105,241 C103.343146,241 102,242.343146 102,244 C102,245.656854 103.343146,247 105,247 L105,247 Z M150,247 C151.656854,247 153,245.656854 153,244 C153,242.343146 151.656854,241 150,241 C148.343146,241 147,242.343146 147,244 C147,245.656854 148.343146,247 150,247 L150,247 Z M135,247 C136.656854,247 138,245.656854 138,244 C138,242.343146 136.656854,241 135,241 C133.343146,241 132,242.343146 132,244 C132,245.656854 133.343146,247 135,247 L135,247 Z M195,277 C196.656854,277 198,275.656854 198,274 C198,272.343146 196.656854,271 195,271 C193.343146,271 192,272.343146 192,274 C192,275.656854 193.343146,277 195,277 L195,277 Z M150,277 C151.656854,277 153,275.656854 153,274 C153,272.343146 151.656854,271 150,271 C148.343146,271 147,272.343146 147,274 C147,275.656854 148.343146,277 150,277 L150,277 Z M120,277 C121.656854,277 123,275.656854 123,274 C123,272.343146 121.656854,271 120,271 C118.343146,271 117,272.343146 117,274 C117,275.656854 118.343146,277 120,277 L120,277 Z M135,277 C136.656854,277 138,275.656854 138,274 C138,272.343146 136.656854,271 135,271 C133.343146,271 132,272.343146 132,274 C132,275.656854 133.343146,277 135,277 L135,277 Z M180,277 C181.656854,277 183,275.656854 183,274 C183,272.343146 181.656854,271 180,271 C178.343146,271 177,272.343146 177,274 C177,275.656854 178.343146,277 180,277 L180,277 Z M165,277 C166.656854,277 168,275.656854 168,274 C168,272.343146 166.656854,271 165,271 C163.343146,271 162,272.343146 162,274 C162,275.656854 163.343146,277 165,277 L165,277 Z M225,217 C226.656854,217 228,215.656854 228,214 C228,212.343146 226.656854,211 225,211 C223.343146,211 222,212.343146 222,214 C222,215.656854 223.343146,217 225,217 L225,217 Z M180,217 C181.656854,217 183,215.656854 183,214 C183,212.343146 181.656854,211 180,211 C178.343146,211 177,212.343146 177,214 C177,215.656854 178.343146,217 180,217 L180,217 Z M165,217 C166.656854,217 168,215.656854 168,214 C168,212.343146 166.656854,211 165,211 C163.343146,211 162,212.343146 162,214 C162,215.656854 163.343146,217 165,217 L165,217 Z M210,217 C211.656854,217 213,215.656854 213,214 C213,212.343146 211.656854,211 210,211 C208.343146,211 207,212.343146 207,214 C207,215.656854 208.343146,217 210,217 L210,217 Z M165,247 C166.656854,247 168,245.656854 168,244 C168,242.343146 166.656854,241 165,241 C163.343146,241 162,242.343146 162,244 C162,245.656854 163.343146,247 165,247 L165,247 Z M165,232 C166.656854,232 168,230.656854 168,229 C168,227.343146 166.656854,226 165,226 C163.343146,226 162,227.343146 162,229 C162,230.656854 163.343146,232 165,232 L165,232 Z M105,277 C106.656854,277 108,275.656854 108,274 C108,272.343146 106.656854,271 105,271 C103.343146,271 102,272.343146 102,274 C102,275.656854 103.343146,277 105,277 L105,277 Z M105,262 C106.656854,262 108,260.656854 108,259 C108,257.343146 106.656854,256 105,256 C103.343146,256 102,257.343146 102,259 C102,260.656854 103.343146,262 105,262 L105,262 Z M168,349 C168,347.343146 166.656854,346 165,346 C163.343146,346 162,347.343146 162,349 C162,350.656854 163.343146,352 165,352 C166.656854,352 168,350.656854 168,349 Z M150,337 C151.656854,337 153,335.656854 153,334 C153,332.343146 151.656854,331 150,331 C148.343146,331 147,332.343146 147,334 C147,335.656854 148.343146,337 150,337 L150,337 Z M165,337 C166.656854,337 168,335.656854 168,334 C168,332.343146 166.656854,331 165,331 C163.343146,331 162,332.343146 162,334 C162,335.656854 163.343146,337 165,337 L165,337 Z M135,337 C136.656854,337 138,335.656854 138,334 C138,332.343146 136.656854,331 135,331 C133.343146,331 132,332.343146 132,334 C132,335.656854 133.343146,337 135,337 L135,337 Z M135,322 C136.656854,322 138,320.656854 138,319 C138,317.343146 136.656854,316 135,316 C133.343146,316 132,317.343146 132,319 C132,320.656854 133.343146,322 135,322 L135,322 Z M135,307 C136.656854,307 138,305.656854 138,304 C138,302.343146 136.656854,301 135,301 C133.343146,301 132,302.343146 132,304 C132,305.656854 133.343146,307 135,307 L135,307 Z M135,292 C136.656854,292 138,290.656854 138,289 C138,287.343146 136.656854,286 135,286 C133.343146,286 132,287.343146 132,289 C132,290.656854 133.343146,292 135,292 L135,292 Z M165,307 C166.656854,307 168,305.656854 168,304 C168,302.343146 166.656854,301 165,301 C163.343146,301 162,302.343146 162,304 C162,305.656854 163.343146,307 165,307 L165,307 Z M165,292 C166.656854,292 168,290.656854 168,289 C168,287.343146 166.656854,286 165,286 C163.343146,286 162,287.343146 162,289 C162,290.656854 163.343146,292 165,292 L165,292 Z M195,247 C196.656854,247 198,245.656854 198,244 C198,242.343146 196.656854,241 195,241 C193.343146,241 192,242.343146 192,244 C192,245.656854 193.343146,247 195,247 L195,247 Z M195,232 C196.656854,232 198,230.656854 198,229 C198,227.343146 196.656854,226 195,226 C193.343146,226 192,227.343146 192,229 C192,230.656854 193.343146,232 195,232 L195,232 Z M195,217 C196.656854,217 198,215.656854 198,214 C198,212.343146 196.656854,211 195,211 C193.343146,211 192,212.343146 192,214 C192,215.656854 193.343146,217 195,217 L195,217 Z M195,187 C196.656854,187 198,185.656854 198,184 C198,182.343146 196.656854,181 195,181 C193.343146,181 192,182.343146 192,184 C192,185.656854 193.343146,187 195,187 L195,187 Z M180,187 C181.656854,187 183,185.656854 183,184 C183,182.343146 181.656854,181 180,181 C178.343146,181 177,182.343146 177,184 C177,185.656854 178.343146,187 180,187 L180,187 Z M165,187 C166.656854,187 168,185.656854 168,184 C168,182.343146 166.656854,181 165,181 C163.343146,181 162,182.343146 162,184 C162,185.656854 163.343146,187 165,187 L165,187 Z M195,142 C196.656854,142 198,140.656854 198,139 C198,137.343146 196.656854,136 195,136 C193.343146,136 192,137.343146 192,139 C192,140.656854 193.343146,142 195,142 L195,142 Z M255,127 C256.656854,127 258,125.656854 258,124 C258,122.343146 256.656854,121 255,121 C253.343146,121 252,122.343146 252,124 C252,125.656854 253.343146,127 255,127 L255,127 Z M240,127 C241.656854,127 243,125.656854 243,124 C243,122.343146 241.656854,121 240,121 C238.343146,121 237,122.343146 237,124 C237,125.656854 238.343146,127 240,127 L240,127 Z M225,127 C226.656854,127 228,125.656854 228,124 C228,122.343146 226.656854,121 225,121 C223.343146,121 222,122.343146 222,124 C222,125.656854 223.343146,127 225,127 L225,127 Z M210,127 C211.656854,127 213,125.656854 213,124 C213,122.343146 211.656854,121 210,121 C208.343146,121 207,122.343146 207,124 C207,125.656854 208.343146,127 210,127 L210,127 Z M195,127 C196.656854,127 198,125.656854 198,124 C198,122.343146 196.656854,121 195,121 C193.343146,121 192,122.343146 192,124 C192,125.656854 193.343146,127 195,127 L195,127 Z M255,97 C256.656854,97 258,95.6568542 258,94 C258,92.3431458 256.656854,91 255,91 C253.343146,91 252,92.3431458 252,94 C252,95.6568542 253.343146,97 255,97 L255,97 Z M240,97 C241.656854,97 243,95.6568542 243,94 C243,92.3431458 241.656854,91 240,91 C238.343146,91 237,92.3431458 237,94 C237,95.6568542 238.343146,97 240,97 L240,97 Z M225,97 C226.656854,97 228,95.6568542 228,94 C228,92.3431458 226.656854,91 225,91 C223.343146,91 222,92.3431458 222,94 C222,95.6568542 223.343146,97 225,97 L225,97 Z M285,97 C286.656854,97 288,95.6568542 288,94 C288,92.3431458 286.656854,91 285,91 C283.343146,91 282,92.3431458 282,94 C282,95.6568542 283.343146,97 285,97 L285,97 Z M270,97 C271.656854,97 273,95.6568542 273,94 C273,92.3431458 271.656854,91 270,91 C268.343146,91 267,92.3431458 267,94 C267,95.6568542 268.343146,97 270,97 L270,97 Z M210,97 C211.656854,97 213,95.6568542 213,94 C213,92.3431458 211.656854,91 210,91 C208.343146,91 207,92.3431458 207,94 C207,95.6568542 208.343146,97 210,97 L210,97 Z M195,97 C196.656854,97 198,95.6568542 198,94 C198,92.3431458 196.656854,91 195,91 C193.343146,91 192,92.3431458 192,94 C192,95.6568542 193.343146,97 195,97 L195,97 Z M240,37 C241.656854,37 243,35.6568542 243,34 C243,32.3431458 241.656854,31 240,31 C238.343146,31 237,32.3431458 237,34 C237,35.6568542 238.343146,37 240,37 L240,37 Z M225,37 C226.656854,37 228,35.6568542 228,34 C228,32.3431458 226.656854,31 225,31 C223.343146,31 222,32.3431458 222,34 C222,35.6568542 223.343146,37 225,37 L225,37 Z M255,37 C256.656854,37 258,35.6568542 258,34 C258,32.3431458 256.656854,31 255,31 C253.343146,31 252,32.3431458 252,34 C252,35.6568542 253.343146,37 255,37 L255,37 Z M210,37 C211.656854,37 213,35.6568542 213,34 C213,32.3431458 211.656854,31 210,31 C208.343146,31 207,32.3431458 207,34 C207,35.6568542 208.343146,37 210,37 L210,37 Z M195,37 C196.656854,37 198,35.6568542 198,34 C198,32.3431458 196.656854,31 195,31 C193.343146,31 192,32.3431458 192,34 C192,35.6568542 193.343146,37 195,37 L195,37 Z M165,37 C166.656854,37 168,35.6568542 168,34 C168,32.3431458 166.656854,31 165,31 C163.343146,31 162,32.3431458 162,34 C162,35.6568542 163.343146,37 165,37 L165,37 Z M150,37 C151.656854,37 153,35.6568542 153,34 C153,32.3431458 151.656854,31 150,31 C148.343146,31 147,32.3431458 147,34 C147,35.6568542 148.343146,37 150,37 L150,37 Z M180,37 C181.656854,37 183,35.6568542 183,34 C183,32.3431458 181.656854,31 180,31 C178.343146,31 177,32.3431458 177,34 C177,35.6568542 178.343146,37 180,37 L180,37 Z M135,37 C136.656854,37 138,35.6568542 138,34 C138,32.3431458 136.656854,31 135,31 C133.343146,31 132,32.3431458 132,34 C132,35.6568542 133.343146,37 135,37 L135,37 Z M120,37 C121.656854,37 123,35.6568542 123,34 C123,32.3431458 121.656854,31 120,31 C118.343146,31 117,32.3431458 117,34 C117,35.6568542 118.343146,37 120,37 L120,37 Z M105,37 C106.656854,37 108,35.6568542 108,34 C108,32.3431458 106.656854,31 105,31 C103.343146,31 102,32.3431458 102,34 C102,35.6568542 103.343146,37 105,37 L105,37 Z M195,172 C196.656854,172 198,170.656854 198,169 C198,167.343146 196.656854,166 195,166 C193.343146,166 192,167.343146 192,169 C192,170.656854 193.343146,172 195,172 L195,172 Z M195,157 C196.656854,157 198,155.656854 198,154 C198,152.343146 196.656854,151 195,151 C193.343146,151 192,152.343146 192,154 C192,155.656854 193.343146,157 195,157 L195,157 Z M285,52 C286.656854,52 288,50.6568542 288,49 C288,47.3431458 286.656854,46 285,46 C283.343146,46 282,47.3431458 282,49 C282,50.6568542 283.343146,52 285,52 L285,52 Z M285,37 C286.656854,37 288,35.6568542 288,34 C288,32.3431458 286.656854,31 285,31 C283.343146,31 282,32.3431458 282,34 C282,35.6568542 283.343146,37 285,37 L285,37 Z M285,82 C286.656854,82 288,80.6568542 288,79 C288,77.3431458 286.656854,76 285,76 C283.343146,76 282,77.3431458 282,79 C282,80.6568542 283.343146,82 285,82 L285,82 Z M285,67 C286.656854,67 288,65.6568542 288,64 C288,62.3431458 286.656854,61 285,61 C283.343146,61 282,62.3431458 282,64 C282,65.6568542 283.343146,67 285,67 L285,67 Z M165,172 C166.656854,172 168,170.656854 168,169 C168,167.343146 166.656854,166 165,166 C163.343146,166 162,167.343146 162,169 C162,170.656854 163.343146,172 165,172 L165,172 Z M105,187 C106.656854,187 108,185.656854 108,184 C108,182.343146 106.656854,181 105,181 C103.343146,181 102,182.343146 102,184 C102,185.656854 103.343146,187 105,187 L105,187 Z M105,202 C106.656854,202 108,200.656854 108,199 C108,197.343146 106.656854,196 105,196 C103.343146,196 102,197.343146 102,199 C102,200.656854 103.343146,202 105,202 L105,202 Z M105,217 C106.656854,217 108,215.656854 108,214 C108,212.343146 106.656854,211 105,211 C103.343146,211 102,212.343146 102,214 C102,215.656854 103.343146,217 105,217 L105,217 Z M105,157 C106.656854,157 108,155.656854 108,154 C108,152.343146 106.656854,151 105,151 C103.343146,151 102,152.343146 102,154 C102,155.656854 103.343146,157 105,157 L105,157 Z M105,172 C106.656854,172 108,170.656854 108,169 C108,167.343146 106.656854,166 105,166 C103.343146,166 102,167.343146 102,169 C102,170.656854 103.343146,172 105,172 L105,172 Z M105,97 C106.656854,97 108,95.6568542 108,94 C108,92.3431458 106.656854,91 105,91 C103.343146,91 102,92.3431458 102,94 C102,95.6568542 103.343146,97 105,97 L105,97 Z M105,112 C106.656854,112 108,110.656854 108,109 C108,107.343146 106.656854,106 105,106 C103.343146,106 102,107.343146 102,109 C102,110.656854 103.343146,112 105,112 L105,112 Z M75,97 C76.6568542,97 78,95.6568542 78,94 C78,92.3431458 76.6568542,91 75,91 C73.3431458,91 72,92.3431458 72,94 C72,95.6568542 73.3431458,97 75,97 L75,97 Z M75,112 C76.6568542,112 78,110.656854 78,109 C78,107.343146 76.6568542,106 75,106 C73.3431458,106 72,107.343146 72,109 C72,110.656854 73.3431458,112 75,112 L75,112 Z M75,37 C76.6568542,37 78,35.6568542 78,34 C78,32.3431458 76.6568542,31 75,31 C73.3431458,31 72,32.3431458 72,34 C72,35.6568542 73.3431458,37 75,37 L75,37 Z M60,37 C61.6568542,37 63,35.6568542 63,34 C63,32.3431458 61.6568542,31 60,31 C58.3431458,31 57,32.3431458 57,34 C57,35.6568542 58.3431458,37 60,37 L60,37 Z M75,52 C76.6568542,52 78,50.6568542 78,49 C78,47.3431458 76.6568542,46 75,46 C73.3431458,46 72,47.3431458 72,49 C72,50.6568542 73.3431458,52 75,52 L75,52 Z M45,37 C46.6568542,37 48,35.6568542 48,34 C48,32.3431458 46.6568542,31 45,31 C43.3431458,31 42,32.3431458 42,34 C42,35.6568542 43.3431458,37 45,37 L45,37 Z M45,52 C46.6568542,52 48,50.6568542 48,49 C48,47.3431458 46.6568542,46 45,46 C43.3431458,46 42,47.3431458 42,49 C42,50.6568542 43.3431458,52 45,52 L45,52 Z M105,127 C106.656854,127 108,125.656854 108,124 C108,122.343146 106.656854,121 105,121 C103.343146,121 102,122.343146 102,124 C102,125.656854 103.343146,127 105,127 L105,127 Z M135,112 C136.656854,112 138,110.656854 138,109 C138,107.343146 136.656854,106 135,106 C133.343146,106 132,107.343146 132,109 C132,110.656854 133.343146,112 135,112 L135,112 Z M135,127 C136.656854,127 138,125.656854 138,124 C138,122.343146 136.656854,121 135,121 C133.343146,121 132,122.343146 132,124 C132,125.656854 133.343146,127 135,127 L135,127 Z M165,112 C166.656854,112 168,110.656854 168,109 C168,107.343146 166.656854,106 165,106 C163.343146,106 162,107.343146 162,109 C162,110.656854 163.343146,112 165,112 L165,112 Z M165,127 C166.656854,127 168,125.656854 168,124 C168,122.343146 166.656854,121 165,121 C163.343146,121 162,122.343146 162,124 C162,125.656854 163.343146,127 165,127 L165,127 Z M75,187 C76.6568542,187 78,185.656854 78,184 C78,182.343146 76.6568542,181 75,181 C73.3431458,181 72,182.343146 72,184 C72,185.656854 73.3431458,187 75,187 L75,187 Z M90,187 C91.6568542,187 93,185.656854 93,184 C93,182.343146 91.6568542,181 90,181 C88.3431458,181 87,182.343146 87,184 C87,185.656854 88.3431458,187 90,187 L90,187 Z M90,157 C91.6568542,157 93,155.656854 93,154 C93,152.343146 91.6568542,151 90,151 C88.3431458,151 87,152.343146 87,154 C87,155.656854 88.3431458,157 90,157 L90,157 Z M60,157 C61.6568542,157 63,155.656854 63,154 C63,152.343146 61.6568542,151 60,151 C58.3431458,151 57,152.343146 57,154 C57,155.656854 58.3431458,157 60,157 L60,157 Z M45,157 C46.6568542,157 48,155.656854 48,154 C48,152.343146 46.6568542,151 45,151 C43.3431458,151 42,152.343146 42,154 C42,155.656854 43.3431458,157 45,157 L45,157 Z M75,157 C76.6568542,157 78,155.656854 78,154 C78,152.343146 76.6568542,151 75,151 C73.3431458,151 72,152.343146 72,154 C72,155.656854 73.3431458,157 75,157 L75,157 Z M90,127 C91.6568542,127 93,125.656854 93,124 C93,122.343146 91.6568542,121 90,121 C88.3431458,121 87,122.343146 87,124 C87,125.656854 88.3431458,127 90,127 L90,127 Z M60,127 C61.6568542,127 63,125.656854 63,124 C63,122.343146 61.6568542,121 60,121 C58.3431458,121 57,122.343146 57,124 C57,125.656854 58.3431458,127 60,127 L60,127 Z M45,127 C46.6568542,127 48,125.656854 48,124 C48,122.343146 46.6568542,121 45,121 C43.3431458,121 42,122.343146 42,124 C42,125.656854 43.3431458,127 45,127 L45,127 Z M30,97 C31.6568542,97 33,95.6568542 33,94 C33,92.3431458 31.6568542,91 30,91 C28.3431458,91 27,92.3431458 27,94 C27,95.6568542 28.3431458,97 30,97 L30,97 Z M30,67 C31.6568542,67 33,65.6568542 33,64 C33,62.3431458 31.6568542,61 30,61 C28.3431458,61 27,62.3431458 27,64 C27,65.6568542 28.3431458,67 30,67 L30,67 Z M15,97 C16.6568542,97 18,95.6568542 18,94 C18,92.3431458 16.6568542,91 15,91 C13.3431458,91 12,92.3431458 12,94 C12,95.6568542 13.3431458,97 15,97 L15,97 Z M75,127 C76.6568542,127 78,125.656854 78,124 C78,122.343146 76.6568542,121 75,121 C73.3431458,121 72,122.343146 72,124 C72,125.656854 73.3431458,127 75,127 L75,127 Z M45,67 C46.6568542,67 48,65.6568542 48,64 C48,62.3431458 46.6568542,61 45,61 C43.3431458,61 42,62.3431458 42,64 C42,65.6568542 43.3431458,67 45,67 L45,67 Z M45,82 C46.6568542,82 48,80.6568542 48,79 C48,77.3431458 46.6568542,76 45,76 C43.3431458,76 42,77.3431458 42,79 C42,80.6568542 43.3431458,82 45,82 L45,82 Z M15,22 C16.6568542,22 18,20.6568542 18,19 C18,17.3431458 16.6568542,16 15,16 C13.3431458,16 12,17.3431458 12,19 C12,20.6568542 13.3431458,22 15,22 L15,22 Z M15,7 C16.6568542,7 18,5.65685425 18,4 C18,2.34314575 16.6568542,1 15,1 C13.3431458,1 12,2.34314575 12,4 C12,5.65685425 13.3431458,7 15,7 L15,7 Z M15,37 C16.6568542,37 18,35.6568542 18,34 C18,32.3431458 16.6568542,31 15,31 C13.3431458,31 12,32.3431458 12,34 C12,35.6568542 13.3431458,37 15,37 L15,37 Z M15,52 C16.6568542,52 18,50.6568542 18,49 C18,47.3431458 16.6568542,46 15,46 C13.3431458,46 12,47.3431458 12,49 C12,50.6568542 13.3431458,52 15,52 L15,52 Z M15,67 C16.6568542,67 18,65.6568542 18,64 C18,62.3431458 16.6568542,61 15,61 C13.3431458,61 12,62.3431458 12,64 C12,65.6568542 13.3431458,67 15,67 L15,67 Z M45,97 C46.6568542,97 48,95.6568542 48,94 C48,92.3431458 46.6568542,91 45,91 C43.3431458,91 42,92.3431458 42,94 C42,95.6568542 43.3431458,97 45,97 L45,97 Z M165,97 C166.656854,97 168,95.6568542 168,94 C168,92.3431458 166.656854,91 165,91 C163.343146,91 162,92.3431458 162,94 C162,95.6568542 163.343146,97 165,97 L165,97 Z M165,82 C166.656854,82 168,80.6568542 168,79 C168,77.3431458 166.656854,76 165,76 C163.343146,76 162,77.3431458 162,79 C162,80.6568542 163.343146,82 165,82 L165,82 Z M165,67 C166.656854,67 168,65.6568542 168,64 C168,62.3431458 166.656854,61 165,61 C163.343146,61 162,62.3431458 162,64 C162,65.6568542 163.343146,67 165,67 L165,67 Z M195,82 C196.656854,82 198,80.6568542 198,79 C198,77.3431458 196.656854,76 195,76 C193.343146,76 192,77.3431458 192,79 C192,80.6568542 193.343146,82 195,82 L195,82 Z M195,67 C196.656854,67 198,65.6568542 198,64 C198,62.3431458 196.656854,61 195,61 C193.343146,61 192,62.3431458 192,64 C192,65.6568542 193.343146,67 195,67 L195,67 Z M255,82 C256.656854,82 258,80.6568542 258,79 C258,77.3431458 256.656854,76 255,76 C253.343146,76 252,77.3431458 252,79 C252,80.6568542 253.343146,82 255,82 L255,82 Z M255,67 C256.656854,67 258,65.6568542 258,64 C258,62.3431458 256.656854,61 255,61 C253.343146,61 252,62.3431458 252,64 C252,65.6568542 253.343146,67 255,67 L255,67 Z M255,52 C256.656854,52 258,50.6568542 258,49 C258,47.3431458 256.656854,46 255,46 C253.343146,46 252,47.3431458 252,49 C252,50.6568542 253.343146,52 255,52 L255,52 Z M225,67 C226.656854,67 228,65.6568542 228,64 C228,62.3431458 226.656854,61 225,61 C223.343146,61 222,62.3431458 222,64 C222,65.6568542 223.343146,67 225,67 L225,67 Z M225,52 C226.656854,52 228,50.6568542 228,49 C228,47.3431458 226.656854,46 225,46 C223.343146,46 222,47.3431458 222,49 C222,50.6568542 223.343146,52 225,52 L225,52 Z M135,67 C136.656854,67 138,65.6568542 138,64 C138,62.3431458 136.656854,61 135,61 C133.343146,61 132,62.3431458 132,64 C132,65.6568542 133.343146,67 135,67 L135,67 Z M135,52 C136.656854,52 138,50.6568542 138,49 C138,47.3431458 136.656854,46 135,46 C133.343146,46 132,47.3431458 132,49 C132,50.6568542 133.343146,52 135,52 L135,52 Z M180,67 C181.656854,67 183,65.6568542 183,64 C183,62.3431458 181.656854,61 180,61 C178.343146,61 177,62.3431458 177,64 C177,65.6568542 178.343146,67 180,67 L180,67 Z M135,97 C136.656854,97 138,95.6568542 138,94 C138,92.3431458 136.656854,91 135,91 C133.343146,91 132,92.3431458 132,94 C132,95.6568542 133.343146,97 135,97 L135,97 Z M120,97 C121.656854,97 123,95.6568542 123,94 C123,92.3431458 121.656854,91 120,91 C118.343146,91 117,92.3431458 117,94 C117,95.6568542 118.343146,97 120,97 L120,97 Z M150,97 C151.656854,97 153,95.6568542 153,94 C153,92.3431458 151.656854,91 150,91 C148.343146,91 147,92.3431458 147,94 C147,95.6568542 148.343146,97 150,97 L150,97 Z M75,67 C76.6568542,67 78,65.6568542 78,64 C78,62.3431458 76.6568542,61 75,61 C73.3431458,61 72,62.3431458 72,64 C72,65.6568542 73.3431458,67 75,67 L75,67 Z M105,67 C106.656854,67 108,65.6568542 108,64 C108,62.3431458 106.656854,61 105,61 C103.343146,61 102,62.3431458 102,64 C102,65.6568542 103.343146,67 105,67 L105,67 Z M90,67 C91.6568542,67 93,65.6568542 93,64 C93,62.3431458 91.6568542,61 90,61 C88.3431458,61 87,62.3431458 87,64 C87,65.6568542 88.3431458,67 90,67 L90,67 Z M120,67 C121.656854,67 123,65.6568542 123,64 C123,62.3431458 121.656854,61 120,61 C118.343146,61 117,62.3431458 117,64 C117,65.6568542 118.343146,67 120,67 L120,67 Z M75,142 C76.6568542,142 78,140.656854 78,139 C78,137.343146 76.6568542,136 75,136 C73.3431458,136 72,137.343146 72,139 C72,140.656854 73.3431458,142 75,142 L75,142 Z M75,202 C76.6568542,202 78,200.656854 78,199 C78,197.343146 76.6568542,196 75,196 C73.3431458,196 72,197.343146 72,199 C72,200.656854 73.3431458,202 75,202 L75,202 Z M75,217 C76.6568542,217 78,215.656854 78,214 C78,212.343146 76.6568542,211 75,211 C73.3431458,211 72,212.343146 72,214 C72,215.656854 73.3431458,217 75,217 L75,217 Z M120,217 C121.656854,217 123,215.656854 123,214 C123,212.343146 121.656854,211 120,211 C118.343146,211 117,212.343146 117,214 C117,215.656854 118.343146,217 120,217 L120,217 Z M135,217 C136.656854,217 138,215.656854 138,214 C138,212.343146 136.656854,211 135,211 C133.343146,211 132,212.343146 132,214 C132,215.656854 133.343146,217 135,217 L135,217 Z M135,202 C136.656854,202 138,200.656854 138,199 C138,197.343146 136.656854,196 135,196 C133.343146,196 132,197.343146 132,199 C132,200.656854 133.343146,202 135,202 L135,202 Z M135,187 C136.656854,187 138,185.656854 138,184 C138,182.343146 136.656854,181 135,181 C133.343146,181 132,182.343146 132,184 C132,185.656854 133.343146,187 135,187 L135,187 Z M135,172 C136.656854,172 138,170.656854 138,169 C138,167.343146 136.656854,166 135,166 C133.343146,166 132,167.343146 132,169 C132,170.656854 133.343146,172 135,172 L135,172 Z M135,157 C136.656854,157 138,155.656854 138,154 C138,152.343146 136.656854,151 135,151 C133.343146,151 132,152.343146 132,154 C132,155.656854 133.343146,157 135,157 L135,157 Z M150,157 C151.656854,157 153,155.656854 153,154 C153,152.343146 151.656854,151 150,151 C148.343146,151 147,152.343146 147,154 C147,155.656854 148.343146,157 150,157 L150,157 Z M165,157 C166.656854,157 168,155.656854 168,154 C168,152.343146 166.656854,151 165,151 C163.343146,151 162,152.343146 162,154 C162,155.656854 163.343146,157 165,157 L165,157 Z M255,157 C256.656854,157 258,155.656854 258,154 C258,152.343146 256.656854,151 255,151 C253.343146,151 252,152.343146 252,154 C252,155.656854 253.343146,157 255,157 L255,157 Z" id="dots" fill="#9CA5BF" sketch:type="MSShapeGroup"></path>
                <path d="M14.9999999,0 L15,63.6383723 L45.0724283,63.4734286 L45.0724283,93.5086077 L11.3716227,93.5086077 L45.0724283,93.5086077 L45.0724283,33.3798598 L75.2039362,33.3798598 L75.2039362,63.4734286 L135.051921,63.4734286 L135.051921,33.3798598 L101.618235,33.2721748 L225.019648,33.2721747 L225.195857,67.2940979 L225.019648,33.2721747 L255.022334,33.2721747 L255.022334,93.4185656 L285.123179,93.4185656 L285.123179,29.5585459 L285.123179,93.4185656 L255.022334,93.4185656 L255.022334,74.8949603 L255.022334,93.4185656 L195.004954,93.4185656 L195.004954,63.4734286 L164.990565,63.4734286 L164.990565,93.298395 L143.628321,93.2983918 L164.990565,93.298395 L164.990565,127.790445 L164.990565,93.298395 L135.045817,93.298395 L135.045817,127.790445 L135.045817,93.298395 L105.031763,93.298393 L105.031763,123.45303 L75.2427393,123.777315 L75.2427393,89.3890551 L75.2427393,123.777315 L40.8955008,123.453028 L75.2427393,123.777315 L74.7615992,153.545046 L40.8955008,153.545046 L74.7615992,153.545046 L75.2427393,123.777315 L74.7615992,153.545046 L105.031764,153.545046 L105.047137,183.453258 L74.8901964,183.453258 L74.8901964,216.980965 L74.8901964,183.453264 L105.045802,183.453264 L105.045805,213.441131 L135.069128,213.441131 L135.069128,153.26381 L165.116458,153.26381 L165.116458,183.314966 L195.068691,183.314966 L195.068691,123.234112 L255.310407,123.234112 L255.310407,153.34438 L225.195862,153.34438 L225.195862,213.226793 L195.088785,213.226793 L195.088785,247.6855 L195.088786,213.226793 L165.282065,213.226793 L165.282065,243.625609 L104.950991,243.625612 L104.950991,273.654802 L165.371745,273.654802 L165.125168,307.573542 L165.371745,273.654802 L198.883753,273.654802 L134.915942,273.654802 L134.91594,333.118439 L165.371744,333.118439 L165.371745,351.820792" id="main-line" stroke="#FFFFFF" stroke-width="10" sketch:type="MSShapeGroup"></path>
            </g>
        </g>
    </svg>
  </div>
</div>
            
          
!
            
              //points      : 1| 2| 3| 4| 5| 6| 7| 8| 9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|32|33|34|35|36|37|38|39|40|41|42|43|44|45|46|47|48|49|50|51|52|53|54|55|56|57|58|59|60|61|62|63|64|65|66|67|68|69|70|71|72|73|74|75|76|77|78|79|80|81|82|83|83|85|86|87|88|89|90|91|92|93|94|95|
$pacman-X     : 0, 0, 1, 0,-1, 1, 0, 0, 1, 0, 1, 1, 0,-1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0,-1, 0, 0,-1,-1, 0,-1, 0,-1, 1, 0, 0,-1, 0, 0,-1, 0,-1, 0, 0,-1, 1, 0,-1, 1, 0, 0, 1, 0,-1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0,-1, 0, 0,-1, 0, 0,-1, 0,-1,-1, 0, 1, 1, 0, 0, 1,-1,-1, 0, 0, 1, 0
$pacman-Y     : 1, 1, 0, 1, 0, 0,-1,-1, 0, 1, 0, 0,-1, 0, 0, 0, 0, 0, 1,-1, 0, 1, 1, 0,-1,-1, 1, 1, 0,-1, 1, 0, 0,-1, 0, 1, 0, 0, 1,-1, 0, 1,-1, 0, 1, 0,-1, 1, 0, 0, 1, 0, 0,-1, 1, 0, 1, 0, 1,-1, 0, 1, 0,-1,-1, 0, 1, 0,-1,-1, 0, 0, 1, 0, 1, 1, 0, 1,-1, 0, 1, 0, 0, 1, 0, 0, 1,-1, 0, 0, 0, 1, 1, 0, 1
$pacman-angle : 0,-1, 1, 1,-2,-1, 0, 1, 1,-1, 0,-1,-1, 2, 0, 0, 0, 1,-2, 1, 1, 0,-1,-1, 0, 2, 0, 1, 1,-2, 1, 0, 1,-1,-1, 1, 2, 1, 2,-1,-1, 2,-1,-1, 1, 1, 2, 1,-2, 1, 1,-2,-1, 2,-1, 1, 1,-1,-2, 1, 1,-1,-1, 0, 1, 1,-1,-1, 0, 1, 0, 1, 1,-1, 0, 1,-1, 2,-1,-1, 1, 0,-1,-1, 0, 1,-2, 1, 2, 0,-1, 0,-1, 1, 0

$pacman-step         : 30
$pacman-angle-step   : 90
$pacman-init-X       : 0
$pacman-init-Y       : 0
$pacman-init-angle   : 90
$pacman-steps-amount : length($pacman-X)
$pacman-anim-duration: 30s

$anim-step-dur: $pacman-anim-duration / $pacman-steps-amount
$draw-labirint-dur: 1s

@function em($size, $context: 14)
  @return ($size/$context)+em

.pacman-wrapper
  position: absolute
  top: 50%
  left: 50%
  font-size: 14px
  overflow: hidden
  width: em(300)
  height: em(352)
  margin: em(-150) 0 0 em(-176)

#pacman-labirint
  position: relative
  width: em(300)
  height: em(352)
  animation-fill-mode: backwards
  > svg
    width: 100%
    height: 100%

  #borders
    path
      stroke-dashoffset: 400
      stroke-dasharray: 400
      transition: stroke-dashoffset $draw-labirint-dur linear

  #main-line
    stroke-dashoffset: 2920
    stroke-dasharray: 2920

  .red-ghost,
  .green-ghost,
  .blue-ghost,
  #dots
    opacity: 0

  .red-ghost,
  .green-ghost,
  .blue-ghost
    position: absolute
    z-index: 1

  .red-ghost
    top: em(55)
    left: em(156)
  .green-ghost
    top: em(86)
    left: em(277)
  .blue-ghost
    top: em(145)
    left: em(37)

  .pacman
    position: absolute
    opacity: 0
    top: em(-2)
    left: em(7)
    z-index: 1
    transform-origin: 50% 50%
    animation-fill-mode: backwards
    width: em(16)
    height: em(16)
    &:before,
    &:after
      content: ""
      position: absolute
      z-index: 1
      left: 0
      width: 100%
      height: 50%
      background: #FFB03B
      overflow: hidden
    &:before
      top: 0
      border-radius: em(16) em(16) 0 0
      transform-origin: center bottom
    &:after
      bottom: 0
      border-radius: 0 0 em(16) em(16)
      transform-origin: center top
    
  &.show-pacman
    #borders
      path
        stroke-dashoffset: 0
        transition-delay: 0
    .red-ghost,
    .green-ghost,
    .blue-ghost,
    #dots
      opacity: 1
      transition: opacity $draw-labirint-dur linear $draw-labirint-dur
    #main-line
      animation: hide-dots $pacman-anim-duration linear $draw-labirint-dur
    .pacman
      opacity: 1
      transition: opacity 1s linear $draw-labirint-dur
      animation: pacman-move $pacman-anim-duration linear $draw-labirint-dur
      &:before
        animation: pacman-top 0.4s ease infinite $draw-labirint-dur
      &:after
        animation: pacman-bottom 0.4s ease infinite $draw-labirint-dur
    .red-ghost
      animation: red-ghost ($anim-step-dur * 6) linear infinite ($draw-labirint-dur + $anim-step-dur * -2)

    .blue-ghost
      animation: blue-ghost ($anim-step-dur * 8) linear infinite ($draw-labirint-dur - $anim-step-dur)

    .green-ghost
      animation: green-ghost ($anim-step-dur * 6) linear infinite ($draw-labirint-dur + $anim-step-dur)
      

@keyframes hide-dots
  0%
    stroke-dashoffset: 2920
  100%
    stroke-dashoffset: 0


@keyframes red-ghost
  0%, 100%
    transform: translate3d(0,0,0)
  33.33%
    transform: translate3d(0,em(60),0)
  66.66%
    transform: translate3d(0,0,0)
  83.32%
    transform: translate3d(em(30),0,0)


@keyframes blue-ghost
  0%, 100%
    transform: translate3d(0,0,0)
  25%
    transform: translate3d(em(60),0,0)
  50%
    transform: translate3d(em(60),em(60),0)
  75%
    transform: translate3d(em(60),0,0)

@keyframes green-ghost
  0%, 100%
    transform: translate3d(0,0,0)
  50%
    transform: translate3d(em(-90),0,0)
  
@keyframes pacman-top
  to
    transform: rotate(-40deg)


@keyframes pacman-bottom
  to
    transform: rotate(40deg)
  
  
@keyframes pacman-move
  0%
    transform: translate3d(0, 0, 0) rotateZ(#{$pacman-init-angle}deg)

  @for $i from 1 through $pacman-steps-amount

    $point             : percentage($i/$pacman-steps-amount)

    $posX              : $pacman-init-X + $pacman-step * nth($pacman-X, $i)
    $posY              : $pacman-init-Y + $pacman-step * nth($pacman-Y, $i)
    $pacman-init-X     : $posX
    $pacman-init-Y     : $posY

    $need-rotation     : nth($pacman-angle, $i)
    $angle             : $pacman-init-angle + $pacman-angle-step * $need-rotation

    @if $need-rotation != 0
      #{$point}
        transform: translate3d(em($posX), em($posY), 0) rotateZ(#{$pacman-init-angle}deg)
      #{($point + 0.01%)}
        transform: translate3d(em($posX), em($posY), 0) rotateZ(#{$angle}deg)

    @else
      #{$point}
        transform: translate3d(em($posX), em($posY), 0) rotateZ(#{$angle}deg)

    $pacman-init-angle : $angle
            
          
!
            
              var labirint    = $('#pacman-labirint'),
    activeClass = 'show-pacman';

var showPacman = function() {
    labirint.addClass(activeClass);

    setTimeout(function() {
        labirint.removeClass(activeClass);
    }, 31000);
};

setTimeout(function() {
    showPacman();
    setInterval(function() {
        showPacman();
    }, 33000);
}, 1000);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console