SVGEvent
: Events for SVGKit using SVGCanvas
starting at
going to
/
3
0: enableDrag
function(c) { c.text("Drag red square. Blue one follows", 5, 10) c.fillStyle = "rgb(200,0,0)"; var r1 = c.fillRect (20, 20, 50, 50); c.fillStyle = "rgba(0, 0, 200, 0.5)"; var r2 = c.fillRect (40, 40, 50, 50); c.svg.enableDrag(r1, null, null, null, [r1, r2]) c.svg.enableDrag(r2) }
Drag red square. Blue one follows
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text fill="#000000" stroke="none" x="5" y="10"> Drag red square. Blue one follows</text> <rect fill="#c80000" height="50" stroke="none" width="50" x="20" y="20"/> <rect fill="#0000c8" fill-opacity="0.5" height="50" stroke="none" width="50" x="40" y="40"/> </svg>
1: enableDrag2
function(c) { c.text("Drag red square. Blue one follows", 5, 10) c.translate(20,20) c.rotate(0.1) c.fillStyle = "rgb(200,0,0)"; var r1 = c.fillRect (20, 20, 50, 50); c.fillStyle = "rgba(0, 0, 200, 0.5)"; var r2 = c.fillRect (40, 40, 50, 50); c.svg.enableDrag(r1, null, null, null, [r1, r2]) c.svg.enableDrag(r2) }
Drag red square. Blue one follows
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text fill="#000000" stroke="none" x="5" y="10"> Drag red square. Blue one follows</text> <rect fill="#c80000" height="50" stroke="none" transform="translate(20,20)rotate(5.729577951308232)" width="50" x="20" y="20"/> <rect fill="#0000c8" fill-opacity="0.5" height="50" stroke="none" transform="translate(20,20)rotate(5.729577951308232)" width="50" x="40" y="40"/> </svg>
2: enableRotate
function(c) { c.text("Drag red square around circle. Blue one follows", 5, 10) c.fillStyle = "rgb(200,0,0)"; var r1 = c.fillRect(150, 75, 50, 50); c.fillStyle = "rgba(0, 0, 200, 0.5)"; var r2 = c.fillRect(0, 0, 50, 50); c.fillStyle = "rgba(100, 100, 100, 0.7)"; c.fillCircle(100, 100, 20); c.svg.enableRotate(r1, new MochiKit.Style.Coordinates(100,100), null, null, null, [r1, r2]) c.svg.enableRotate(r2) }
Drag red square around circle. Blue one follows
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text fill="#000000" stroke="none" x="5" y="10"> Drag red square around circle. Blue one follows</text> <rect fill="#c80000" height="50" stroke="none" width="50" x="150" y="75"/> <rect fill="#0000c8" fill-opacity="0.5" height="50" stroke="none" width="50" x="0" y="0"/> <circle cx="100" cy="100" fill="#646464" fill-opacity="0.7" r="20" stroke="none"/> </svg>
3: interactive_gears
function (c) { var n = 15 // Spokes on gear var bottom = 85 // Length of bottom line var diagonal = 70 // Distance between centers of gears. var center = 100 // (center, center) is the middle of the canvas. var thickness = 25; // Thickness of ZW Piece var height = Math.sqrt(diagonal*diagonal-bottom*bottom/4) // vertical difference of two axes. var r = diagonal/2 // Radius of the gear (between the outer and inner teeth) var a = Math.acos(bottom/(2*diagonal)) // Half-angle through which it rotates (angle of Z initially) var rectangle_width = r+diagonal+bottom/2+1.5*thickness var rectangle_height = 2*height+r+1.3*thickness // + half of the width of the ZW bars. //var gear_diagonal = 3.5; // Big var gear_diagonal = 2.0; // Small var scale = gear_diagonal/diagonal //Radii of the two arcs of numbers var r1 = diagonal //var r1 = diagonal-thickness //var r2 = bottom // Too close to the center, but also blocked by top of Z comming around. //var r2 = (diagonal+bottom)/2 var r2 = diagonal-thickness*0.9 var medium = 'rgba(0, 0, 0, 0.3)' var light = 'rgba(0, 0, 0, 0.1)' var black = 'rgb(0, 0, 0)' c.strokeStyle = medium c.strokeRect(center-bottom/2-r-thickness/2, center-height-thickness, rectangle_width, rectangle_height) log('scale:', scale, 'width:',rectangle_width*scale, 'in height:', rectangle_height*scale, 'in. To get inches scale('+rectangle_height*scale/1.61+')') c.strokeStyle = medium ZWstyle = function() { c.lineWidth = thickness c.strokeStyle = light c.lineCap = "round" c.lineJoin = "round" } // Draw center circle c.fillStyle = 'red' center_circ = c.fillCircle(center,center, thickness/3) // Draw Circles for times c.lineWidth = 1 c.beginPath() // arc(x, y, radius, startAngle, endAngle, anticlockwise) //c.arc(center, center, r1, 0, -2*a, true) // On Top //c.arc(center, center, r1, a, -a, true) // On Side var da = 9/180*Math.PI c.arc(center, center, r1-thickness/2, a+da/2, -a-da/2, true) c.stroke() c.beginPath() c.arc(center, center, r1+thickness/2, -a-da/2, a+da/2, false) c.stroke() c.beginPath() c.moveTo(center+(r1-thickness/4)*Math.cos(a+da), center+(r1-thickness/4)*Math.sin(a+da)) c.lineTo(center+(r1+thickness/4)*Math.cos(a+da), center+(r1+thickness/4)*Math.sin(a+da)) c.stroke() c.beginPath() c.moveTo(center+(r1-thickness/4)*Math.cos(-a-da), center+(r1-thickness/4)*Math.sin(-a-da)) c.lineTo(center+(r1+thickness/4)*Math.cos(-a-da), center+(r1+thickness/4)*Math.sin(-a-da)) c.stroke() // Bottom c.beginPath() //c.arc(center-bottom/2, center+height, r2, 0, -2*a, true) da = 12/180*Math.PI c.arc(center-bottom/2, center+height, r2-thickness/2, da/2, -2*a-da/2, true) c.stroke() c.beginPath() c.arc(center-bottom/2, center+height, r2+thickness/2, -2*a-da/2, da/2, false) c.stroke() c.beginPath() c.moveTo(center-bottom/2+(r2-thickness/4)*Math.cos(da), center+height+(r2-thickness/4)*Math.sin(da)) c.lineTo(center-bottom/2+(r2+thickness/4)*Math.cos(da), center+height+(r2+thickness/4)*Math.sin(da)) c.stroke() c.beginPath() c.moveTo(center-bottom/2+(r2-thickness/4)*Math.cos(-2*a-da), center+height+(r2-thickness/4)*Math.sin(-2*a-da)) c.lineTo(center-bottom/2+(r2+thickness/4)*Math.cos(-2*a-da), center+height+(r2+thickness/4)*Math.sin(-2*a-da)) c.stroke() // Draw the numbers c.fillStyle = 'rgb(100, 0, 100)' //c.textAlign = 'center' c.textAnchor = 'middle' c.fontFamily = 'Verdana' c.fontSize = '14' c.fontWeight = 'bold' //t = c.text("1234567890", 10, 10) //var h = t.getBBox().height // For some reason this returns (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox] var h = 10/2 var i // Draw numbers 12-6 for (i=0; i<=6; i++) { var text = ""+i if (i==0) { text = "12" } // On Side var x = center + r1 * Math.cos(-a+2*i*a/6) var y = center+h + r1 * Math.sin(-a+2*i*a/6) // On Top //var x = center + r1 * Math.cos(-2*a+2*i*a/6) //var y = center+h + r1 * Math.sin(-2*a+2*i*a/6) // On Bottom //var x = center-bottom/2 + r2 * Math.cos(-2*a+2*(i)*a/6) //var y = center+height+h + r2 * Math.sin(-2*a+2*(i)*a/6) c.text(text, x, y) } // Draw numbers 6-12 for (i=6; i<=12; i++) { var text = ""+i; // On Side //var x = center + r1 * Math.cos(-a+2*(i-6)*a/6) //var y = center+h + r1 * Math.sin(-a+2*(i-6)*a/6) // On Bottom var x = center-bottom/2 + r2 * Math.cos(-2*a+2*(i-6)*a/6) var y = center+height+h + r2 * Math.sin(-2*a+2*(i-6)*a/6) c.text(""+i, x, y) } // Draw fixed segment. c.save() ZWstyle() c.beginPath() c.moveTo(center,center) c.lineTo(center-bottom/2,center+height) c.stroke() c.restore() // Draw Top of Z (up and over) then top gear as a group. c.save() c.translate(center,center) var g1 = c.newGroup() ZWstyle() c.beginPath() c.moveTo(0,0) c.lineTo(bottom/2,-height) /* // If you want two seperate pieces, uncomment these three lines. c.stroke() c.beginPath() c.moveTo(bottom/2,-height) */ c.lineTo(-bottom/2,-height) c.stroke() c.fillStyle = 'rgba(0,0,255,0.3)' c.fillCircle(bottom/2,-height, thickness/2.5) c.lineWidth = 1 c.fillStyle = 'rgba(0, 0, 0, 0.1)' c.strokeStyle = medium c.beginPath() c.rotate(-a+Math.PI/n) c.gear(n, .2,r-1, .3,r+1, .4,r+2, .6,r+2, .7,r+1, .8,r-1); c.fill() //c.stroke() c.restore() // Draw bottom of Z (draw to right) then bottom gear as a group. c.save() c.translate(center-bottom/2,center+height) var g2 = c.newGroup() ZWstyle() c.beginPath() c.moveTo(0,0) c.lineTo(bottom,0) c.stroke() c.fillStyle = 'rgba(0,0,255,0.3)' c.fillCircle(r2,0, thickness/2.5) c.lineWidth = 1 c.fillStyle = 'rgba(0, 0, 0, 0.1)' c.strokeStyle = medium c.beginPath() c.rotate(-a) c.gear(n, .2,r-1, .3,r+1, .4,r+2, .6,r+2, .7,r+1, .8,r-1); c.fill() //c.stroke() c.restore() log("Max Angle:", 2*a/Math.PI*180) var downCallback = function(g1, g2, e, drag) { drag.setOriginalTransforms([g1, g2]) } var rotateGears = function(c, g1, g2, sign, e, drag) { g1.setAttribute('transform', c.svg.rotate(drag.original_transforms[0], sign*drag.rotate.degrees)); g2.setAttribute('transform', c.svg.rotate(drag.original_transforms[1], -sign*drag.rotate.degrees)); } c.svg.enableRotate(g1, new MochiKit.Style.Coordinates(center,center), partial(downCallback, g1 ,g2), partial(rotateGears, c,g1,g2,+1), null, [] ) c.svg.enableRotate(g2, new MochiKit.Style.Coordinates(center-bottom/2,center+height), partial(downCallback, g1 ,g2), partial(rotateGears, c,g1,g2,-1), null, [] ) }
12
1
2
3
4
5
6
6
7
8
9
10
11
12
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="none" height="178.74297730643494" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="0.3" stroke-width="1" width="185" x="10" y="19.37851134678253"/> <circle cx="100" cy="100" fill="#ff0000" r="8.333333333333334" stroke="none"/> <path d=" M 131.21836853027344,148.28729248046875 A 57.5,57.5 0 0,0 131.21836853027344,51.71269989013672" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="0.3" stroke-width="1"/> <path d=" M 144.7915802001953,30.718223571777344 A 82.5,82.5 0 0,1 144.7915802001953,169.2817840576172" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="0.3" stroke-width="1"/> <path d=" M 130.30459594726562,156.08648681640625 L 136.24667358398438,167.08383178710938" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="0.3" stroke-width="1"/> <path d=" M 130.30459594726562,43.91351318359375 L 136.24667358398438,32.91616439819336" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="0.3" stroke-width="1"/> <path d=" M 92.30826568603516,159.2799835205078 A 35,35 0 0,0 44.824005126953125,122.9975814819336" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="0.3" stroke-width="1"/> <path d=" M 35.76972198486328,99.69479370117188 A 60,60 0 0,1 117.17131042480469,161.89320373535156" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="0.3" stroke-width="1"/> <path d=" M 97.84858703613281,164.19784545898438 L 110.07543182373047,166.79673767089844" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="0.3" stroke-width="1"/> <path d=" M 38.62319564819336,118.94412994384766 L 32.9029541015625,107.82977294921875" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="0.3" stroke-width="1"/> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="142.5" y="49.37851134678253"> 12</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="157.2860239041935" y="64.77175786529855"> 1</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="166.7458675623201" y="83.90523374499668"> 2</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="170" y="105"> 3</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="166.7458675623201" y="126.09476625500332"> 4</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="157.2860239041935" y="145.22824213470145"> 5</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="142.5" y="160.62148865321745"> 6</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="45.01913265306122" y="114.79051713538774"> 6</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="59.41067589152387" y="113.15993244571885"> 7</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="73.62457363294365" y="115.94209603026678"> 8</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="86.33928571428571" y="122.87833563853417"> 9</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="96.3726590778456" y="133.32375291895576"> 10</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="102.79183870300292" y="146.30718298017948"> 11</text> <text fill="#640064" font-family="Verdana" font-size="14" font-weight="bold" stroke="none" text-anchor="middle" x="105" y="160.62148865321745"> 12</text> <path d=" M 100,100 L 57.5,155.62149047851562" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.1" stroke-width="25"/> <g transform=" matrix(1,0,0,1,100,100)"> <path d=" M 0,0 L 42.5,-55.621490478515625 L -42.5,-55.621490478515625" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.1" stroke-width="25"/> <circle cx="42.5" cy="-55.62148865321747" fill="#0000ff" fill-opacity="0.3" r="10" stroke="none"/> <path d=" M 2.0818996229250058e-15,-34 L 2.8450467586517334,-33.88075637817383 L 4.511996269226074,-35.716129302978516 L 6.170443534851074,-36.48185348510742 L 9.201525688171387,-35.83757781982422 L 10.405144691467285,-34.4635009765625 L 11.181466102600098,-32.108795166015625 L 16.37962532043457,-29.7944278717041 L 18.648971557617188,-30.793113708496094 L 20.475486755371094,-30.818086624145508 L 22.982467651367188,-28.996658325195312 L 23.523141860961914,-27.251821517944336 L 23.274600982666016,-24.78493309020996 L 27.08201789855957,-20.55636978149414 L 29.561370849609375,-20.54568862915039 L 31.24013328552246,-19.825592041015625 L 32.78953170776367,-17.141952514648438 L 32.57377243041992,-15.328054428100586 L 31.343347549438477,-13.175529479980469 L 33.1016845703125,-7.76392936706543 L 35.362342834472656,-6.7457275390625 L 36.60307693481445,-5.405072212219238 L 36.9269905090332,-2.323249340057373 L 35.992103576660156,-0.7539271116256714 L 33.9925422668457,0.7120422720909119 L 33.39776611328125,6.370964527130127 L 35.0488395690918,8.22063159942627 L 35.63701629638672,9.950033187866211 L 34.6794319152832,12.897165298461914 L 33.18707275390625,13.9505615234375 L 30.76412010192871,14.476495742797852 L 27.9190731048584,19.404260635375977 L 28.675077438354492,21.765567779541016 L 28.508989334106445,23.584688186645508 L 26.435489654541016,25.887542724609375 L 24.643695831298828,26.242870330810547 L 22.21630096435547,25.737831115722656 L 17.612918853759766,29.08238410949707 L 17.34313201904297,31.547040939331055 L 16.451501846313477,33.141334533691406 L 13.62060832977295,34.401729583740234 L 11.83919906616211,33.99755096435547 L 9.827080726623535,32.54886245727539 L 4.2613301277160645,33.73189926147461 L 3.012402296066284,35.873741149902344 L 1.5493991374969482,36.96754455566406 L -1.5493991374969482,36.96754455566406 L -3.012402296066284,35.873741149902344 L -4.2613301277160645,33.73189926147461 L -9.827080726623535,32.54886245727539 L -11.83919906616211,33.99755096435547 L -13.62060832977295,34.401729583740234 L -16.451501846313477,33.141334533691406 L -17.34313201904297,31.547040939331055 L -17.612918853759766,29.08238410949707 L -22.21630096435547,25.737831115722656 L -24.643695831298828,26.242870330810547 L -26.435489654541016,25.887542724609375 L -28.508989334106445,23.584688186645508 L -28.675077438354492,21.765567779541016 L -27.9190731048584,19.404260635375977 L -30.76412010192871,14.476495742797852 L -33.18707275390625,13.9505615234375 L -34.6794319152832,12.897165298461914 L -35.63701629638672,9.950033187866211 L -35.0488395690918,8.22063159942627 L -33.39776611328125,6.370964527130127 L -33.9925422668457,0.7120422720909119 L -35.992103576660156,-0.7539271116256714 L -36.9269905090332,-2.323249340057373 L -36.60307693481445,-5.405072212219238 L -35.362342834472656,-6.7457275390625 L -33.1016845703125,-7.76392936706543 L -31.343347549438477,-13.175529479980469 L -32.57377243041992,-15.328054428100586 L -32.78953170776367,-17.141952514648438 L -31.24013328552246,-19.825592041015625 L -29.561370849609375,-20.54568862915039 L -27.08201789855957,-20.55636978149414 L -23.274600982666016,-24.78493309020996 L -23.523141860961914,-27.251821517944336 L -22.982467651367188,-28.996658325195312 L -20.475486755371094,-30.818086624145508 L -18.648971557617188,-30.793113708496094 L -16.37962532043457,-29.7944278717041 L -11.181466102600098,-32.108795166015625 L -10.405144691467285,-34.4635009765625 L -9.201525688171387,-35.83757781982422 L -6.170443534851074,-36.48185348510742 L -4.511996269226074,-35.716129302978516 L -2.8450467586517334,-33.88075637817383 Z" fill="#000000" fill-opacity="0.1" stroke="none" transform="rotate(-40.616801582135125)"/> </g> <g transform=" matrix(1,0,0,1,57.5,155.62149047851562)"> <path d=" M 0,0 L 85,0" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.1" stroke-width="25"/> <circle cx="47.5" cy="0" fill="#0000ff" fill-opacity="0.3" r="10" stroke="none"/> <path d=" M 2.0818996229250058e-15,-34 L 2.8450467586517334,-33.88075637817383 L 4.511996269226074,-35.716129302978516 L 6.170443534851074,-36.48185348510742 L 9.201525688171387,-35.83757781982422 L 10.405144691467285,-34.4635009765625 L 11.181466102600098,-32.108795166015625 L 16.37962532043457,-29.7944278717041 L 18.648971557617188,-30.793113708496094 L 20.475486755371094,-30.818086624145508 L 22.982467651367188,-28.996658325195312 L 23.523141860961914,-27.251821517944336 L 23.274600982666016,-24.78493309020996 L 27.08201789855957,-20.55636978149414 L 29.561370849609375,-20.54568862915039 L 31.24013328552246,-19.825592041015625 L 32.78953170776367,-17.141952514648438 L 32.57377243041992,-15.328054428100586 L 31.343347549438477,-13.175529479980469 L 33.1016845703125,-7.76392936706543 L 35.362342834472656,-6.7457275390625 L 36.60307693481445,-5.405072212219238 L 36.9269905090332,-2.323249340057373 L 35.992103576660156,-0.7539271116256714 L 33.9925422668457,0.7120422720909119 L 33.39776611328125,6.370964527130127 L 35.0488395690918,8.22063159942627 L 35.63701629638672,9.950033187866211 L 34.6794319152832,12.897165298461914 L 33.18707275390625,13.9505615234375 L 30.76412010192871,14.476495742797852 L 27.9190731048584,19.404260635375977 L 28.675077438354492,21.765567779541016 L 28.508989334106445,23.584688186645508 L 26.435489654541016,25.887542724609375 L 24.643695831298828,26.242870330810547 L 22.21630096435547,25.737831115722656 L 17.612918853759766,29.08238410949707 L 17.34313201904297,31.547040939331055 L 16.451501846313477,33.141334533691406 L 13.62060832977295,34.401729583740234 L 11.83919906616211,33.99755096435547 L 9.827080726623535,32.54886245727539 L 4.2613301277160645,33.73189926147461 L 3.012402296066284,35.873741149902344 L 1.5493991374969482,36.96754455566406 L -1.5493991374969482,36.96754455566406 L -3.012402296066284,35.873741149902344 L -4.2613301277160645,33.73189926147461 L -9.827080726623535,32.54886245727539 L -11.83919906616211,33.99755096435547 L -13.62060832977295,34.401729583740234 L -16.451501846313477,33.141334533691406 L -17.34313201904297,31.547040939331055 L -17.612918853759766,29.08238410949707 L -22.21630096435547,25.737831115722656 L -24.643695831298828,26.242870330810547 L -26.435489654541016,25.887542724609375 L -28.508989334106445,23.584688186645508 L -28.675077438354492,21.765567779541016 L -27.9190731048584,19.404260635375977 L -30.76412010192871,14.476495742797852 L -33.18707275390625,13.9505615234375 L -34.6794319152832,12.897165298461914 L -35.63701629638672,9.950033187866211 L -35.0488395690918,8.22063159942627 L -33.39776611328125,6.370964527130127 L -33.9925422668457,0.7120422720909119 L -35.992103576660156,-0.7539271116256714 L -36.9269905090332,-2.323249340057373 L -36.60307693481445,-5.405072212219238 L -35.362342834472656,-6.7457275390625 L -33.1016845703125,-7.76392936706543 L -31.343347549438477,-13.175529479980469 L -32.57377243041992,-15.328054428100586 L -32.78953170776367,-17.141952514648438 L -31.24013328552246,-19.825592041015625 L -29.561370849609375,-20.54568862915039 L -27.08201789855957,-20.55636978149414 L -23.274600982666016,-24.78493309020996 L -23.523141860961914,-27.251821517944336 L -22.982467651367188,-28.996658325195312 L -20.475486755371094,-30.818086624145508 L -18.648971557617188,-30.793113708496094 L -16.37962532043457,-29.7944278717041 L -11.181466102600098,-32.108795166015625 L -10.405144691467285,-34.4635009765625 L -9.201525688171387,-35.83757781982422 L -6.170443534851074,-36.48185348510742 L -4.511996269226074,-35.716129302978516 L -2.8450467586517334,-33.88075637817383 Z" fill="#000000" fill-opacity="0.1" stroke="none" transform="rotate(-52.616801582135125)"/> </g> </svg>
