Skip to content

Instantly share code, notes, and snippets.

@prateekjadhwani

prateekjadhwani/README.md

Last active April 28, 2016 14:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save prateekjadhwani/a8dec9040aa6d5c973470b21ce1254bb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save prateekjadhwani/a8dec9040aa6d5c973470b21ce1254bb to your computer and use it in GitHub Desktop.
Download ZIP
SVG2CSS : output files
Raw
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;
}
}
Raw
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;
}
Raw
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>
Raw
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"}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment