Skip to content

Instantly share code, notes, and snippets.

@ptvans

ptvans/_.md

Created December 16, 2013 05:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ptvans/7982678 to your computer and use it in GitHub Desktop.
Save ptvans/7982678 to your computer and use it in GitHub Desktop.
Download ZIP
manual transmission
Raw
_.md
Raw
config.json
{"description":"manual transmission","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/wng7cz4.png","controls":{"rpm":3760}}
Raw
inlet.js
// http://www.crawlpedia.com/rpm_gear_calculator.htm
// Speed = (RPM * tire diameter) / (Axle Ratio * Transmission Ratio * 336.13)
// Note: 336.13 is used to convert the result to RPM =
// [63358 inches per mile / (60 minutes per hour x Pi.)]
var speed = 0;
var diam = 24.6;
//wheel diameter based on General Tire Altimax HP 215/45R17 at 24.6 inches (839 revs per mile)
var axle = 4.05;
var convert = 336.13;
var gear = 2;
//RPM CONTROL
trib.rpm = tributary.control({name:"rpm", min: 900, max: 6100});
//transmission gear ratios for 2001 Saab 9-3 Viggen manual trans
//http://www.saabcentral.com/forums/showthread.php?t=62413
var t1 = 3.38;
var t2 = 1.76;
var t3 = 1.18;
var t4 = 0.89;
var t5 = 0.66;
var tratios = [t1, t2, t3, t4, t5];
//CHANGE GEAR BASED ON MOUSEMOVE
document.addEventListener('mousemove', function(event) {
updateSpeed(3);
});
speed = (trib.rpm * diam)/(axle * tratios[gear-1] * convert);
function updateSpeed(l){
speed = (trib.rpm * diam)/(axle * tratios[l-1] * convert);
console.log("function speed called")
}
//GAUGE ROTATION SCALES
var rpmScale = d3.scale.linear()
.domain([0, 6000])
.range([0, 190]);
var mphScale = d3.scale.linear()
.domain([0, 155])
.range([0, 334]);
//MOVE THE NEEDLES
d3.select("#needle-mph")
.attr("transform", "rotate("+ mphScale(speed) +" "+ 690 +" "+ 240 +")");
d3.select("#needle-rpm")
.attr("transform", "rotate("+ rpmScale(trib.rpm) +" "+ 285 +" "+ 305 +")");
//HIGHLIGHT GEAR SHIFT INDICATOR
d3.select("#gear-shift-"+ gear +"")
.classed("active", true);
//DISPLAY SPEED AND GEAR SELECTION
var svg = d3.select("svg")
.append("svg:g")
var equation = svg.append("g")
.classed("message", true)
.attr("transform", "translate("+ 25 +", "+ 100 +")");
equation.append("text")
.text("speed = ("+ parseInt(speed) +"), gear = ["+ gear +"]");
Raw
style.css
/*active gear select*/
.active text {
fill:white
}
.active circle {
fill:black;
}
Raw
test.html
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="800px"
viewBox="0 0 1024 800" enable-background="new 0 0 1024 800" xml:space="preserve">
<switch>
<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
<i:pgfRef xlink:href="#adobe_illustrator_pgf">
</i:pgfRef>
</foreignObject>
<g i:extraneous="self">
<g id="Layer_2">
<rect x="-13.475" y="-5" fill="#4D4D4F" width="1065.79" height="811.526"/>
</g>
<g id="Layer_1">
<g>
<g>
<path fill="#FFFFFF" d="M602.467,318.473c-0.49-0.54-0.973-1.089-1.452-1.64l7.856-6.821c0.434,0.499,0.869,0.989,1.31,1.478
L602.467,318.473z"/>
<path fill="#FFFFFF" d="M690.032,356.521l-0.175-10.406c1.362-0.023,2.718-0.068,4.068-0.141l0.566,10.391
C693.015,356.443,691.529,356.496,690.032,356.521z M733.448,347.318l-4.094-9.564c1.244-0.535,2.478-1.091,3.699-1.665
l4.452,9.403C736.168,346.127,734.813,346.734,733.448,347.318z M770.138,322.399l-7.384-7.331
c0.955-0.962,1.891-1.944,2.808-2.942l7.659,7.046C772.214,320.267,771.187,321.345,770.138,322.399z M794.797,285.498
l-9.604-4.003c0.521-1.252,1.021-2.516,1.495-3.791l9.752,3.63C795.919,282.732,795.368,284.121,794.797,285.498z
M580.361,282.578c-0.535-1.385-1.044-2.787-1.525-4.203l9.846-3.355c0.439,1.285,0.901,2.554,1.388,3.813L580.361,282.578z
M803.663,242.004l-10.405-0.101l0.004-0.876c0-1.061-0.017-2.126-0.049-3.188l10.401-0.306
c0.034,1.161,0.053,2.322,0.054,3.492L803.663,242.004z M583.086,239.053l-10.405-0.189c0.028-1.494,0.086-2.982,0.167-4.46
l10.392,0.591C583.161,236.344,583.11,237.698,583.086,239.053z M785.864,202.218c-0.502-1.257-1.025-2.503-1.57-3.741
l9.513-4.208c0.601,1.354,1.177,2.723,1.727,4.104L785.864,202.218z M591.561,199.571l-9.564-4.104
c0.59-1.373,1.205-2.729,1.847-4.073l9.397,4.465C592.657,197.086,592.096,198.323,591.561,199.571z M764.011,168.279
c-0.938-0.979-1.895-1.938-2.87-2.877l7.231-7.484c1.07,1.034,2.121,2.087,3.15,3.162L764.011,168.279z M614.349,166.222
l-7.311-7.408c1.06-1.045,2.14-2.072,3.239-3.076l7.013,7.69C616.29,164.338,615.31,165.271,614.349,166.222z M730.99,145.025
c-1.235-0.552-2.484-1.084-3.744-1.586l3.868-9.662c1.387,0.556,2.765,1.139,4.129,1.75L730.99,145.025z M647.98,143.886
l-3.98-9.613c1.372-0.568,2.759-1.11,4.155-1.626l3.608,9.761C650.491,142.876,649.229,143.373,647.98,143.886z
M691.631,135.989c-1.15-0.034-2.307-0.056-3.467-0.056l-0.581,0.005l-0.099-10.406l0.629-0.005c0.008,0,0.015,0,0.024,0
c1.311,0,2.571,0.022,3.827,0.061L691.631,135.989z"/>
<path fill="#FFFFFF" d="M650.165,350.135c-0.684-0.24-1.365-0.482-2.041-0.734l3.605-9.76c0.62,0.231,1.247,0.456,1.876,0.675
L650.165,350.135z"/>
</g>
<path fill="#FFFFFF" d="M597.044,297.385c0,1.152-0.934,2.081-2.082,2.081s-2.08-0.928-2.08-2.081c0-1.151,0.932-2.08,2.08-2.08
S597.044,296.234,597.044,297.385z"/>
<circle fill="#FFFFFF" cx="579.874" cy="258.908" r="2.082"/>
<path fill="#FFFFFF" d="M583.556,217.904c0,1.152-0.935,2.079-2.082,2.079c-1.151,0-2.082-0.927-2.082-2.079
c0-1.151,0.931-2.084,2.082-2.084C582.621,215.82,583.556,216.753,583.556,217.904z"/>
<circle fill="#FFFFFF" cx="598.257" cy="181.971" r="2.082"/>
<path fill="#FFFFFF" d="M630.169,152.351c0,1.148-0.933,2.077-2.081,2.077s-2.083-0.928-2.083-2.077
c0-1.153,0.935-2.083,2.083-2.083S630.169,151.197,630.169,152.351z"/>
<circle fill="#FFFFFF" cx="668.322" cy="137.433" r="2.082"/>
<circle fill="#FFFFFF" cx="709.355" cy="137.433" r="2.082"/>
<path fill="#FFFFFF" d="M749.834,152.351c0,1.148-0.934,2.077-2.082,2.077s-2.082-0.928-2.082-2.077
c0-1.153,0.934-2.083,2.082-2.083S749.834,151.197,749.834,152.351z"/>
<circle fill="#FFFFFF" cx="777.582" cy="181.971" r="2.082"/>
<circle fill="#FFFFFF" cx="752.262" cy="328.376" r="2.083"/>
<circle fill="#FFFFFF" cx="779.663" cy="297.327" r="2.08"/>
<circle fill="#FFFFFF" cx="796.311" cy="260.215" r="2.082"/>
<path fill="#FFFFFF" d="M796.312,217.9c0,1.147-0.932,2.078-2.083,2.078c-1.147,0-2.08-0.93-2.08-2.078
c0-1.154,0.933-2.084,2.08-2.084C795.381,215.816,796.312,216.746,796.312,217.9z"/>
<circle fill="#FFFFFF" cx="715.494" cy="345.541" r="2.081"/>
<path fill="#FFFFFF" d="M675.953,347.625c0,1.148-0.933,2.08-2.081,2.08c-1.15,0-2.081-0.932-2.081-2.08
c0-1.154,0.931-2.084,2.081-2.084C675.021,345.541,675.953,346.471,675.953,347.625z"/>
<path fill="#CCCC99" d="M696.397,329.852l-0.519-6.222c1.429-0.148,2.687-0.305,3.933-0.489l0.914,6.18
c-1.339,0.195-2.69,0.363-4.05,0.504L696.397,329.852z M736.693,315.584l-3.431-5.216c1.114-0.734,2.212-1.495,3.29-2.281
l3.684,5.038C739.075,313.974,737.895,314.794,736.693,315.584z M621.132,300.793c-0.961-1.063-1.898-2.152-2.812-3.263
l4.824-3.963c0.851,1.031,1.722,2.048,2.619,3.041L621.132,300.793z M765.756,284.297l-5.457-3.039
c0.652-1.167,1.272-2.352,1.871-3.555l5.592,2.772C767.123,281.765,766.453,283.039,765.756,284.297z M600.869,263.204
c-0.356-1.388-0.682-2.792-0.976-4.207l6.115-1.262c0.271,1.315,0.573,2.618,0.906,3.908L600.869,263.204z M776.989,243.092
l-6.242-0.162c0.019-0.713,0.028-1.418,0.028-2.135c0-0.628-0.007-1.255-0.02-1.876l6.241-0.139
c0.015,0.667,0.021,1.341,0.021,2.015C777.019,241.562,777.009,242.328,776.989,243.092z M606.436,221.911l-6.085-1.41
c0.327-1.404,0.687-2.797,1.078-4.178l6.007,1.706C607.071,219.312,606.737,220.604,606.436,221.911z M762.285,204.127
c-0.589-1.201-1.205-2.382-1.851-3.547l5.463-3.022c0.693,1.252,1.357,2.527,1.992,3.816L762.285,204.127z M624.426,186.504
l-4.729-4.076c0.937-1.086,1.901-2.157,2.891-3.201l4.527,4.301C626.194,184.497,625.297,185.491,624.426,186.504z
M736.776,173.676c-1.075-0.793-2.173-1.558-3.287-2.3l3.452-5.202c1.2,0.796,2.38,1.62,3.538,2.473L736.776,173.676z
M656.754,163.421l-2.311-5.798c1.331-0.532,2.678-1.03,4.04-1.499l2.034,5.901
C659.247,162.462,657.993,162.928,656.754,163.421z M700.081,158.489c-1.316-0.201-2.643-0.366-3.98-0.502l0.638-6.213
c1.436,0.148,2.86,0.33,4.272,0.543L700.081,158.489z"/>
<circle cx="688.918" cy="243.115" r="21.557"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M303.955,214.338
c14.933,3.166,28.671,8.849,41.878,20.388"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M254.931,217.365
c9.387-3.25,19.468-5.013,29.96-5.013c4.876,0,9.665,0.382,14.334,1.114"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M216.753,242.746
c9.245-10.29,20.787-18.473,33.817-23.747"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M195.099,285.875
c2.958-14.801,9.481-28.307,18.637-39.595"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M199.084,335.966
c-3.727-9.97-5.764-20.768-5.764-32.042c0-4.478,0.322-8.879,0.944-13.185"/>
<path fill="none" stroke="#F15A29" stroke-width="2" stroke-miterlimit="10" d="M374.354,284.304
c1.379,6.321,2.106,12.884,2.106,19.62c0,10.335-1.712,20.269-4.866,29.534"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M348.683,238.229
c11.258,11.843,20.122,25.406,24.509,41.359"/>
<circle cx="285.757" cy="302.884" r="17.343"/>
<polygon display="none" fill="#FBB040" stroke="#FBB040" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
711.437,225.947 607.597,324.305 605.419,322.068 706.351,220.736 710.764,221.52 "/>
<g>
<g>
<text transform="matrix(1 0 0 1 598.1514 285.9336)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">20</text>
</g>
<g>
<text transform="matrix(1 0 0 1 592.9463 244.626)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">40</text>
</g>
<g>
<text transform="matrix(1 0 0 1 601.3545 203.9082)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">60</text>
</g>
<g>
<text transform="matrix(1 0 0 1 631.0264 174.2393)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">80</text>
</g>
<g>
<text transform="matrix(1 0 0 1 664.2861 160.9814)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">100</text>
</g>
<g>
<text transform="matrix(1 0 0 1 705.0557 166.3486)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">120</text>
</g>
<g>
<text transform="matrix(1 0 0 1 741.8105 187.9355)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">140</text>
</g>
<g>
<text transform="matrix(1 0 0 1 757.9102 225.2495)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">160</text>
</g>
<g>
<text transform="matrix(1 0 0 1 760.1025 266.9146)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">180</text>
</g>
<g>
<text transform="matrix(1 0 0 1 741.4951 303.5308)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">200</text>
</g>
<g>
<text transform="matrix(1 0 0 1 705.5283 325.7847)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">220</text>
</g>
<g>
<text transform="matrix(1 0 0 1 663.165 331.145)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="13.2571">240</text>
</g>
</g>
<text transform="matrix(1 0 0 1 174.0698 335.5444)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="22.4229">0</text>
<text transform="matrix(1 0 0 1 172.6831 293.2251)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="22.4229">1</text>
<text transform="matrix(1 0 0 1 194.187 239.8091)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="22.4229">2</text>
<text transform="matrix(1 0 0 1 238.5835 209.979)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="22.4229">3</text>
<text transform="matrix(1 0 0 1 296.856 207.8999)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="22.4229">4</text>
<text transform="matrix(1 0 0 1 348.8843 232.4458)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="22.4229">5</text>
<text transform="matrix(1 0 0 1 380.1011 286.98)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="22.4229">6</text>
<text transform="matrix(1 0 0 1 383.1431 338.0483)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="22.4229">7</text>
<g>
<text transform="matrix(1 0 0 1 796.7119 224.4092)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">100</text>
<text transform="matrix(1 0 0 1 557.8447 318.2158)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">10</text>
<text transform="matrix(1 0 0 1 563.8115 176.0576)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">40</text>
<text transform="matrix(1 0 0 1 542.1084 222.7227)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">30</text>
<text transform="matrix(1 0 0 1 541.6074 272.6387)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">20</text>
<text transform="matrix(1 0 0 1 600.167 140.79)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">50</text>
<text transform="matrix(1 0 0 1 647.373 122.3398)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">60</text>
<text transform="matrix(1 0 0 1 697.793 122.3398)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">70</text>
<text transform="matrix(1 0 0 1 746.083 141.332)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">80</text>
<text transform="matrix(1 0 0 1 783.5225 177.1445)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">90</text>
<text transform="matrix(1 0 0 1 798.8818 274.2568)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">110</text>
<text transform="matrix(1 0 0 1 780.3496 319.9023)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">120</text>
<text transform="matrix(1 0 0 1 742.9121 357.3442)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">130</text>
<text transform="matrix(1 0 0 1 698.418 377.9614)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">140</text>
<text transform="matrix(1 0 0 1 644.5957 379.0454)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="23.6686">150</text>
</g>
<text transform="matrix(1 0 0 1 513.4873 342.9175)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="14.568">mph</text>
<text transform="matrix(1 0 0 1 514.6816 355.4048)" fill="#CCCC99" font-family="'Cantarell-Oblique'" font-size="11.4462">km/h</text>
<text transform="matrix(1 0 0 1 221.3657 349.3843)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="12.4572">1/min x1000</text>
<polygon display="none" fill="#FBB040" stroke="#FBB040" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
304.349,299.196 198.396,341.162 197.193,338.283 301.544,292.478 304.867,295.034 "/>
</g>
<g>
<g>
<path fill="none" stroke="#27AAE1" stroke-width="2" stroke-miterlimit="10" d="M165.178,339.302
c-3.478-11.529-5.348-23.756-5.348-36.42c0-69.547,56.38-125.928,125.928-125.928c58.603,0,107.856,40.031,121.907,94.239"/>
<g>
<polygon fill="#27AAE1" points="174.482,346.411 164.86,338.174 162.2,350.558 "/>
</g>
<g>
<rect x="406.648" y="264.695" transform="matrix(0.2637 0.9646 -0.9646 0.2637 561.759 -193.534)" fill="#27AAE1" width="2" height="13"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#27AAE1" stroke-width="2" stroke-miterlimit="10" d="M566.866,331.902
C548.711,306.988,538,276.302,538,243.115c0-22.284,4.829-43.438,13.498-62.477"/>
<g>
<polygon fill="#27AAE1" points="577.978,335.62 566.209,330.936 567.695,343.515 "/>
</g>
<g>
<rect x="550.519" y="174.148" transform="matrix(0.396 -0.9182 0.9182 0.396 167.232 615.5393)" fill="#27AAE1" width="2" height="13"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#27AAE1" stroke-width="2" stroke-miterlimit="10" d="M537.144,304.822
c-7.751-19.045-12.021-39.877-12.021-61.707c0-65.091,37.968-121.315,92.966-147.732"/>
<g>
<polygon fill="#27AAE1" points="547.021,311.137 536.756,303.718 535.122,316.279 "/>
</g>
<g>
<rect x="617.105" y="88.911" transform="matrix(0.8885 -0.4589 0.4589 0.8885 25.1404 294.2822)" fill="#27AAE1" width="2" height="13"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#27AAE1" stroke-width="2" stroke-miterlimit="10" d="M511.427,233.401
c5.044-93.652,82.582-168.037,177.491-168.037c53.204,0,100.949,23.375,133.524,60.416
c8.829,10.04,16.543,21.082,22.951,32.936"/>
<g>
<polygon fill="#27AAE1" points="517.644,243.337 511.539,232.239 504.688,242.893 "/>
</g>
<g>
<rect x="844.37" y="152.227" transform="matrix(0.4961 0.8682 -0.8682 0.4961 563.7625 -654.0105)" fill="#27AAE1" width="2" height="13"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#27AAE1" stroke-width="2" stroke-miterlimit="10" d="M527.293,139.519
c34.134-53.146,93.769-88.357,161.625-88.357c106.013,0,191.954,85.941,191.954,191.953
c-0.002,46.02-16.197,88.258-43.199,121.326"/>
<g>
<polygon fill="#27AAE1" points="527.768,151.225 527.966,138.56 516.735,144.418 "/>
</g>
<g>
<rect x="836.658" y="357.931" transform="matrix(-0.6202 0.7845 -0.7845 -0.6202 1643.0264 -66.6879)" fill="#27AAE1" width="2" height="13"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#27AAE1" stroke-width="2" stroke-miterlimit="10" d="M581.029,67.412
c31.385-19.312,68.335-30.451,107.889-30.451c113.856,0,206.154,92.3,206.154,206.155
c0,113.857-92.298,206.152-206.154,206.152c-24.918,0-48.803-4.419-70.914-12.519"/>
<g>
<polygon fill="#27AAE1" points="576.367,78.158 582.047,66.836 569.386,67.235 "/>
</g>
<g>
<rect x="617.011" y="430.23" transform="matrix(-0.9446 -0.3282 0.3282 -0.9446 1058.4417 1052.1088)" fill="#27AAE1" width="1.999" height="13"/>
</g>
</g>
</g>
<text transform="matrix(1 0 0 1 26.0518 29.6025)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="24">HOW TO USE</text>
<text transform="matrix(1 0 0 1 26.0518 68.0327)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="38">MANUAL TRANSMISSION</text>
<g>
<rect x="643.587" y="532.01" fill="#FFFFFF" width="8" height="52.078"/>
<rect x="643.587" y="554.049" fill="#FFFFFF" width="99.334" height="8"/>
<rect x="688.921" y="532.01" fill="#FFFFFF" width="8" height="52.078"/>
<rect x="734.921" y="532.01" fill="#FFFFFF" width="8" height="52.078"/>
</g>
<g class="gear-shift" id="gear-shift-1">
<circle fill="#FFFFFF" cx="647.587" cy="513.588" r="19.5"/>
<text transform="matrix(1 0 0 1 637.3848 520.4219)" font-family="'Cantarell-Oblique'" font-size="23.6686">1</text>
</g>
<g class="gear-shift" id="gear-shift-3">
<circle fill="#FFFFFF" cx="692.92" cy="513.588" r="19.5"/>
<text transform="matrix(1 0 0 1 683.7422 520.4219)" font-family="'Cantarell-Oblique'" font-size="23.6686">3</text>
</g>
<g class="gear-shift" id="gear-shift-5">
<circle fill="#FFFFFF" cx="738.92" cy="513.588" r="19.5"/>
<text transform="matrix(1 0 0 1 729.3262 520.4219)" font-family="'Cantarell-Oblique'" font-size="23.6686">5</text>
</g>
<g class="gear-shift" id="gear-shift-2">
<circle fill="#FFFFFF" cx="647.587" cy="602.255" r="19.5"/>
<text transform="matrix(1 0 0 1 637.3848 610.9229)" font-family="'Cantarell-Oblique'" font-size="23.6686">2</text>
</g>
<g class="gear-shift" id="gear-shift-4">
<circle fill="#FFFFFF" cx="692.92" cy="602.255" r="19.5"/>
<text transform="matrix(1 0 0 1 683.7422 610.9229)" font-family="'Cantarell-Oblique'" font-size="23.6686">4</text>
</g>
<g class="gear-shift" id="gear-shift-R">
<circle fill="#FFFFFF" cx="738.92" cy="602.255" r="19.5"/>
<text transform="matrix(1 0 0 1 728.5293 610.9229)" font-family="'Cantarell-Oblique'" font-size="23.6686">R</text>
</g>
<polygon points="370.963,548.001 324.463,602.255 370.963,602.255 "/>
<polygon points="255.894,547.588 217.35,592.335 255.894,592.335 "/>
<polygon points="287.333,592.335 324.463,592.335 324.463,546.588 "/>
<text transform="matrix(1 0 0 1 343.2998 529)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="12">GAS</text>
<text transform="matrix(1 0 0 1 281.5845 529)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="12">BRAKE</text>
<text transform="matrix(1 0 0 1 211.6465 529)" fill="#FFFFFF" font-family="'Cantarell-Oblique'" font-size="12">CLUTCH</text>
</g>
<g id="Layer_4">
<g id="pedal-gas">
<polygon fill="#FFFFFF" points="370.963,543.588 343.894,543.588 325.418,565.283 329.444,569.951 301.931,602.255 321,602.255
"/>
</g>
<g id="pedal-brake">
<polygon fill="#FFFFFF" points="324.463,543.588 284.394,543.588 266.918,563.283 307.428,563.938 "/>
</g>
<g id="pedal-clutch">
<polygon fill="#FFFFFF" points="255.894,543.588 232.825,543.588 214.35,565.283 237.079,565.854 "/>
</g>
<g id="arc5">
<rect x="468.695" y="23.443" opacity="0" fill="#FFFFFF" width="439.952" height="439.951"/>
<circle fill="#FFFFFF" cx="574.666" cy="71.086" r="12"/>
<text transform="matrix(1 0 0 1 567.3828 76.6636)" font-family="'Cantarell-BoldOblique'" font-size="16">5</text>
</g>
<g id="arc4">
<rect x="482.518" y="37.266" opacity="0" fill="#FFFFFF" width="412.303" height="412.304"/>
<circle fill="#FFFFFF" cx="521.789" cy="147.889" r="12"/>
<text transform="matrix(1 0 0 1 514.1855 153.4668)" font-family="'Cantarell-BoldOblique'" font-size="16">4</text>
</g>
<g id="arc3">
<rect x="496.778" y="51.526" opacity="0" fill="#FFFFFF" width="383.785" height="383.785"/>
<circle fill="#FFFFFF" cx="511.166" cy="243.115" r="12"/>
<text transform="matrix(1 0 0 1 503.8833 248.6929)" font-family="'Cantarell-BoldOblique'" font-size="16">3</text>
</g>
<g id="arc2">
<rect x="510.919" y="65.667" opacity="0" fill="#FFFFFF" width="355.503" height="355.503"/>
<circle fill="#FFFFFF" cx="539.902" cy="310.012" r="12"/>
<text transform="matrix(1 0 0 1 532.6191 315.5894)" font-family="'Cantarell-BoldOblique'" font-size="16">2</text>
</g>
<g id="arc1">
<rect x="524.875" y="79.623" opacity="0" fill="#FFFFFF" width="327.591" height="327.592"/>
<circle fill="#FFFFFF" cx="569.133" cy="333.458" r="12"/>
<text transform="matrix(1 0 0 1 561.8496 339.0361)" font-family="'Cantarell-BoldOblique'" font-size="16">1</text>
</g>
<g id="arc0">
<rect x="148.946" y="166.071" opacity="0" fill="#FFFFFF" width="273.622" height="273.622"/>
<circle fill="#FFFFFF" cx="167.8" cy="348.485" r="12"/>
<text transform="matrix(1 0 0 1 159.9814 354.0625)" font-family="'Cantarell-BoldOblique'" font-size="16">R</text>
</g>
<g id="needle-mph">
<rect x="538.496" y="93.244" opacity="0" fill="#FFFFFF" width="300.35" height="300.35"/>
<polygon fill="#FBB040" stroke="#FBB040" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
711.437,225.947 607.597,324.305 605.419,322.068 706.351,220.736 710.764,221.52 "/>
</g>
<g id="needle-rpm">
<rect x="148.946" y="166.071" opacity="0" fill="#FFFFFF" width="273.622" height="273.622"/>
<polygon fill="#FBB040" stroke="#FBB040" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
304.349,299.196 198.396,341.162 197.193,338.283 301.544,292.478 304.867,295.034 "/>
</g>
</g>
<g id="Layer_3">
</g>
</g>
</switch>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment