SVG2CSS : output files

README.md

###SVG2CSS Project File

Name : Donkey Kong Stage

Link : https://prateekjadhwani.github.io/svg2css/#a8dec9040aa6d5c973470b21ce1254bb

animations.css

@keyframes dropball {
	0% {
		left: 50px;
		top: 15px;
		transform: rotate(0deg) ;
	}
	1% {
		left: 70.9805679321289px;
	}
	2% {
		left: 91.96117401123047px;
		top: 16.243682861328125px;
		transform: rotate(64.65706787109374deg) ;
	}
	3% {
		left: 133.92234802246094px;
		top: 17.487396240234375px;
	}
	4% {
		left: 154.90291595458984px;
		transform: rotate(129.3141632080078deg) ;
	}
	5% {
		left: 175.88348388671875px;
		top: 18.7310791015625px;
		transform: rotate(193.9712448120117deg) ;
	}
	6% {
		left: 196.86405181884766px;
	}
	7% {
		left: 217.84461975097656px;
		top: 19.974761962890625px;
		transform: rotate(258.6283058166504deg) ;
	}
	8% {
		left: 259.80579376220703px;
		top: 21.218475341796875px;
	}
	9% {
		left: 280.78638076782227px;
		transform: rotate(323.28539428710934deg) ;
	}
	10% {
		left: 301.7669677734375px;
		top: 22.462158203125px;
		transform: rotate(331.9181213378906deg) rotate(266.9385772705078deg) rotate(201.959033203125deg) rotate(136.97946166992188deg) rotate(71.99989013671875deg) rotate(7.020318603515625deg) ;
	}
	11% {
		left: 322.7475357055664px;
	}
	12% {
		left: 343.72812271118164px;
		top: 23.705841064453125px;
		transform: rotate(57.67163085937499deg) ;
	}
	13% {
		left: 385.6892967224121px;
		top: 24.94952392578125px;
		transform: rotate(122.32867126464845deg) ;
	}
	14% {
		left: 406.669864654541px;
	}
	15% {
		left: 427.6504325866699px;
		top: 26.1932373046875px;
		transform: rotate(186.98576660156252deg) ;
	}
	16% {
		left: 448.6310386657715px;
	}
	17% {
		left: 469.6116065979004px;
		top: 27.436920166015625px;
		transform: rotate(251.64285507202146deg) ;
	}
	18% {
		left: 511.5727758407593px;
		top: 28.68060302734375px;
	}
	19% {
		left: 532.5533437728882px;
		transform: rotate(316.29988861083984deg) ;
	}
	21% {
		left: 550px;
		top: 49.307830810546875px;
		transform: rotate(50.686029052734376deg) ;
	}
	25% {
		left: 550px;
		top: 115px;
		transform: rotate(179.99982147216795deg) ;
	}
	26% {
		left: 529.0194320678711px;
	}
	27% {
		left: 508.03882598876953px;
		top: 116.24368286132812px;
		transform: rotate(115.34279479980468deg) ;
	}
	28% {
		left: 466.0776901245117px;
		top: 117.48739624023438px;
	}
	29% {
		left: 445.0971221923828px;
		transform: rotate(50.685644531250006deg) ;
	}
	30% {
		left: 424.11651611328125px;
		top: 118.7310791015625px;
		transform: rotate(14.04107666015625deg) rotate(79.020703125deg) rotate(144.0002197265625deg) rotate(208.979736328125deg) rotate(273.9592529296875deg) rotate(338.9389892578125deg) ;
	}
	31% {
		left: 403.13594818115234px;
		transform: rotate(316.29954528808594deg) ;
	}
	32% {
		left: 382.15538024902344px;
		top: 119.97476196289061px;
	}
	33% {
		left: 340.19418716430664px;
		top: 121.21847534179688px;
		transform: rotate(251.64250488281252deg) ;
	}
	34% {
		left: 319.2136573791504px;
	}
	35% {
		left: 298.2330513000488px;
		top: 122.46215820312499px;
		transform: rotate(186.98546447753907deg) ;
	}
	36% {
		left: 277.25244522094727px;
	}
	37% {
		left: 256.2718391418457px;
		top: 123.70584106445314px;
		transform: rotate(122.32842407226562deg) ;
	}
	38% {
		left: 214.31068420410156px;
		top: 124.94952392578125px;
		transform: rotate(57.671191406249996deg) ;
	}
	39% {
		left: 193.330078125px;
	}
	40% {
		left: 172.34954833984375px;
		top: 126.19323730468751px;
		transform: rotate(7.020703125deg) rotate(72.0002197265625deg) rotate(136.979736328125deg) rotate(201.9592529296875deg) rotate(266.9389892578125deg) rotate(331.918505859375deg) ;
	}
	41% {
		left: 151.3689422607422px;
		transform: rotate(323.28517456054686deg) ;
	}
	42% {
		left: 130.38833618164062px;
		top: 127.43692016601562px;
	}
	43% {
		left: 88.42723846435547px;
		top: 128.68060302734375px;
		transform: rotate(258.6281341552735deg) ;
	}
	44% {
		left: 67.4466323852539px;
	}
	46% {
		left: 50px;
		top: 149.30783081054688px;
		transform: rotate(129.31386108398436deg) ;
	}
	50% {
		left: 50px;
		top: 215px;
		transform: rotate(0.0001373291015625deg) ;
	}
	51% {
		left: 70.98068237304688px;
	}
	52% {
		left: 91.96121215820312px;
		top: 216.2436981201172px;
		transform: rotate(64.657177734375deg) ;
	}
	53% {
		left: 133.9223861694336px;
		top: 217.4873809814453px;
	}
	54% {
		left: 154.90291595458984px;
		transform: rotate(129.31421813964843deg) ;
	}
	55% {
		left: 175.8835220336914px;
		top: 218.73107910156253px;
		transform: rotate(193.9714645385742deg) ;
	}
	56% {
		left: 196.86412811279297px;
	}
	57% {
		left: 217.84465789794922px;
		top: 219.97476196289062px;
		transform: rotate(258.6284980773926deg) ;
	}
	58% {
		left: 259.80581283569336px;
		top: 221.21846008300778px;
	}
	59% {
		left: 280.78649520874023px;
		transform: rotate(323.28553161621096deg) ;
	}
	60% {
		left: 301.7670249938965px;
		top: 222.46214294433597px;
		transform: rotate(331.9182861328125deg) rotate(266.93876953125deg) rotate(201.959033203125deg) rotate(136.979736328125deg) rotate(72deg) rotate(7.020263671875deg) ;
	}
	61% {
		left: 322.74755477905273px;
	}
	62% {
		left: 343.7282371520996px;
		top: 223.70584106445312px;
		transform: rotate(57.67130126953125deg) ;
	}
	63% {
		left: 385.6892967224121px;
		top: 224.9495391845703px;
		transform: rotate(122.3285614013672deg) ;
	}
	64% {
		left: 406.6699695587158px;
	}
	65% {
		left: 427.65050888061523px;
		top: 226.19322204589844px;
		transform: rotate(186.98538208007812deg) ;
	}
	66% {
		left: 448.6310386657715px;
	}
	67% {
		left: 469.6117115020752px;
		top: 227.43692016601562px;
		transform: rotate(251.642635345459deg) ;
	}
	68% {
		left: 511.5727758407593px;
		top: 228.68061828613284px;
	}
	69% {
		left: 532.5534558296204px;
		transform: rotate(316.29988861083984deg) ;
	}
	71% {
		left: 550px;
		top: 249.3078308105469px;
		transform: rotate(50.685919189453124deg) ;
	}
	75% {
		left: 550px;
		top: 315px;
		transform: rotate(180deg) ;
	}
	76% {
		left: 529.0193939208984px;
	}
	77% {
		left: 508.0388641357422px;
		top: 316.24369049072266px;
		transform: rotate(115.34279479980468deg) ;
	}
	78% {
		left: 466.07765197753906px;
		top: 317.4873809814453px;
	}
	79% {
		left: 445.0971221923828px;
		transform: rotate(50.68597412109375deg) ;
	}
	80% {
		left: 424.1164779663086px;
		top: 318.7310791015625px;
		transform: rotate(14.040966796874999deg) rotate(79.020263671875deg) rotate(144deg) rotate(208.979736328125deg) rotate(273.959033203125deg) rotate(338.93876953125deg) ;
	}
	81% {
		left: 403.13594818115234px;
		transform: rotate(316.29998474121095deg) ;
	}
	82% {
		left: 382.15538024902344px;
		top: 319.97476959228516px;
	}
	83% {
		left: 340.19418716430664px;
		top: 321.2184524536133px;
		transform: rotate(251.64272460937502deg) ;
	}
	84% {
		left: 319.2136573791504px;
	}
	85% {
		left: 298.2329750061035px;
		top: 322.46214294433594px;
		transform: rotate(186.98546447753907deg) ;
	}
	86% {
		left: 277.25244522094727px;
	}
	87% {
		left: 256.271915435791px;
		top: 323.7058410644531px;
		transform: rotate(122.32864379882812deg) ;
	}
	88% {
		left: 214.31068420410156px;
		top: 324.9495315551758px;
		transform: rotate(57.6714111328125deg) ;
	}
	89% {
		left: 193.3301544189453px;
	}
	90% {
		left: 172.34947204589844px;
		top: 326.19322204589844px;
		transform: rotate(7.020263671875deg) rotate(72deg) rotate(136.979736328125deg) rotate(201.959033203125deg) rotate(266.93876953125deg) rotate(331.91806640625deg) ;
	}
	91% {
		left: 151.3689422607422px;
		transform: rotate(323.28539428710934deg) ;
	}
	92% {
		left: 130.38841247558594px;
		top: 327.4369201660156px;
	}
	93% {
		left: 88.42723846435547px;
		top: 328.6806106567383px;
		transform: rotate(258.6281341552735deg) ;
	}
	94% {
		left: 67.44670867919922px;
	}
	96% {
		left: 50px;
		top: 349.3078308105469px;
		transform: rotate(129.31408081054687deg) ;
	}
	100% {
		left: 50px;
		top: 415px;
		transform: rotate(0deg) ;
	}
	20% {
		top: 36.169403076171875px;
		transform: rotate(338.9384399414063deg) rotate(273.95892333984375deg) rotate(208.979296875deg) rotate(143.9997802734375deg) rotate(79.020263671875deg) rotate(14.04063720703125deg) ;
	}
	22% {
		top: 69.01547241210938px;
	}
	23% {
		top: 88.72311401367188px;
		transform: rotate(115.34317932128906deg) ;
	}
	24% {
		top: 101.861572265625px;
	}
	45% {
		top: 136.16940307617188px;
		transform: rotate(193.97110748291018deg) ;
	}
	47% {
		top: 169.01548767089844px;
	}
	48% {
		top: 188.72314453125px;
		transform: rotate(64.65682067871094deg) ;
	}
	49% {
		top: 201.861572265625px;
	}
	70% {
		top: 236.16940307617185px;
		transform: rotate(338.93876953125deg) rotate(273.959033203125deg) rotate(208.979736328125deg) rotate(144deg) rotate(79.020263671875deg) rotate(14.040966796874999deg) ;
	}
	72% {
		top: 269.0154571533203px;
	}
	73% {
		top: 288.7231140136719px;
		transform: rotate(115.34273986816407deg) ;
	}
	74% {
		top: 301.8615417480469px;
	}
	95% {
		top: 336.16942596435547px;
		transform: rotate(193.97132720947263deg) ;
	}
	97% {
		top: 369.0154838562012px;
	}
	98% {
		top: 388.72314262390137px;
		transform: rotate(64.65726013183594deg) ;
	}
	99% {
		top: 401.8615417480469px;
	}
}

base.css

body {
  background: black;
}

.path div {
  position: relative;
  width: 55px;
  height: 20px;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}
.path div:before {
  content: '';
  height: 2px;
  width: 30px;
  position: absolute;
  top: 10px;
  left: 0px;
  background: red;
  transform: rotate(-45deg);
}
.path div:after {
  content: '';
  height: 2px;
  width: 30px;
  position: absolute;
  top: 10px;
  left: 25px;
  background: red;
  transform: rotate(45deg);
}

.left {
  top: 2px;
}
.left div {
  left: 55px;
}

.right {
  top: -2px;
}
.right div {
  right: 55px;
}

.lane {
	position: absolute;
}

.lane:nth-child(odd) {
  left: 0px;
}

.lane:nth-child(even) {
  left: 580px
}

.top-50 {
  top: 50px;
}

.top-150 {
  top: 150px;
}

.top-250 {
  top: 250px;
}

.top-450 {
  top: 350px;
}

.ball {
  position: absolute;
  width: 30px;
  height: 30px;
  background: rgba(255, 87, 51, 0.9);
  border-radius: 50%;
  border: 3px solid rgba(255, 195, 0, 0.9);
  animation: dropball 10s infinite;
}
.ball:after {
  content: '';
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: blue;
  top: 5px;
  left: 5px;
}

index.html

<div class="path start left lane top-50">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="path start right lane top-150">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div><div class="path start left lane top-250">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="path start right lane top-450">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div><div class="path start left lane top-50">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="path start right lane top-150">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="ball"></div>

svg.json

{
"dropball": [{"path":"M 0 100 L 20 0 H 25 L 45 100 H 50 L 70 0 H 75 L 95 100 H 100","is10":false,"property":"left","unit":"px","minValue":"50","maxValue":"550","strokeColor":"#6c49c9"},{"path":"M 0 100 L 20 96.25 L 25 75 L 45 71.25 L 50 50 L 70 46.25 L 75 25 L 95 21.25 L 100 0","is10":false,"property":"top","unit":"px","minValue":"15","maxValue":"415","strokeColor":"#44e88d"},{"path":"M 0 100 L 10 0 V 100 L 20 0 V 100 L 25 50 L 30 100 V 0 L 40 100 V 0 L 50 100 L 60 0 V 100 L 70 0 V 100 L 75 50 L 80 100 V 0 L 90 100 V 0 L 100 100","is10":false,"property":"rotate","unit":"deg","minValue":"0","maxValue":"360","strokeColor":"#5a449f"}]}