Customize SVG path - svg

I Basically want to write text(ICSE) in two lines i.e first line has the word IC and to very next line just below IC word SE. I am puzzling with code for a long time but didn't get the way.
<svg width="48.88" height="14.48" viewBox="0 0 48.88 14.48" xmlns="http://www.w3.org/2000/svg">
<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="black" style="stroke:#000;stroke-width:0.25mm;fill:black">
<path d="M 0.74 0.8 L 0 0.64 L 0 0.24 L 6.52 0.24 L 6.52 0.64 L 5.78 0.8 Q 5.48 0.86 5.39 0.94 A 0.218 0.218 0 0 0 5.336 1.018 Q 5.306 1.088 5.301 1.197 A 0.977 0.977 0 0 0 5.3 1.24 L 5.3 13.24 A 0.842 0.842 0 0 0 5.306 13.341 Q 5.319 13.449 5.363 13.51 A 0.19 0.19 0 0 0 5.39 13.54 A 0.297 0.297 0 0 0 5.45 13.58 Q 5.557 13.636 5.78 13.68 L 6.52 13.84 L 6.52 14.24 L 0 14.24 L 0 13.84 L 0.74 13.68 Q 1.04 13.62 1.13 13.54 A 0.218 0.218 0 0 0 1.184 13.462 Q 1.214 13.392 1.219 13.283 A 0.977 0.977 0 0 0 1.22 13.24 L 1.22 1.24 Q 1.22 1.057 1.157 0.971 A 0.19 0.19 0 0 0 1.13 0.94 A 0.297 0.297 0 0 0 1.07 0.9 Q 0.963 0.845 0.74 0.8 Z" id="0" vector-effect="non-scaling-stroke" />
<path d="M 20.92 12.12 L 21.32 12.56 Q 20.44 13.38 19.03 13.93 A 8.074 8.074 0 0 1 16.853 14.437 A 9.807 9.807 0 0 1 15.92 14.48 A 10.447 10.447 0 0 1 13.433 14.199 A 7.542 7.542 0 0 1 10.4 12.71 A 5.469 5.469 0 0 1 8.691 10.16 Q 8.381 9.24 8.284 8.111 A 12.532 12.532 0 0 1 8.24 7.04 A 9.631 9.631 0 0 1 8.44 5.011 Q 8.708 3.765 9.339 2.841 A 5.127 5.127 0 0 1 10.39 1.71 A 7.566 7.566 0 0 1 13.366 0.293 Q 14.465 0.028 15.752 0.003 A 13.853 13.853 0 0 1 16.02 0 Q 17.42 0 18.78 0.26 A 13.97 13.97 0 0 1 19.573 0.434 Q 20.384 0.639 20.92 0.9 L 20.64 4.34 L 20.08 4.34 A 9.235 9.235 0 0 0 19.538 3.025 Q 19.185 2.334 18.738 1.802 A 5.423 5.423 0 0 0 18.57 1.61 A 3.146 3.146 0 0 0 16.565 0.61 A 4.391 4.391 0 0 0 16.04 0.58 A 3.455 3.455 0 0 0 14.968 0.737 Q 13.964 1.063 13.43 2.07 A 5.445 5.445 0 0 0 12.997 3.206 Q 12.64 4.531 12.64 6.52 A 19.291 19.291 0 0 0 12.721 8.349 Q 12.898 10.206 13.466 11.386 A 4.903 4.903 0 0 0 13.66 11.75 A 3.335 3.335 0 0 0 15.79 13.311 Q 16.394 13.468 17.128 13.479 A 7.428 7.428 0 0 0 17.24 13.48 Q 18.34 13.48 19.23 13.12 A 6.69 6.69 0 0 0 20.769 12.238 A 7.53 7.53 0 0 0 20.92 12.12 Z" id="1" vector-effect="non-scaling-stroke" />
<path d="M 33.62 0.92 L 33.14 3.98 L 32.6 3.98 A 15.149 15.149 0 0 0 32.335 3.2 Q 32.199 2.835 32.059 2.53 A 6.303 6.303 0 0 0 31.81 2.04 Q 31.4 1.32 30.7 0.93 Q 30.162 0.631 29.353 0.561 A 6.006 6.006 0 0 0 28.84 0.54 Q 26.2 0.54 26.2 2.26 A 2.526 2.526 0 0 0 26.249 2.77 Q 26.318 3.105 26.484 3.367 A 1.576 1.576 0 0 0 26.52 3.42 A 2.346 2.346 0 0 0 26.89 3.832 Q 27.078 3.998 27.316 4.15 A 4.313 4.313 0 0 0 27.48 4.25 Q 28.096 4.606 29.491 5.287 A 99.663 99.663 0 0 0 29.6 5.34 L 30 5.52 Q 31.86 6.42 32.75 6.98 A 4.529 4.529 0 0 1 33.838 7.925 A 4.172 4.172 0 0 1 34.16 8.37 A 3.175 3.175 0 0 1 34.542 9.289 Q 34.68 9.839 34.68 10.52 Q 34.68 12.48 33.21 13.48 A 4.677 4.677 0 0 1 32.006 14.048 Q 30.847 14.421 29.151 14.472 A 18.343 18.343 0 0 1 28.6 14.48 Q 27.35 14.48 25.834 14.204 A 21.095 21.095 0 0 1 25.81 14.2 A 16.273 16.273 0 0 1 24.921 14.013 Q 24.063 13.806 23.498 13.547 A 4.409 4.409 0 0 1 23.44 13.52 L 23.98 10 L 24.5 10 Q 24.76 11.56 25.28 12.42 Q 25.8 13.28 26.58 13.61 Q 27.247 13.892 28.176 13.933 A 7.352 7.352 0 0 0 28.5 13.94 A 5.476 5.476 0 0 0 29.256 13.891 Q 29.652 13.836 29.976 13.718 A 2.379 2.379 0 0 0 30.52 13.44 A 1.6 1.6 0 0 0 31.222 12.283 A 2.209 2.209 0 0 0 31.24 12 A 2.884 2.884 0 0 0 31.19 11.446 Q 31.123 11.107 30.97 10.838 A 1.732 1.732 0 0 0 30.91 10.74 A 2.532 2.532 0 0 0 30.524 10.289 Q 30.261 10.043 29.9 9.82 A 8.953 8.953 0 0 0 29.426 9.549 Q 28.903 9.269 28.152 8.932 A 35.034 35.034 0 0 0 27.9 8.82 A 36.503 36.503 0 0 1 26.924 8.374 Q 26.037 7.952 25.437 7.594 A 9.855 9.855 0 0 1 25.3 7.51 Q 24.38 6.94 23.85 6.07 Q 23.378 5.295 23.326 4.148 A 6.398 6.398 0 0 1 23.32 3.86 A 4.289 4.289 0 0 1 23.477 2.665 A 3.077 3.077 0 0 1 24.68 0.97 A 4.225 4.225 0 0 1 25.804 0.418 Q 26.886 0.057 28.482 0.008 A 16.787 16.787 0 0 1 29 0 Q 30.32 0 31.55 0.26 A 12.2 12.2 0 0 1 32.485 0.494 Q 33.121 0.683 33.62 0.92 Z" id="2" vector-effect="non-scaling-stroke" />
<path d="M 36.28 13.84 L 37.02 13.68 Q 37.32 13.62 37.41 13.54 A 0.218 0.218 0 0 0 37.464 13.462 Q 37.494 13.392 37.499 13.283 A 0.977 0.977 0 0 0 37.5 13.24 L 37.5 1.24 Q 37.5 1.057 37.437 0.971 A 0.19 0.19 0 0 0 37.41 0.94 A 0.297 0.297 0 0 0 37.35 0.9 Q 37.243 0.845 37.02 0.8 L 36.28 0.64 L 36.28 0.24 L 48.6 0.24 L 48.6 4.14 L 48.1 4.14 A 20.252 20.252 0 0 0 47.855 3.425 Q 47.611 2.755 47.385 2.319 A 4.763 4.763 0 0 0 47.31 2.18 Q 46.94 1.52 46.28 1.18 A 2.577 2.577 0 0 0 45.736 0.98 Q 45.197 0.842 44.444 0.84 A 8.43 8.43 0 0 0 44.42 0.84 L 41.58 0.84 L 41.58 6.78 L 46.74 6.78 L 46.74 7.38 L 41.58 7.38 L 41.58 13.64 L 44.62 13.64 A 6.321 6.321 0 0 0 45.309 13.605 Q 46.012 13.528 46.48 13.28 Q 47.16 12.92 47.55 12.24 A 5.965 5.965 0 0 0 47.797 11.755 Q 48.033 11.238 48.279 10.506 A 21.598 21.598 0 0 0 48.36 10.26 L 48.88 10.26 L 48.88 14.24 L 36.28 14.24 L 36.28 13.84 Z" id="3" vector-effect="non-scaling-stroke" />
</g>
</svg>

In this example I moved the coordinates of all the paths so that 0,0 is in the middle of the letter. Her you can see the "I" in the tool SvgPathEditor:
Now all the letters can be aligned using transform/translate.
<svg width="200" viewBox="0 0 30 32" xmlns="http://www.w3.org/2000/svg">
<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="black" style="stroke:#000;stroke-width:0.25mm;fill:black"
transform="translate(7 8)">
<path transform="translate(0 0)" d="M -2.52 -6.44 L -3.26 -6.6 L -3.26 -7 L 3.26 -7 L 3.26 -6.6 L 2.52 -6.44 Q 2.22 -6.38 2.13 -6.3 A 0.218 0.218 0 0 0 2.076 -6.222 Q 2.046 -6.152 2.041 -6.043 A 0.977 0.977 0 0 0 2.04 -6 L 2.04 6 A 0.842 0.842 0 0 0 2.046 6.101 Q 2.059 6.209 2.103 6.27 A 0.19 0.19 0 0 0 2.13 6.3 A 0.297 0.297 0 0 0 2.19 6.34 Q 2.297 6.396 2.52 6.44 L 3.26 6.6 L 3.26 7 L -3.26 7 L -3.26 6.6 L -2.52 6.44 Q -2.22 6.38 -2.13 6.3 A 0.218 0.218 0 0 0 -2.076 6.222 Q -2.046 6.152 -2.041 6.043 A 0.977 0.977 0 0 0 -2.04 6 L -2.04 -6 Q -2.04 -6.183 -2.103 -6.269 A 0.19 0.19 0 0 0 -2.13 -6.3 A 0.297 0.297 0 0 0 -2.19 -6.34 Q -2.297 -6.395 -2.52 -6.44 Z" id="0" vector-effect="non-scaling-stroke" />
<path transform="translate(12 0)" d="M 6.14 4.88 L 6.54 5.32 Q 5.66 6.14 4.25 6.69 A 8.074 8.074 0 0 1 2.073 7.197 A 9.807 9.807 0 0 1 1.14 7.24 A 10.447 10.447 0 0 1 -1.347 6.959 A 7.542 7.542 0 0 1 -4.38 5.47 A 5.469 5.469 0 0 1 -6.089 2.92 Q -6.399 2 -6.496 0.871 A 12.532 12.532 0 0 1 -6.54 -0.2 A 9.631 9.631 0 0 1 -6.34 -2.229 Q -6.072 -3.475 -5.441 -4.399 A 5.127 5.127 0 0 1 -4.39 -5.53 A 7.566 7.566 0 0 1 -1.414 -6.947 Q -0.315 -7.212 0.972 -7.237 A 13.853 13.853 0 0 1 1.24 -7.24 Q 2.64 -7.24 4 -6.98 A 13.97 13.97 0 0 1 4.793 -6.806 Q 5.604 -6.601 6.14 -6.34 L 5.86 -2.9 L 5.3 -2.9 A 9.235 9.235 0 0 0 4.758 -4.215 Q 4.405 -4.906 3.958 -5.438 A 5.423 5.423 0 0 0 3.79 -5.63 A 3.146 3.146 0 0 0 1.785 -6.63 A 4.391 4.391 0 0 0 1.26 -6.66 A 3.455 3.455 0 0 0 0.188 -6.503 Q -0.816 -6.177 -1.35 -5.17 A 5.445 5.445 0 0 0 -1.783 -4.034 Q -2.14 -2.709 -2.14 -0.72 A 19.291 19.291 0 0 0 -2.059 1.109 Q -1.882 2.966 -1.314 4.146 A 4.903 4.903 0 0 0 -1.12 4.51 A 3.335 3.335 0 0 0 1.01 6.071 Q 1.614 6.228 2.348 6.239 A 7.428 7.428 0 0 0 2.46 6.24 Q 3.56 6.24 4.45 5.88 A 6.69 6.69 0 0 0 5.989 4.998 A 7.53 7.53 0 0 0 6.14 4.88 Z" id="1" vector-effect="non-scaling-stroke" />
<path transform="translate(0 16)" d="M 4.62 -6.32 L 4.14 -3.26 L 3.6 -3.26 A 15.149 15.149 0 0 0 3.335 -4.04 Q 3.199 -4.405 3.059 -4.71 A 6.303 6.303 0 0 0 2.81 -5.2 Q 2.4 -5.92 1.7 -6.31 Q 1.162 -6.609 0.353 -6.679 A 6.006 6.006 0 0 0 -0.16 -6.7 Q -2.8 -6.7 -2.8 -4.98 A 2.526 2.526 0 0 0 -2.751 -4.47 Q -2.682 -4.135 -2.516 -3.873 A 1.576 1.576 0 0 0 -2.48 -3.82 A 2.346 2.346 0 0 0 -2.11 -3.408 Q -1.922 -3.242 -1.684 -3.09 A 4.313 4.313 0 0 0 -1.52 -2.99 Q -0.904 -2.634 0.491 -1.953 A 99.663 99.663 0 0 0 0.6 -1.9 L 1 -1.72 Q 2.86 -0.82 3.75 -0.26 A 4.529 4.529 0 0 1 4.838 0.685 A 4.172 4.172 0 0 1 5.16 1.13 A 3.175 3.175 0 0 1 5.542 2.049 Q 5.68 2.599 5.68 3.28 Q 5.68 5.24 4.21 6.24 A 4.677 4.677 0 0 1 3.006 6.808 Q 1.847 7.181 0.151 7.232 A 18.343 18.343 0 0 1 -0.4 7.24 Q -1.65 7.24 -3.166 6.964 A 21.095 21.095 0 0 1 -3.19 6.96 A 16.273 16.273 0 0 1 -4.079 6.773 Q -4.937 6.566 -5.502 6.307 A 4.409 4.409 0 0 1 -5.56 6.28 L -5.02 2.76 L -4.5 2.76 Q -4.24 4.32 -3.72 5.18 Q -3.2 6.04 -2.42 6.37 Q -1.753 6.652 -0.824 6.693 A 7.352 7.352 0 0 0 -0.5 6.7 A 5.476 5.476 0 0 0 0.256 6.651 Q 0.652 6.596 0.976 6.478 A 2.379 2.379 0 0 0 1.52 6.2 A 1.6 1.6 0 0 0 2.222 5.043 A 2.209 2.209 0 0 0 2.24 4.76 A 2.884 2.884 0 0 0 2.19 4.206 Q 2.123 3.867 1.97 3.598 A 1.732 1.732 0 0 0 1.91 3.5 A 2.532 2.532 0 0 0 1.524 3.049 Q 1.261 2.803 0.9 2.58 A 8.953 8.953 0 0 0 0.426 2.309 Q -0.097 2.029 -0.848 1.692 A 35.034 35.034 0 0 0 -1.1 1.58 A 36.503 36.503 0 0 1 -2.076 1.134 Q -2.963 0.712 -3.563 0.354 A 9.855 9.855 0 0 1 -3.7 0.27 Q -4.62 -0.3 -5.15 -1.17 Q -5.622 -1.945 -5.674 -3.092 A 6.398 6.398 0 0 1 -5.68 -3.38 A 4.289 4.289 0 0 1 -5.523 -4.575 A 3.077 3.077 0 0 1 -4.32 -6.27 A 4.225 4.225 0 0 1 -3.196 -6.822 Q -2.114 -7.183 -0.518 -7.232 A 16.787 16.787 0 0 1 -0 -7.24 Q 1.32 -7.24 2.55 -6.98 A 12.2 12.2 0 0 1 3.485 -6.746 Q 4.121 -6.557 4.62 -6.32 Z" id="2" vector-effect="non-scaling-stroke" />
<path transform="translate(12 16)" d="M -6.3 6.6 L -5.56 6.44 Q -5.26 6.38 -5.17 6.3 A 0.218 0.218 0 0 0 -5.116 6.222 Q -5.086 6.152 -5.081 6.043 A 0.977 0.977 0 0 0 -5.08 6 L -5.08 -6 Q -5.08 -6.183 -5.143 -6.269 A 0.19 0.19 0 0 0 -5.17 -6.3 A 0.297 0.297 0 0 0 -5.23 -6.34 Q -5.337 -6.395 -5.56 -6.44 L -6.3 -6.6 L -6.3 -7 L 6.02 -7 L 6.02 -3.1 L 5.52 -3.1 A 20.252 20.252 0 0 0 5.275 -3.815 Q 5.031 -4.485 4.805 -4.921 A 4.763 4.763 0 0 0 4.73 -5.06 Q 4.36 -5.72 3.7 -6.06 A 2.577 2.577 0 0 0 3.156 -6.26 Q 2.617 -6.398 1.864 -6.4 A 8.43 8.43 0 0 0 1.84 -6.4 L -1 -6.4 L -1 -0.46 L 4.16 -0.46 L 4.16 0.14 L -1 0.14 L -1 6.4 L 2.04 6.4 A 6.321 6.321 0 0 0 2.729 6.365 Q 3.432 6.288 3.9 6.04 Q 4.58 5.68 4.97 5 A 5.965 5.965 0 0 0 5.217 4.515 Q 5.453 3.998 5.699 3.266 A 21.598 21.598 0 0 0 5.78 3.02 L 6.3 3.02 L 6.3 7 L -6.3 7 L -6.3 6.6 Z" id="3" vector-effect="non-scaling-stroke" />
</g>
</svg>

Related

Scale Origin Clipped Path SVG {Camera Shutter}

I am attempting to replicate a camera shutter and it appears as though my path is scaling from the top left, based on its position within the clipping path. I have set the transform origin to 50% but it doesnt appear to be working the way Im expecting it to. Any assistance would be appreciated.
#camera-v3c .cls-2 { fill: #231f20 }
#camera-v3c .cls-4 { fill: #b5b6b6 }
#camera-v3c .cls-5 { fill: #686969 }
#camera-v3c .cls-6 { fill: #2d2e2d }
#camera-v3c .cls-7 { fill: #434343 }
#camera-v3c .cls-8 { fill: #575757 }
#camera-v3c:hover #shutter{
-webkit-transform: scale(2);
-webkit-transform-origin: 50% 50%;
-webkit-transition:.3s;
transform: scale(2);
transform-origin: 50% 50%;
transition:.3s;
fill: rgba(255,0,152,1);
}
<svg xmlns="http://www.w3.org/2000/svg" id="camera-v3c" viewBox="0 0 513.88 363.34">
<defs>
<radialGradient id="radial-gradient" cx="299.19" cy="215.04" r="100.4" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#231f20" stop-opacity="0"/>
<stop offset=".44" stop-color="#231f20" stop-opacity=".43"/>
<stop offset=".89" stop-color="#231f20"/>
</radialGradient>
<linearGradient id="linear-gradient2" x1="207.3" x2="274.25" y1="215.04" y2="215.04" gradientTransform="matrix(0 1.3 -1 0 480 -131.87)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset=".84" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip-path">
<circle id="clip" cx="299.19" cy="215.04" r="100.4" fill="none"/>
</clipPath>
</defs>
<path id="cam-light-grey4" d="m513.53 142.14-.34-.62-1.87-5.82a7.83 7.83 0 0 0 1.67-9.35l-.32-.62-4.85-9.36a8 8 0 0 0-4.53-4 13.45 13.45 0 0 0 .68-1.87 22.17 22.17 0 0 0 .59-5.33c0-8.64-4.51-12.54-6.45-13.81a7.84 7.84 0 0 0-4.31-1.29h-4.67l-.88-6a7.9 7.9 0 0 0-4.44-6v-.83a9 9 0 0 0-4.17-8.19 7.5 7.5 0 0 0-3.33-1.05c-3.74-.38-7.75-.75-11.75-1.11l1.87-14.07c1.36-10.84-11.23-14.6-15.85-16a148.6 148.6 0 0 0-23-4.58 162.16 162.16 0 0 0-19.82-1.39h-3.57c-4.47.19-15.66.64-18.71 8.91a141.13 141.13 0 0 0-6.83-13.29 7.9 7.9 0 0 0-4.79-3.63 7.9 7.9 0 0 0-1.41-5.84 93.1 93.1 0 0 0-8.85-10.38 7.9 7.9 0 0 0-4.94-2.3L307.37 0h-.65a7.88 7.88 0 0 0-3 .58 7.88 7.88 0 0 0-3-.58h-.65l-51.21 4.25a7.77 7.77 0 0 0-5 2.3A100.43 100.43 0 0 0 235 17a7.76 7.76 0 0 0-1.55 4.87 9.34 9.34 0 0 0-1.5.71 7.89 7.89 0 0 0-2.08 1.87 7.52 7.52 0 0 0-.5.75 129.26 129.26 0 0 0-7.19 13.25c-1.4-10.43-15-11.59-21.7-12.15-4.16-.34-8.93-.5-14.21-.5-4.84 0-9.95.15-15.19.43a225.53 225.53 0 0 0-29.21 3.33C135.09 30.88 121 33.65 121.61 45l.94 16.84-4.29.06a7.84 7.84 0 0 0-3.89 1.24 3.68 3.68 0 0 0 0-.47 8.63 8.63 0 0 0-1.23-3.59c-1.54-2.53-4.27-4.33-8.59-5.62a9.64 9.64 0 0 0-1-1.16c-1.14-1-3.56-3.27-14.75-3.27-1.62 0-3.35 0-5.12.15-2.53.15-5.21.39-7.94.73a91.6 91.6 0 0 0-16.98 3.59 19.62 19.62 0 0 0-7.49 4 9 9 0 0 0-1.87 2.66l-.5.28-.3.23-.6.43a15.31 15.31 0 0 0-3.26 3.22 10.63 10.63 0 0 0-1 1.7h-.39c-12.65.86-19.67 1.44-19.74 1.44h-1a7.48 7.48 0 0 0-2 .47l-3.81 1.42a7.91 7.91 0 0 0-4.15 3.74 7.83 7.83 0 0 0-5.16 5.37l-.7 2.42a7.94 7.94 0 0 0-2.95 2.41l-2.25 3A7.81 7.81 0 0 0 0 91v19.83A7.64 7.64 0 0 0 .6 114a7.64 7.64 0 0 0-.6 3l.6 211.8a7.88 7.88 0 0 0 4.28 7l.85.39a7.8 7.8 0 0 0 1.87 5.31l12.22 14.69a7.87 7.87 0 0 0 3.74 2.49 114.81 114.81 0 0 0 23.13 3.88c6.58.54 14.07.8 22.25.8 25.2 0 50.52-2.58 55.33-3.09a7.51 7.51 0 0 0 2.69-.82 8 8 0 0 0 3.22.71h314.37a8.34 8.34 0 0 0 1 0l24-3.09a7.81 7.81 0 0 0 4.75-2.45l13.83-15a7.75 7.75 0 0 0 2.22-5.46v-.39a7.86 7.86 0 0 0 2.29-5.62v-11.22a7.53 7.53 0 0 0-.53-2.69 7.68 7.68 0 0 0 .53-2.71V164a7.7 7.7 0 0 0-.83-3.46 7.87 7.87 0 0 0 .83-3.46v-2.42a33.65 33.65 0 0 0 4.73 1.16l1.46.23a9.55 9.55 0 0 0 4.94-1.09l6.25-3.65a7.88 7.88 0 0 0 3.51-9.17Z" class="cls-2"/>
<path id="cam-light-grey3" fill="#3d3b3c" d="M198.55 213.92a100.84 100.84 0 0 0 100.84 100.84 100.84 100.84 0 1 0-100.84-100.84Z"/>
<g id="cam-btn">
<path id="cam-btn-pth2" d="M106.46 63.21a8.16 8.16 0 0 0-4.23-2.21 7.3 7.3 0 0 1-2.23 2.08 20.59 20.59 0 0 1-3.09 1.52l-.88.33-1 .36c-1.72.56-3.74 1.12-6 1.63Q84 68.1 78.78 68.79c-2.66.32-5.26.56-7.73.71h-1.63a53.82 53.82 0 0 1-11.69-.58 8.88 8.88 0 0 1-3.89-1.41l-.15-.13-.32-.28h-.25l-.43.32A7.63 7.63 0 0 0 51.07 69a1.33 1.33 0 0 0-.34.74.91.91 0 0 0 .19.45 6.2 6.2 0 0 0 2.5 1.52A28.28 28.28 0 0 0 58.1 73a54.53 54.53 0 0 0 9.36 1 88.21 88.21 0 0 0 11.94-.52A85.55 85.55 0 0 0 92.29 71h.3a50.28 50.28 0 0 0 7.48-2.54 20.46 20.46 0 0 0 5.32-3.26 8.11 8.11 0 0 0 .77-.78l.2-.32a2 2 0 0 0 .23-.43.38.38 0 0 0 0-.15.71.71 0 0 0-.13-.31Z" class="cls-4"/>
<path id="cam-btn-pth1" d="M56.74 63.77a4.89 4.89 0 0 0 1.87.6h.11a51.11 51.11 0 0 0 10.63.49h1.55c2.23-.13 4.7-.36 7.39-.69q5-.62 9.9-1.71c2-.47 3.89-1 5.5-1.51 1.18-.41 2.06-.77 2.75-1.09a7.54 7.54 0 0 0 1.16-.63 2.31 2.31 0 0 0 .87-.79.49.49 0 0 0 0-.17c-.79-.71-5.77-1.55-14.15-1.07-2.23.12-4.72.34-7.49.68a81.56 81.56 0 0 0-15.38 3.24 13.09 13.09 0 0 0-4.71 2c-.19.19-.27.32-.25.38a.45.45 0 0 0 .25.27Z" class="cls-4"/>
</g>
<g id="cam-grey-pth1">
<path id="cam-grey-pth12" d="M299.21 83.29a131.74 131.74 0 1 0 0 263.47 131.74 131.74 0 0 0 0-263.47Zm0 247.57A115.82 115.82 0 1 1 415 215a116 116 0 0 1-115.81 115.86Z" class="cls-5"/>
<path id="cam-grey-pth11" d="M199.57 121.63a4.78 4.78 0 0 1 .54-2.06H163l-1.47 3.24h35.29a4.91 4.91 0 0 1 2.75-1.18Z" class="cls-5"/>
<path id="cam-grey-pth10" d="M465.61 119.54H397a4.46 4.46 0 0 1 .2.8 4.88 4.88 0 0 1 3.75 3.41h66.13l2-4.21Z" class="cls-5"/>
<path id="cam-grey-pth9" d="M42.81 82.48v-.67a4.17 4.17 0 0 1 0-.5v-.12l1.09-7.31c-12.13.82-19.09 1.38-19.7 1.44h-.88l-3.75 1.42C22.4 81.83 31 91.45 55.09 90.83c-7.71-1.48-11.85-4.25-12.28-8.35Z" class="cls-5"/>
<path id="cam-grey-pth8" d="M391.77 63.59c2.52.11 5.05.28 7.48.43-.07-.66-.3-2.12-.71-4.25l1.53-17.54a4.46 4.46 0 0 1 1.93-3.38c-6.2.48-9.06 1.87-9.36 4.53L390.6 59v.07c.68 2.41 1.07 4 1.16 4.4a.24.24 0 0 0 .01.12Z" class="cls-5"/>
<path id="cam-grey-pth7" d="m450.6 51.59-1.38 15.82v.09l7.26.58 2.08-16.3a3.82 3.82 0 0 0 0-.58c-.08-2.69-3.24-4.78-10.34-6.93-2.34-.69-5-1.36-7.92-2l2.38 1c5.84 2.52 8.22 5.03 7.92 8.32Z" class="cls-5"/>
<path id="cam-grey-pth6" d="M143.43 37.22c-5 1-8.52 2-10.79 3.19-2 1-3 2.18-3.17 3.53a4 4 0 0 0 0 .6l1 17 .15 1.87 5.71-.21h.93v-.8l-.79-18.06c-.15-3.38 3.32-5.7 11.55-7.76l.92-.22.17-.05c-1.51.23-2.94.47-4.32.72Z" class="cls-5"/>
<path id="cam-grey-pth5" d="m206.85 39.28.92 21.31v.59l7.72-.15h.79a1.1 1.1 0 0 0 0-.26h-.69a2.62 2.62 0 0 0 0-.56v-.36l-1.11-20c-.18-3.1-4.36-4.79-13.9-5.61 4.21 1 6.16 2.6 6.27 5.04Z" class="cls-5"/>
<path id="cam-grey-pth4" d="m128.33 69.39-9.73.41.41.58a6.09 6.09 0 0 1 1.72 3.62 6.64 6.64 0 0 1-1.73 5.17 46.87 46.87 0 0 0 12.62-7.37c.56-.47 1.08-1 1.59-1.44s.76-.81 1.12-1.22l-3.13.13Z" class="cls-5"/>
<path id="cam-grey-pth3" d="M299.19 110.2a103.57 103.57 0 1 0 103.57 103.57A103.57 103.57 0 0 0 299.19 110.2Zm.24 204.56a100.84 100.84 0 1 1 100.81-100.84 100.84 100.84 0 0 1-100.85 100.84Z" class="cls-5"/>
<path id="cam-grey-pth2" d="M299.19 101.78A113.27 113.27 0 1 0 412.46 215a113.26 113.26 0 0 0-113.27-113.22Zm0 220.45a108.52 108.52 0 1 1 108.52-108.51 108.51 108.51 0 0 1-108.52 108.51Z" class="cls-5"/>
</g>
<g id="cam-drk-grey">
<path id="cam-drk-grey-pth7" d="m376.72 62.93-12.2-35.55-57.84-6V61c23 .36 46.48 1 70.08 2Z" class="cls-6"/>
<path id="cam-drk-grey-pth6" d="m383.16 63.3 2.47.14a139.39 139.39 0 0 0-13.76-32.92l11.23 32.8Z" class="cls-6"/>
<path id="cam-drk-grey-pth5" d="M101.37 338.25c-.36 0-9.72 1.12-48.21 1.12-20.58 0-32.65-1.46-39.54-2.92l12.22 14.69a108.39 108.39 0 0 0 21.54 3.57c29.94 2.42 68.88-1.51 76.1-2.28l.15-.28 9.17-17.38Z" class="cls-6"/>
<path id="cam-drk-grey-pth4" d="M366.26 334.19a5.33 5.33 0 0 1-1.07.82 5 5 0 0 1-2.35.6h-.7a4.94 4.94 0 0 1-4.36 2.69 3.39 3.39 0 0 1-.78 0 4.79 4.79 0 0 1-2.21 2 5 5 0 0 1-2 .43 5.17 5.17 0 0 1-1.41-.21 4.75 4.75 0 0 1-2.5 2.25 4.93 4.93 0 0 1-1.78.33 4.21 4.21 0 0 1-1.22-.15 4.68 4.68 0 0 1-2.38 1.87 5.36 5.36 0 0 1-1.59.27 5 5 0 0 1-1.49-.23 4.86 4.86 0 0 1-2.55 1.76 4.62 4.62 0 0 1-1.38.21 4.79 4.79 0 0 1-1.59-.27 5.07 5.07 0 0 1-2.53 1.6 5.32 5.32 0 0 1-1.2.13 5.05 5.05 0 0 1-2-.43 4.78 4.78 0 0 1-2.77 1.66 5.46 5.46 0 0 1-1 0 4.83 4.83 0 0 1-2-.43 4.79 4.79 0 0 1-2.66 1.37 5.21 5.21 0 0 1-.79 0 5 5 0 0 1-2.26-.56 4.82 4.82 0 0 1-2.79 1.31h-.58a5 5 0 0 1-2.34-.6 4.86 4.86 0 0 1-2.77 1.12h-.37a4.87 4.87 0 0 1-2.88-.95 4.94 4.94 0 0 1-3.15 1.27h-.13a4.77 4.77 0 0 1-2.73-.83 4.81 4.81 0 0 1-2.79.88 4.92 4.92 0 0 1-2.92-1 4.84 4.84 0 0 1-2.71.83h-.28a4.85 4.85 0 0 1-2.77-1.07 4.91 4.91 0 0 1-2.45.65h-.47a4.93 4.93 0 0 1-3-1.45 4.9 4.9 0 0 1-2.58.74 4.09 4.09 0 0 1-.7 0 4.7 4.7 0 0 1-2.67-1.29 5.15 5.15 0 0 1-2.08.45 4.51 4.51 0 0 1-.9 0 4.93 4.93 0 0 1-2.69-1.5 4.86 4.86 0 0 1-2 .42 5.11 5.11 0 0 1-1.11-.13 4.67 4.67 0 0 1-2.54-1.52 5.26 5.26 0 0 1-1.71.3 4.38 4.38 0 0 1-1.29-.19 4.8 4.8 0 0 1-2.75-1.87 4.62 4.62 0 0 1-1.87.37 4.36 4.36 0 0 1-1.52-.24 4.77 4.77 0 0 1-2.41-1.76 4.59 4.59 0 0 1-3-.13 4.73 4.73 0 0 1-2.4-1.87 4 4 0 0 1-1.2.15 5 5 0 0 1-1.87-.37 4.83 4.83 0 0 1-2.26-1.88 6.46 6.46 0 0 1-.88 0 5 5 0 0 1-2.08-.46 4.92 4.92 0 0 1-2.3-2.27 4.71 4.71 0 0 1-.92 0 4.84 4.84 0 0 1-4.3-2.62h-92.78l-9.36 17.95v.15h314.37l23.95-3.07 14-15H366.26Z" class="cls-6"/>
<path id="cam-drk-grey-pth3" d="M472 201.7v106.06c0 2.06 1.26 3.75 2.74 3.75h9.88V164c-4.76 4.56-12.62 15.38-12.62 37.7Z" class="cls-6"/>
<path id="cam-drk-grey-pth2" d="M392.59 43.38c.3-2.66 3.16-4.05 9.36-4.53a4.46 4.46 0 0 0-1.88 3.38l-1.53 17.54c.41 2.13.64 3.59.71 4.25-2.43-.15-5-.32-7.48-.43a.24.24 0 0 1 0-.08.09.09 0 0 0 0 .12q25.05 1.26 50 3.14l7.45.61 1.38-15.82c.3-3.29-2.08-5.8-7.9-8.35l-2.38-1c2.9.62 5.58 1.29 7.92 2 7.1 2.15 10.26 4.24 10.34 6.93 0-2.71-3.18-4.83-10.34-7a141.83 141.83 0 0 0-21.71-4.31 151.81 151.81 0 0 0-18.82-1.32h-3.26c-7.93.31-11.49 1.7-11.86 4.67l-2 15.74Z" class="cls-6"/>
<path id="cam-drk-grey-pth1" d="m100.65 332.37 34-3.74v-64.82c0 15.68-.2 10.8 0-3.63-1.62-50.52-37.1-68.6-79.52-110.2-39.3-38.55 69.51-13.1 90.47-8a33.72 33.72 0 0 1 9.88-8.22l-.9-8.79a3 3 0 0 1 .19-1.5l1.87-4.32-31.81-2.86C57 112 15.7 116.07 7.9 117l.6 211.81c.93.47 10.16 4.68 44.64 4.68 37.86-.03 47.42-1.1 47.51-1.12Z" class="cls-6"/>
</g>
<g id="cam-light-grey">
<path id="cam-light-grey-pth6" d="m231.57 60.59-.1.23c22.27-.23 45.51-.23 69.33.09V21.44l-57.84 6Z" class="cls-7"/>
<path id="cam-light-grey-pth5" d="M216.3 61v-.26a1.1 1.1 0 0 1 0 .26Z" class="cls-7"/>
<path id="cam-light-grey-pth4" d="M136.27 63.19c13.76-.44 48.68-1.5 71.5-2v-.59l-.92-21.31c-.11-2.44-2.06-4-6.29-5.09 9.54.82 13.72 2.51 13.9 5.61l1.11 20v.36a2.62 2.62 0 0 1 0 .56 5.23 5.23 0 0 0 0-.56v-.36l-1.11-20c-.19-3.18-4.56-4.88-14.65-5.72-3.95-.34-8.55-.49-13.55-.49-4.64 0-9.64.13-14.76.43a214.94 214.94 0 0 0-22.66 2.29l-.92.22c-8.23 2.06-11.7 4.38-11.55 7.76l.79 18.06v.8Z" class="cls-7"/>
<path id="cam-light-grey-pth3" d="m144.73 37-1.26.22c-5 1-8.55 2-10.83 3.21 2.27-1.18 5.81-2.21 10.79-3.19Z" class="cls-7"/>
<path id="cam-light-grey-pth2" d="M217.89 324.34h-.23a4.91 4.91 0 0 1-4.67-3.48 4.89 4.89 0 0 1-4.36-3.74 4.88 4.88 0 0 1-2.83-1.25 5.05 5.05 0 0 1-1.48-2.6 4.89 4.89 0 0 1-2.64-1.37 4.84 4.84 0 0 1-1.36-2.66 4.89 4.89 0 0 1-3.86-4.28 5 5 0 0 1-2.65-1.61 4.87 4.87 0 0 1-1.13-2.77 4.8 4.8 0 0 1-2.47-1.68 5 5 0 0 1-1-3.22 5.07 5.07 0 0 1-2.79-1.87 4.92 4.92 0 0 1-.88-2.85 4.9 4.9 0 0 1-2.3-1.87 4.8 4.8 0 0 1-.76-3 4.87 4.87 0 0 1-3-4.94 4.94 4.94 0 0 1-2.62-5.3 4.86 4.86 0 0 1-2.66-5.24 5 5 0 0 1-1.87-2.26 4.89 4.89 0 0 1-.24-3.09 5.08 5.08 0 0 1-1.87-2.42 4.86 4.86 0 0 1-.13-3 4.68 4.68 0 0 1-1.74-2.41 4.83 4.83 0 0 1 .13-3.39 4.94 4.94 0 0 1-2-2.75 4.83 4.83 0 0 1 .13-3 5 5 0 0 1-1.53-2.58 4.8 4.8 0 0 1 .15-3.13 5 5 0 0 1-1.5-2.71 4.88 4.88 0 0 1 .38-3 5 5 0 0 1-1.31-2.67 4.85 4.85 0 0 1 .69-3.28 4.92 4.92 0 0 1-.81-5.95 4.81 4.81 0 0 1-1.06-2.79 4.69 4.69 0 0 1 .82-3 4.74 4.74 0 0 1-1-2.92 4.65 4.65 0 0 1 .88-2.84 4.87 4.87 0 0 1-.84-2.89 5 5 0 0 1 1.27-3.14 4.87 4.87 0 0 1 .21-6 4.88 4.88 0 0 1 .74-5.74 4.9 4.9 0 0 1-.5-3.05 5 5 0 0 1 1.37-2.66 4.87 4.87 0 0 1 1.34-5.73 4.8 4.8 0 0 1-.3-3.21 4.93 4.93 0 0 1 1.5-2.55 4.86 4.86 0 0 1 0-3 5 5 0 0 1 1.87-2.53 4.93 4.93 0 0 1 1.87-5.48 4.92 4.92 0 0 1 2.45-5.5 4.93 4.93 0 0 1 2.21-5.62 5 5 0 0 1 .25-2.92 5 5 0 0 1 2.24-2 4.88 4.88 0 0 1 2.74-5.07 4.9 4.9 0 0 1 3.53-5.05 4.83 4.83 0 0 1 3.13-5.3 4.79 4.79 0 0 1 .95-2.82 4.84 4.84 0 0 1 2.79-1.87 4.93 4.93 0 0 1 .69-2.57h-30.96l.66 6.59a3 3 0 0 1-1.87 3.09c-.75.28-19 7.33-19 39.11v150.75h82.09l-.17-.17a4.92 4.92 0 0 1-4.69-3.75Zm-53-16.71h-.17a8 8 0 1 1 .17 0Z" class="cls-7"/>
<path id="cam-light-grey-pth1" d="M502.75 134.39a2.92 2.92 0 0 1 1.22-3.25l.31-.21 1.88-1-.32-.67-4.84-9.35-.45.28a3 3 0 0 1-3.74-.56l-3.43-3.89a3 3 0 0 1 .26-4.15 2.57 2.57 0 0 1 .55-.38 3.16 3.16 0 0 1 .93-.34c.32-.15.94-.78 1.33-2.36a14.21 14.21 0 0 0 .36-3.44c0-4.83-2-6.68-2.9-7.24h-9.4v17.42a3 3 0 0 1-2.24 2.88 44.83 44.83 0 0 1-6.42 1L472 127a3.18 3.18 0 0 1-.57.79 2.94 2.94 0 0 1-2.75 1.87h-62.49a5.33 5.33 0 0 1 1.09 1 4.89 4.89 0 0 1 1 3.24 4.84 4.84 0 0 1 2.79 1.87 4.73 4.73 0 0 1 .88 2.84 5 5 0 0 1 3.07 4.91 5 5 0 0 1 2.32 2 4.83 4.83 0 0 1 .63 2.92 4.81 4.81 0 0 1 2.15 2.08 4.86 4.86 0 0 1 .47 3.2 4.87 4.87 0 0 1 2.27 2.3 4.94 4.94 0 0 1 .39 3 4.75 4.75 0 0 1 1.87 2.26 4.82 4.82 0 0 1 .24 3.09 4.83 4.83 0 0 1 1.87 2.4 4.94 4.94 0 0 1 .14 3 4.88 4.88 0 0 1 1.6 5.8 4.85 4.85 0 0 1 1.86 5.73 4.9 4.9 0 0 1 1.53 2.56 4.77 4.77 0 0 1-.3 3.07 4.83 4.83 0 0 1 1.5 2.71 4.93 4.93 0 0 1-.37 3 4.83 4.83 0 0 1 .61 5.93 4.81 4.81 0 0 1 1.44 3 4.73 4.73 0 0 1-.63 2.92 4.9 4.9 0 0 1 .24 5.78A4.79 4.79 0 0 1 435 216a4.86 4.86 0 0 1 .84 2.88 4.74 4.74 0 0 1-1.27 3.14 4.91 4.91 0 0 1-.2 6 4.87 4.87 0 0 1-.75 5.73 4.81 4.81 0 0 1 .5 3.05 4.65 4.65 0 0 1-1.36 2.65 4.92 4.92 0 0 1 .31 3 4.81 4.81 0 0 1-1.66 2.75 4.77 4.77 0 0 1 .3 3.22 4.94 4.94 0 0 1-1.57 2.54 4.89 4.89 0 0 1 0 3 5.09 5.09 0 0 1-1.87 2.53 4.92 4.92 0 0 1-1.88 5.48 4.84 4.84 0 0 1-2.45 5.5 4.89 4.89 0 0 1-2.21 5.61 5 5 0 0 1-.44 3 4.94 4.94 0 0 1-2.19 2.19 4.78 4.78 0 0 1-.57 3 4.87 4.87 0 0 1-2.17 2 4.91 4.91 0 0 1-3.51 5.05 4.92 4.92 0 0 1-3.15 5.32 4.7 4.7 0 0 1-.95 2.82 4.94 4.94 0 0 1-2.79 1.87 4.86 4.86 0 0 1-4 4.89 4.89 4.89 0 0 1-4.42 4.77 4.88 4.88 0 0 1-1.4 3.27 4.82 4.82 0 0 1-3.22 1.44 4.85 4.85 0 0 1-4.85 4.44 4.1 4.1 0 0 1-1.21-.15 4.88 4.88 0 0 1-1.88 4.3 4.76 4.76 0 0 1-3.06 1.11 4.91 4.91 0 0 1-4.68 3.74 4.92 4.92 0 0 1-1.52 2.08h108.5V317h-9.88a8.75 8.75 0 0 1-8.14-9.21V201.7c0-30.57 14-42 18-44.66v-10.11a2.94 2.94 0 0 1 1-2.23 2.8 2.8 0 0 1 .53-.37h.27a3 3 0 0 1 2.85.21 25.23 25.23 0 0 0 9.36 3.57l1.1.17 6.25-3.74-.23-.68Zm-64.82 22.55a7.49 7.49 0 1 1 7.48-7.48 7.49 7.49 0 0 1-7.48 7.48Z" class="cls-7"/>
</g>
<g id="cam-light-grey2">
<path id="cam-light-grey2-pth6" d="M229.45 66.82 222.81 86l-2.13 16a4.57 4.57 0 0 1 1-.92 4.93 4.93 0 0 1 2.73-.84 4.45 4.45 0 0 1 .73 0 4.85 4.85 0 0 1 4.7-3.56h.35A5 5 0 0 1 234.6 94a3.75 3.75 0 0 1 .67 0 4.84 4.84 0 0 1 4.36-2.7h.79a4.77 4.77 0 0 1 2.21-2A5.1 5.1 0 0 1 246 89a4.82 4.82 0 0 1 2.51-2.24 5 5 0 0 1 1.87-.34 4.81 4.81 0 0 1 1.2.15 4.79 4.79 0 0 1 2.42-1.84 5 5 0 0 1 1.59-.26 4.59 4.59 0 0 1 1.51.24 4.79 4.79 0 0 1 2.53-1.87 5.36 5.36 0 0 1 1.38-.21 5.05 5.05 0 0 1 1.59.27 4.87 4.87 0 0 1 2.53-1.58 4.81 4.81 0 0 1 1.2-.15 4.9 4.9 0 0 1 2 .44 4.88 4.88 0 0 1 2.77-1.67 5.52 5.52 0 0 1 1-.09 4.68 4.68 0 0 1 2 .43 4.79 4.79 0 0 1 2.66-1.37h.79a5 5 0 0 1 2.26.54 5 5 0 0 1 2.79-1.31h.58a5 5 0 0 1 2.36.62 5 5 0 0 1 2.75-1.14h.37a4.87 4.87 0 0 1 2.88.95 4.91 4.91 0 0 1 3.15-1.27h.15a5 5 0 0 1 2.73.82 4.74 4.74 0 0 1 2.77-.87 4.51 4.51 0 0 1 .52 0V66.82c-24.59-.32-48.52-.3-71.41 0Z" class="cls-8"/>
<path id="cam-light-grey2-pth5" d="M480.43 85.12h-1.56a3 3 0 0 1-3-2.92v-5c0-.9-.23-1.35-.38-1.44q-8.24-.83-16.5-1.54l-2.32-.18-2.9-.25c-17.39-1.46-34.94-2.67-52.4-3.74l-7-.37-4.4-.23-4.77-.07 5.18 15a1.88 1.88 0 0 1 .13.58l3.84 28.68h70.06a107.79 107.79 0 0 0 14.14-.75V94.35a3 3 0 0 1 1.76-2.71l1-.44Z" class="cls-8"/>
<path id="cam-light-grey2-pth4" d="M378.87 69c-24.32-1.08-48.48-1.76-72.15-2.11v10.88a4.78 4.78 0 0 1 2.24 1 5 5 0 0 1 2.45-.65h.47a4.81 4.81 0 0 1 3 1.46 4.85 4.85 0 0 1 2.59-.75 4 4 0 0 1 .69 0 4.82 4.82 0 0 1 2.69 1.31 4.74 4.74 0 0 1 2.06-.47 6.76 6.76 0 0 1 .9 0 4.9 4.9 0 0 1 2.69 1.5 4.87 4.87 0 0 1 2-.42 4.54 4.54 0 0 1 1.1.14 4.74 4.74 0 0 1 2.56 1.53 4.65 4.65 0 0 1 1.69-.32 5.09 5.09 0 0 1 1.29.19 4.82 4.82 0 0 1 2.75 2.08 4.81 4.81 0 0 1 1.87-.38 5.12 5.12 0 0 1 1.5.25 5 5 0 0 1 2.45 1.76 4.56 4.56 0 0 1 1.27-.16 4.78 4.78 0 0 1 4.1 2.24 4.87 4.87 0 0 1 1.2-.15 4.82 4.82 0 0 1 1.87.39 5 5 0 0 1 2.27 1.88 4.22 4.22 0 0 1 .87-.1 5.14 5.14 0 0 1 2.08.47 4.85 4.85 0 0 1 2.3 2.28 3.55 3.55 0 0 1 .92-.09 4.79 4.79 0 0 1 2.26.56 4.88 4.88 0 0 1 2.15 2.26h.52a4.69 4.69 0 0 1 2.45.68 4.76 4.76 0 0 1 2 2.32h.36a4.83 4.83 0 0 1 4.51 3 4.92 4.92 0 0 1 4.71 3.74h.25a4.91 4.91 0 0 1 4.68 3.48 5 5 0 0 1 2.75 1.15 5.68 5.68 0 0 1 .75.8L384.71 86Z" class="cls-8"/>
<path id="cam-light-grey2-pth3" d="M156.4 73.13V71a3.06 3.06 0 0 1 .8-2.13 2.72 2.72 0 0 1 .72-.54l-15.92.55c-.26.45-.54.9-.82 1.33s-.88 1.23-1.35 1.87a21.57 21.57 0 0 1-1.6 1.92C124.1 88.66 92.29 93.6 62 96.35c-3.22.3-6.25.43-9.08.43C29 96.78 19 87.05 15 80.74l-1.44 5.19A3 3 0 0 1 11 88.1h-.9l-2.26 3.09V111c9.6-1.07 50.94-4.88 117.48-.6l32.68 2.96L156.4 75Z" class="cls-8"/>
<path id="cam-light-grey2-pth2" d="m225.28 60.65 10.82-31.46a121.63 121.63 0 0 0-13.91 31.49v.25h3.09Z" class="cls-8"/>
<path id="cam-light-grey2-pth1" d="m194.67 67.89-32.39 1.2v1.47l1.57 43h42a4.55 4.55 0 0 1 3.16-1.32 4.47 4.47 0 0 1 1.2.18 5.43 5.43 0 0 1 0-1.14 5.55 5.55 0 0 1 1.87-3.74 4.67 4.67 0 0 1 2-1.07l3-25a2.3 2.3 0 0 1 .14-.63l4.19-13.94Z" class="cls-8"/>
</g>
<circle id="shutter-bg-gradient" cx="299.19" cy="215.04" r="100.4" fill="url(#radial-gradient)"/>
<g id="shutter-clipped" clip-path="url(#clip-path)">
<path id="shutter" d="M399.18 172.8a108.87 108.87 0 1 0 8.53 42.2 108.23 108.23 0 0 0-8.53-42.2Zm4.42 18.2H287.85l44.63-77.53a1.12 1.12 0 0 0 .11-.25A107.54 107.54 0 0 1 403.6 191Zm-104.41-83.09a106.68 106.68 0 0 1 31.27 4.66l-57.73 100.27-44.73-77.5a1.09 1.09 0 0 0-.13-.17 106.74 106.74 0 0 1 71.32-27.26Zm-73 28.78L284 236.85h-89.44a1.09 1.09 0 0 0-.26 0 107.11 107.11 0 0 1 31.9-100.2Zm-31.42 102.38h115.75l-44.63 77.53a1.86 1.86 0 0 0-.1.25 107.57 107.57 0 0 1-71.02-77.78Zm104.42 83.11a106.68 106.68 0 0 1-31.27-4.66l57.73-100.27 44.74 77.5.12.17a106.72 106.72 0 0 1-71.32 27.26Zm73-28.78-57.85-100.17h89.47a1.18 1.18 0 0 0 .27 0 107.09 107.09 0 0 1-31.91 100.2Z" class="cls-2"/>
</g>
<ellipse id="glare" cx="264.95" cy="180.81" fill="url(#linear-gradient2)" rx="63.78" ry="43.48" transform="rotate(-45 264.955 180.812)"/>
</svg>
https://jsfiddle.net/patricktrefry/cukr7zLw/4/
Ive attempting standard css styling techniques to modify the paths positioning but that doesnt appear to work with svg elements. I believe I need to set the paths' positioning from whatever its defaulted at to be center and vertically oriented in order for this to work as intended, but Im unsure of how I might do that.
.camera-v3c {
width:100% !important;
height: auto !important;}
.camera-v3c .cls-1{fill:none;}
.camera-v3c .cls-2{fill:#231f20;}
.camera-v3c .cls-3{fill:#3d3b3c;}
.camera-v3c .cls-4{fill:#b5b6b6;}
.camera-v3c .cls-5{fill:#686969;}
.camera-v3c .cls-6{fill:#2d2e2d;}
.camera-v3c .cls-7{fill:#434343;}
.camera-v3c .cls-8{fill:#575757;}
.camera-v3c #shutter.cls-2{
-webkit-transform: scale(0);
transform: scale(0);
fill: black;
}
.camera-v3c:hover #shutter.cls-2{
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
animation-name: shutter;
animation-duration: .3s;
}
#keyframes shutter {
0% {
fill: black;
-webkit-transform: scale(0);
transform: scale(0);}
25% {
fill: rgba(52, 12, 25, 1);
-webkit-transform: scale(0.5);
transform: scale(0.5);}
50% {
fill: rgba(255,0,152,1);
-webkit-transform: scale(1);
transform: scale(1);}
75% {
fill: rgba(52, 12, 25, 1);
-webkit-transform: scale(0.5);
transform: scale(0.5);}
100% {
fill: black;
-webkit-transform: scale(0);
transform: scale(0);}
}
<svg class="camera-v3c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 746.25 746.25">
<defs>
<style>
.cls-9{fill:url(#radial-gradient);}
.cls-10{clip-path:url(#clip-path);}
.cls-11{fill:url(#linear-gradient-white);}
</style>
<radialGradient id="radial-gradient" cx="373.12" cy="373.12" r="100.4" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#231f20" stop-opacity="0"/>
<stop offset="0.44" stop-color="#231f20" stop-opacity="0.43"/>
<stop offset="0.89" stop-color="#231f20"/>
</radialGradient>
<clipPath id="clip-path">
<circle id="clip" class="cls-1" cx="373.12" cy="373.12" r="100.4"/>
</clipPath>
<linearGradient id="linear-gradient-white" x1="281.23" y1="373.12" x2="348.19" y2="373.12" gradientTransform="matrix(0, 1.3, -1, 0, 712.01, -69.81)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="0.84" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
</defs>
<path id="cam-light-grey4" class="cls-2" d="M587.46,300.22l-.33-.62-1.87-5.82a7.85,7.85,0,0,0,1.66-9.35l-.32-.62-4.84-9.36a8,8,0,0,0-4.53-3.95,13.41,13.41,0,0,0,.67-1.87,22.69,22.69,0,0,0,.6-5.33c0-8.65-4.51-12.54-6.46-13.81a7.81,7.81,0,0,0-4.3-1.29h-4.68l-.88-6a7.89,7.89,0,0,0-4.43-6v-.83a9,9,0,0,0-4.17-8.19,7.63,7.63,0,0,0-3.34-1.13c-3.74-.37-7.74-.74-11.75-1.1l1.87-14.07c1.37-10.84-11.22-14.6-15.85-16a147.3,147.3,0,0,0-23-4.58,162.3,162.3,0,0,0-19.82-1.39h-3.58c-4.47.19-15.66.64-18.71,8.91a136.53,136.53,0,0,0-6.83-13.29,7.83,7.83,0,0,0-4.79-3.63,7.9,7.9,0,0,0-1.4-5.84,93.1,93.1,0,0,0-8.85-10.38,7.92,7.92,0,0,0-4.94-2.3l-51.31-4.25h-.66a7.87,7.87,0,0,0-2.95.58,7.92,7.92,0,0,0-3-.58h-.66l-51.29,4.25a7.75,7.75,0,0,0-5,2.3,99.22,99.22,0,0,0-8.87,10.44,7.69,7.69,0,0,0-1.56,4.87,9.66,9.66,0,0,0-1.49.71,7.89,7.89,0,0,0-2.08,1.87,7.61,7.61,0,0,0-.51.75,127.27,127.27,0,0,0-7.18,13.25c-1.4-10.43-15-11.59-21.71-12.15-4.15-.34-8.92-.5-14.2-.5-4.85,0-10,.15-15.19.43a225.53,225.53,0,0,0-29.21,3.33c-6.78,1.33-20.89,4.09-20.25,15.45l.93,16.84-4.28.06a7.81,7.81,0,0,0-3.89,1.24,3.68,3.68,0,0,0,0-.47,8.79,8.79,0,0,0-1.24-3.59c-1.53-2.53-4.26-4.33-8.59-5.62a8.21,8.21,0,0,0-1-1.16c-1.14-1-3.55-3.27-14.74-3.27-1.63,0-3.35,0-5.13.15-2.52.15-5.2.39-7.93.73a91.53,91.53,0,0,0-16.94,3.59,19.66,19.66,0,0,0-7.48,4,8.66,8.66,0,0,0-1.87,2.66l-.51.28-.3.23-.62.43a15.7,15.7,0,0,0-3.25,3.21,9.74,9.74,0,0,0-1,1.71h-.4c-12.65.86-19.66,1.44-19.74,1.44h-1a7.56,7.56,0,0,0-2,.47l-3.74,1.42a7.91,7.91,0,0,0-4.15,3.74,7.87,7.87,0,0,0-5.17,5.37L80.73,239a8,8,0,0,0-3,2.41l-2.24,3A7.8,7.8,0,0,0,74,249.12V269a7.8,7.8,0,0,0,.58,3.13,7.63,7.63,0,0,0-.59,3l.59,211.81a7.91,7.91,0,0,0,4.29,7l.84.39a7.85,7.85,0,0,0,1.87,5.31l12.22,14.69a7.87,7.87,0,0,0,3.74,2.49,114.81,114.81,0,0,0,23.13,3.88c6.59.54,14.08.8,22.25.8,25.21,0,50.53-2.58,55.34-3.09a7.71,7.71,0,0,0,2.69-.82,8,8,0,0,0,3.22.71H518.49a8.18,8.18,0,0,0,1,0l24-3.09a7.79,7.79,0,0,0,4.75-2.45l13.83-15a7.72,7.72,0,0,0,2.23-5.46v-.4a7.85,7.85,0,0,0,2.28-5.61V475a7.52,7.52,0,0,0-.52-2.69,7.67,7.67,0,0,0,.52-2.71V322a7.69,7.69,0,0,0-.82-3.46,7.86,7.86,0,0,0,.82-3.46V312.7a33.44,33.44,0,0,0,4.74,1.16l1.46.23a9.55,9.55,0,0,0,4.94-1.09l6.25-3.65A7.87,7.87,0,0,0,587.46,300.22Z"/><path id="cam-light-grey3" class="cls-3" d="M272.49,372A100.84,100.84,0,0,0,373.33,472.84h0A100.84,100.84,0,1,0,272.49,372Z"/><g id="cam-btn"><path id="cam-btn-pth2" class="cls-4" d="M180.39,221.29a8.1,8.1,0,0,0-4.23-2.25,7.21,7.21,0,0,1-2.21,2.12,20.49,20.49,0,0,1-3.08,1.52L170,223l-1,.36c-1.72.56-3.74,1.12-5.95,1.63-3.41.79-6.87,1.42-10.34,1.87-2.66.31-5.26.56-7.73.71h-1.63a53.91,53.91,0,0,1-11.7-.58,8.92,8.92,0,0,1-3.89-1.41l-.15-.13-.32-.28h-.24l-.43.32A7.93,7.93,0,0,0,125,227a1.35,1.35,0,0,0-.33.74.9.9,0,0,0,.18.45,6.17,6.17,0,0,0,2.51,1.52,28,28,0,0,0,4.68,1.31,54.31,54.31,0,0,0,9.35,1,88.14,88.14,0,0,0,11.94-.52,85.45,85.45,0,0,0,12.9-2.4h.3a51.07,51.07,0,0,0,7.48-2.54,20.4,20.4,0,0,0,5.31-3.26,6.3,6.3,0,0,0,.77-.78l.21-.32a1.94,1.94,0,0,0,.22-.43.2.2,0,0,0,0-.15A.59.59,0,0,0,180.39,221.29Z"/><path id="cam-btn-pth1" class="cls-4" d="M130.67,221.85a5,5,0,0,0,1.87.6h.12a51.67,51.67,0,0,0,10.62.49h1.56c2.22-.13,4.69-.36,7.39-.7,3.32-.4,6.63-1,9.9-1.7,2-.47,3.89-1,5.5-1.51,1.18-.42,2.06-.77,2.75-1.09a7.45,7.45,0,0,0,1.16-.64c.58-.37.8-.63.86-.78a.25.25,0,0,0,0-.17c-.79-.71-5.76-1.55-14.15-1.07-2.22.12-4.71.34-7.48.68a82.33,82.33,0,0,0-15.38,3.23,13.34,13.34,0,0,0-4.72,2c-.19.19-.26.32-.24.38A.41.41,0,0,0,130.67,221.85Z"/></g><g id="cam-grey-pth1"><path id="cam-grey-pth12" class="cls-5" d="M373.14,241.37a131.74,131.74,0,0,0,0,263.47h0a131.74,131.74,0,0,0,0-263.47Zm0,247.57h0A115.82,115.82,0,1,1,489,373.12,116,116,0,0,1,373.12,488.94Z"/><path id="cam-grey-pth11" class="cls-5" d="M273.5,279.71a4.79,4.79,0,0,1,.55-2.06H236.94l-1.48,3.24h35.29A4.94,4.94,0,0,1,273.5,279.71Z"/><path id="cam-grey-pth10" class="cls-5" d="M539.54,277.62H470.9a3.78,3.78,0,0,1,.21.8,4.86,4.86,0,0,1,3.74,3.41H541l2-4.21Z"/><path id="cam-grey-pth9" class="cls-5" d="M116.75,240.56a3.75,3.75,0,0,1,0-.67,2.09,2.09,0,0,1,0-.5v-.12l1.09-7.31c-12.13.82-19.09,1.38-19.71,1.44h-.88l-3.74,1.42c2.82,5.09,11.43,14.71,35.52,14.09C121.32,247.43,117.18,244.66,116.75,240.56Z"/><path id="cam-grey-pth8" class="cls-5" d="M465.7,221.66c2.53.12,5.05.29,7.49.44-.08-.66-.3-2.12-.72-4.25L474,200.31a4.42,4.42,0,0,1,1.87-3.38c-6.19.48-9.06,1.87-9.36,4.53l-2,15.66v.07c.69,2.41,1.07,4,1.16,4.39Z"/><path id="cam-grey-pth7" class="cls-5" d="M524.53,209.67l-1.37,15.82v.09l7.26.58,2.08-16.3a3.79,3.79,0,0,0,0-.58c-.07-2.69-3.23-4.78-10.33-6.93-2.34-.69-5-1.36-7.92-2l2.38.95C522.46,203.87,524.83,206.38,524.53,209.67Z"/><path id="cam-grey-pth6" class="cls-5" d="M217.37,195.3c-5,1-8.52,2-10.79,3.19-2,1-3,2.18-3.17,3.53a3,3,0,0,0,0,.6l1,17,.15,1.87,5.72-.21.93,0v-.8l-.79-18.06c-.15-3.38,3.31-5.71,11.55-7.76l.91-.22.17,0c-1.51.23-2.94.47-4.31.72Z"/><path id="cam-grey-pth5" class="cls-5" d="M280.78,197.36l.92,21.31v.59h0l7.73-.15h.78v0a2.17,2.17,0,0,0,0-.26h-.7a2.62,2.62,0,0,0,0-.56v-.36l-1.1-20c-.19-3.11-4.36-4.79-13.9-5.61C278.73,193.32,280.67,194.92,280.78,197.36Z"/><path id="cam-grey-pth4" class="cls-5" d="M202.27,227.47l-9.73.41.41.58a6.15,6.15,0,0,1,1.72,3.63,6.71,6.71,0,0,1-1.76,5.16,46.82,46.82,0,0,0,12.61-7.37q.84-.7,1.59-1.44a16.48,16.48,0,0,0,1.13-1.22l-3.13.13Z"/><path id="cam-grey-pth3" class="cls-5" d="M373.12,268.28A103.57,103.57,0,1,0,476.69,371.85,103.57,103.57,0,0,0,373.12,268.28Zm.25,204.56h0A100.84,100.84,0,1,1,474.17,372,100.84,100.84,0,0,1,373.33,472.84Z"/><path id="cam-grey-pth2" class="cls-5" d="M373.12,259.86A113.27,113.27,0,1,0,486.39,373.12,113.26,113.26,0,0,0,373.12,259.86Zm0,220.45A108.52,108.52,0,1,1,481.64,371.8,108.52,108.52,0,0,1,373.12,480.31Z"/></g><g id="cam-drk-grey"><path id="cam-drk-grey-pth7" class="cls-6" d="M450.66,221l-12.2-35.55-57.84-6v39.59c23,.36,46.48,1,70.07,2Z"/><path id="cam-drk-grey-pth6" class="cls-6" d="M457.09,221.38l2.47.14a139.78,139.78,0,0,0-13.75-32.92L457,221.4Z"/><path id="cam-drk-grey-pth5" class="cls-6" d="M175.3,496.33c-.35,0-9.71,1.12-48.2,1.12-20.59,0-32.66-1.46-39.54-2.92l12.22,14.69a108.27,108.27,0,0,0,21.54,3.57c29.94,2.42,68.88-1.51,76.1-2.28l.15-.28,9.17-17.38Z"/><path id="cam-drk-grey-pth4" class="cls-6" d="M440.2,492.27a5.33,5.33,0,0,1-1.07.82,5,5,0,0,1-2.36.6h-.69a4.94,4.94,0,0,1-4.36,2.69,3.48,3.48,0,0,1-.79,0,4.77,4.77,0,0,1-2.2,2,5,5,0,0,1-2,.43,5.1,5.1,0,0,1-1.4-.21,4.8,4.8,0,0,1-2.51,2.25,4.93,4.93,0,0,1-1.78.33,4.1,4.1,0,0,1-1.21-.15,4.68,4.68,0,0,1-2.38,1.87,5.36,5.36,0,0,1-1.59.27,5.1,5.1,0,0,1-1.5-.23,4.83,4.83,0,0,1-2.54,1.76,4.68,4.68,0,0,1-1.39.21,5.1,5.1,0,0,1-1.59-.27,5,5,0,0,1-2.52,1.59,5.46,5.46,0,0,1-1.2.14,5,5,0,0,1-2-.43,4.83,4.83,0,0,1-2.77,1.66,5.46,5.46,0,0,1-1,0,4.88,4.88,0,0,1-2-.43,4.73,4.73,0,0,1-2.65,1.37,5.21,5.21,0,0,1-.79,0,5,5,0,0,1-2.26-.56,4.77,4.77,0,0,1-2.79,1.3h-.58a4.9,4.9,0,0,1-2.34-.59,4.86,4.86,0,0,1-2.77,1.12h-.38a4.93,4.93,0,0,1-2.88-1,4.87,4.87,0,0,1-3.14,1.28h-.13a4.75,4.75,0,0,1-2.73-.83,4.81,4.81,0,0,1-2.79.88,4.89,4.89,0,0,1-2.92-1,4.86,4.86,0,0,1-2.71.83h-.29a4.8,4.8,0,0,1-2.76-1.07,5,5,0,0,1-2.46.65h-.46a4.91,4.91,0,0,1-3-1.46,4.79,4.79,0,0,1-2.58.75,4,4,0,0,1-.69,0,4.73,4.73,0,0,1-2.68-1.29,5.11,5.11,0,0,1-2.07.45,4.51,4.51,0,0,1-.9,0,4.92,4.92,0,0,1-2.7-1.5,4.82,4.82,0,0,1-2,.42,4.54,4.54,0,0,1-1.1-.14,4.72,4.72,0,0,1-2.55-1.51,5.16,5.16,0,0,1-1.7.3,4.33,4.33,0,0,1-1.29-.19,4.76,4.76,0,0,1-2.75-1.87,4.66,4.66,0,0,1-1.87.37,4.36,4.36,0,0,1-1.52-.24,4.79,4.79,0,0,1-2.41-1.76,5.16,5.16,0,0,1-1.29.19,4.76,4.76,0,0,1-1.71-.32,4.71,4.71,0,0,1-2.39-1.87,4.07,4.07,0,0,1-1.2.15,4.95,4.95,0,0,1-4.14-2.25,6.46,6.46,0,0,1-.88,0,4.85,4.85,0,0,1-4.37-2.73,4.71,4.71,0,0,1-.92,0,4.86,4.86,0,0,1-4.31-2.62H213.68l-9.36,17.95v.15H518.69l24-3.07,14-15H440.2Z"/><path id="cam-drk-grey-pth3" class="cls-6" d="M546,359.78V465.84c0,2.06,1.25,3.75,2.73,3.75h9.88V322C553.8,326.64,546,337.46,546,359.78Z"/><path id="cam-drk-grey-pth2" class="cls-6" d="M466.52,201.46c.3-2.66,3.17-4.05,9.36-4.53a4.42,4.42,0,0,0-1.87,3.38l-1.54,17.54c.42,2.13.64,3.59.72,4.25-2.44-.15-5-.32-7.49-.44l0-.08a.12.12,0,0,0,0,.13l0,0c16.69.84,33.38,1.87,50,3.14l7.46.61,1.37-15.82c.3-3.29-2.07-5.8-7.89-8.35l-2.38-.95c2.9.62,5.58,1.29,7.92,2,7.1,2.15,10.26,4.24,10.33,6.93,0-2.71-3.17-4.83-10.33-7A142.07,142.07,0,0,0,500.47,198a153.94,153.94,0,0,0-18.83-1.33h-3.25c-7.94.32-11.49,1.71-11.87,4.68l-2,15.74v0Z"/><path id="cam-drk-grey-pth1" class="cls-6" d="M174.59,490.45l34-3.74V421.89c0,15.68-.21,10.8,0-3.63-1.63-50.53-37.11-68.6-79.53-110.2-39.29-38.55,69.52-13.1,90.48-8a33.6,33.6,0,0,1,9.88-8.22l-.9-8.79a2.86,2.86,0,0,1,.19-1.5l1.87-4.32-31.81-2.86c-67.87-4.36-109.15-.25-117,.65l.6,211.81c.94.47,10.16,4.68,44.65,4.68C165,491.54,174.5,490.47,174.59,490.45Z"/></g><g id="cam-light-grey"><path id="cam-light-grey-pth6" class="cls-7" d="M305.5,218.67l-.09.23c22.27-.23,45.51-.23,69.33.09V179.52l-57.84,6Z"/><path id="cam-light-grey-pth5" class="cls-7" d="M290.23,219.1v-.26h0a2.17,2.17,0,0,1,0,.26Z"/><path id="cam-light-grey-pth4" class="cls-7" d="M210.21,221.27c13.76-.44,48.68-1.5,71.49-2v-.59l-.92-21.31c-.11-2.44-2-4-6.28-5.09,9.54.82,13.71,2.5,13.9,5.61l1.1,20v.36a2.62,2.62,0,0,1,0,.56h0a2.62,2.62,0,0,0,0-.56v-.36l-1.1-20c-.19-3.18-4.57-4.88-14.65-5.72-4-.34-8.56-.49-13.55-.49-4.64,0-9.64.13-14.77.43a215.21,215.21,0,0,0-22.66,2.29l-.91.22c-8.24,2-11.7,4.38-11.55,7.76l.79,18.06v.8Z"/><path id="cam-light-grey-pth3" class="cls-7" d="M218.67,195.06l-1.27.22c-5,1-8.55,2-10.82,3.21,2.27-1.19,5.8-2.21,10.79-3.19Z"/><path id="cam-light-grey-pth2" class="cls-7" d="M291.82,482.42h-.22a4.93,4.93,0,0,1-4.68-3.48,4.89,4.89,0,0,1-4.36-3.74,4.88,4.88,0,0,1-2.82-1.25,5,5,0,0,1-1.48-2.6,4.86,4.86,0,0,1-2.64-1.37,4.79,4.79,0,0,1-1.37-2.66,4.78,4.78,0,0,1-2.6-1.48,4.68,4.68,0,0,1-1.25-2.8,5.14,5.14,0,0,1-2.66-1.61,4.86,4.86,0,0,1-1.12-2.77,4.72,4.72,0,0,1-2.47-1.69,4.83,4.83,0,0,1-1-3.21,5,5,0,0,1-2.79-1.88,4.87,4.87,0,0,1-.88-2.84,4.84,4.84,0,0,1-3.07-4.86,4.89,4.89,0,0,1-3-4.94,4.92,4.92,0,0,1-2.61-5.3,4.86,4.86,0,0,1-2.66-5.24,5,5,0,0,1-1.87-2.26,4.89,4.89,0,0,1-.25-3.09,5.14,5.14,0,0,1-1.87-2.42,4.94,4.94,0,0,1-.13-3,4.84,4.84,0,0,1-1.74-2.41,4.94,4.94,0,0,1,.13-3.39,4.85,4.85,0,0,1-1.85-5.71,5.31,5.31,0,0,1-1.39-5.71,4.94,4.94,0,0,1-1.49-2.71,4.87,4.87,0,0,1,.37-3,5.1,5.1,0,0,1-1.31-2.67,5,5,0,0,1,.69-3.28,4.91,4.91,0,0,1-1.44-3,5,5,0,0,1,.64-2.92,4.89,4.89,0,0,1-1.07-2.79,4.76,4.76,0,0,1,.83-3,4.68,4.68,0,0,1-1-2.92,4.58,4.58,0,0,1,.88-2.84,4.85,4.85,0,0,1,.43-6,4.87,4.87,0,0,1,.2-6,4.86,4.86,0,0,1,.75-5.74,4.83,4.83,0,0,1,.86-5.71,4.87,4.87,0,0,1,1.35-5.73,4.74,4.74,0,0,1-.3-3.21,4.83,4.83,0,0,1,1.5-2.55,4.86,4.86,0,0,1,0-3,4.94,4.94,0,0,1,1.87-2.53,4.91,4.91,0,0,1,1.87-5.48,4.93,4.93,0,0,1,2.45-5.51,4.89,4.89,0,0,1,2.21-5.61,4.37,4.37,0,0,1,2.43-5.11,4.87,4.87,0,0,1,2.73-5.07,4.91,4.91,0,0,1,3.54-5.05,4.84,4.84,0,0,1,3.12-5.3,4.77,4.77,0,0,1,1-2.82,4.84,4.84,0,0,1,2.79-1.87,4.75,4.75,0,0,1,.69-2.57H234.81l.65,6.59a3,3,0,0,1-1.87,3.09c-.75.28-19,7.33-19,39.11V486.33h82.09a.65.65,0,0,1-.17-.16A4.93,4.93,0,0,1,291.82,482.42Zm-53-16.71h-.17a8,8,0,1,1,.17,0Z"/><path id="cam-light-grey-pth1" class="cls-7" d="M576.69,292.47a2.93,2.93,0,0,1,1.21-3.25l.32-.21,1.87-1-.32-.67L574.93,278l-.45.28a3,3,0,0,1-3.75-.56l-3.42-3.89a2.94,2.94,0,0,1,.26-4.15,2.78,2.78,0,0,1,.54-.38,3.21,3.21,0,0,1,.94-.34c.32-.15.94-.78,1.33-2.36a14.72,14.72,0,0,0,.35-3.44c0-4.83-2-6.68-2.9-7.24h-9.39v17.42a3,3,0,0,1-2.25,2.88,43.32,43.32,0,0,1-6.41,1l-3.86,7.88a2.91,2.91,0,0,1-.56.79,3,3,0,0,1-2.75,1.87H480.13a5.28,5.28,0,0,1,1.08,1,4.89,4.89,0,0,1,1,3.24,4.78,4.78,0,0,1,2.79,1.87,4.73,4.73,0,0,1,.88,2.84,4.92,4.92,0,0,1,3.07,4.9,5.06,5.06,0,0,1,2.32,2,4.82,4.82,0,0,1,.64,2.92,4.86,4.86,0,0,1,2.15,2.08,4.92,4.92,0,0,1,.47,3.2,4.85,4.85,0,0,1,2.26,2.3,4.94,4.94,0,0,1,.39,3,4.73,4.73,0,0,1,1.88,2.26,4.89,4.89,0,0,1,.24,3.09,4.94,4.94,0,0,1,2,5.37,4.88,4.88,0,0,1,1.61,5.8,4.83,4.83,0,0,1,2,2.75,4.75,4.75,0,0,1-.13,3A4.83,4.83,0,0,1,506,345a4.82,4.82,0,0,1,1.49,2.71,4.93,4.93,0,0,1-.37,3,4.83,4.83,0,0,1,.62,5.93,4.81,4.81,0,0,1,1.44,3,4.67,4.67,0,0,1-.64,2.92,4.88,4.88,0,0,1,.25,5.78,4.79,4.79,0,0,1,.13,5.75,4.91,4.91,0,0,1,.84,2.88,4.79,4.79,0,0,1-1.27,3.14,4.91,4.91,0,0,1-.21,6,4.84,4.84,0,0,1-.75,5.73,4.81,4.81,0,0,1,.51,3.05,4.73,4.73,0,0,1-1.37,2.65,4.92,4.92,0,0,1,.32,3,4.78,4.78,0,0,1-1.67,2.75,4.71,4.71,0,0,1,.3,3.22,4.94,4.94,0,0,1-1.57,2.54,4.89,4.89,0,0,1,0,3,5,5,0,0,1-1.87,2.52,4.93,4.93,0,0,1-1.87,5.49,4.87,4.87,0,0,1-.19,3,4.82,4.82,0,0,1-2.26,2.53,4.89,4.89,0,0,1-2.21,5.61,5,5,0,0,1-.45,3,4.84,4.84,0,0,1-2.19,2.19,4.78,4.78,0,0,1-.56,3,4.87,4.87,0,0,1-2.17,2,4.93,4.93,0,0,1-3.52,5,4.91,4.91,0,0,1-3.14,5.32,4.71,4.71,0,0,1-1,2.82,5,5,0,0,1-2.78,1.87,4.86,4.86,0,0,1-4,4.89,4.79,4.79,0,0,1-1.23,3.16,4.9,4.9,0,0,1-3.18,1.61,4.84,4.84,0,0,1-1.41,3.27,4.78,4.78,0,0,1-3.22,1.44,4.84,4.84,0,0,1-4.84,4.44,4.21,4.21,0,0,1-1.22-.15,4.87,4.87,0,0,1-1.87,4.3,4.78,4.78,0,0,1-3.07,1.11,16,16,0,0,0-6.19,5.82H558.16V475.07h-9.88a8.74,8.74,0,0,1-8.14-9.21V359.78c0-30.57,14-42,18-44.66V305a2.94,2.94,0,0,1,1-2.23,2.73,2.73,0,0,1,.52-.37h.19a2.94,2.94,0,0,1,2.84.21,25.23,25.23,0,0,0,9.36,3.57l1.1.17,6.25-3.74-.22-.68ZM511.86,315a7.49,7.49,0,1,1,7.49-7.48A7.48,7.48,0,0,1,511.86,315Z"/></g><g id="cam-light-grey2"><path id="cam-light-grey2-pth6" class="cls-8" d="M303.39,224.9l-6.64,19.22-2.14,16a5.08,5.08,0,0,1,1-.92,4.94,4.94,0,0,1,2.74-.84,4.45,4.45,0,0,1,.73,0,4.85,4.85,0,0,1,4.69-3.56h.36a4.93,4.93,0,0,1,4.41-2.78,3.86,3.86,0,0,1,.68,0,4.84,4.84,0,0,1,4.36-2.7h.78a4.82,4.82,0,0,1,2.21-2,5.13,5.13,0,0,1,3.39-.23,4.82,4.82,0,0,1,2.51-2.24,5.13,5.13,0,0,1,3.07-.19,4.81,4.81,0,0,1,2.37-1.87,5.09,5.09,0,0,1,1.59-.26,4.61,4.61,0,0,1,1.52.24,4.81,4.81,0,0,1,2.52-1.87,5.44,5.44,0,0,1,1.39-.21,5.05,5.05,0,0,1,1.59.27A4.87,4.87,0,0,1,339,239.4a4.79,4.79,0,0,1,1.19-.15,5,5,0,0,1,2,.43A5,5,0,0,1,345,238a5.55,5.55,0,0,1,1-.09,4.68,4.68,0,0,1,2,.43,4.75,4.75,0,0,1,2.66-1.37h.78a5,5,0,0,1,2.27.54,4.94,4.94,0,0,1,2.78-1.31h.58a5,5,0,0,1,2.36.62,5,5,0,0,1,2.75-1.14h.38a4.81,4.81,0,0,1,2.88,1,4.89,4.89,0,0,1,3.14-1.27h.15a5,5,0,0,1,2.73.82,4.82,4.82,0,0,1,2.77-.88h.53V224.9C350.21,224.58,326.27,224.6,303.39,224.9Z"/><path id="cam-light-grey2-pth5" class="cls-8" d="M554.36,243.2h-1.55a3,3,0,0,1-3-2.92v-5c0-.9-.22-1.35-.37-1.44q-8.24-.82-16.51-1.54l-2.32-.19-2.9-.24c-17.38-1.46-34.93-2.67-52.39-3.74l-7-.37-4.4-.23-4.77-.07,5.18,15a1.89,1.89,0,0,1,.14.58l3.83,28.68h70.06a107.94,107.94,0,0,0,14.15-.75V252.43a3,3,0,0,1,1.76-2.72l1-.43Z"/><path id="cam-light-grey2-pth4" class="cls-8" d="M452.81,227.11c-24.33-1.09-48.49-1.76-72.16-2.11v10.85a4.81,4.81,0,0,1,2.25,1,4.91,4.91,0,0,1,2.45-.65h.47a4.78,4.78,0,0,1,3,1.46,4.82,4.82,0,0,1,2.58-.75,4,4,0,0,1,.69,0,4.85,4.85,0,0,1,2.7,1.31,4.71,4.71,0,0,1,2.06-.47,6.61,6.61,0,0,1,.89,0,4.92,4.92,0,0,1,2.7,1.5,4.82,4.82,0,0,1,2-.42,4.63,4.63,0,0,1,1.11.14,4.78,4.78,0,0,1,2.56,1.53,4.64,4.64,0,0,1,1.68-.32,5.24,5.24,0,0,1,1.3.19,4.82,4.82,0,0,1,2.75,2.08,4.81,4.81,0,0,1,1.87-.38,5.34,5.34,0,0,1,1.49.24,5,5,0,0,1,2.44,1.76,4.52,4.52,0,0,1,1.27-.16,4.81,4.81,0,0,1,4.1,2.24,4.75,4.75,0,0,1,3.07.24,5,5,0,0,1,2.26,1.88,4.32,4.32,0,0,1,.88-.1,5,5,0,0,1,2.08.47,4.85,4.85,0,0,1,2.3,2.28,3.55,3.55,0,0,1,.92-.09,4.75,4.75,0,0,1,4.37,2.84h.53a4.71,4.71,0,0,1,2.45.68,4.8,4.8,0,0,1,2,2.32h.36a4.82,4.82,0,0,1,4.5,3,4.93,4.93,0,0,1,4.72,3.74h.24a5,5,0,0,1,3,1,4.91,4.91,0,0,1,1.68,2.45,5,5,0,0,1,2.75,1.15,5.16,5.16,0,0,1,.75.8l-3.27-24.7Z"/><path id="cam-light-grey2-pth3" class="cls-8" d="M230.33,231.21v-2.12a3,3,0,0,1,.81-2.13,2.84,2.84,0,0,1,.71-.54l-15.94.54c-.26.45-.55.9-.83,1.33s-.88,1.23-1.34,1.87a23.52,23.52,0,0,1-1.57,1.87c-14.13,14.71-45.94,19.65-76.28,22.4-3.22.3-6.25.43-9.07.43-23.86,0-33.87-9.73-37.88-16L87.5,244a3,3,0,0,1-2.56,2.17H84l-2.26,3.09V269.1c9.6-1.07,50.93-4.88,117.47-.6l32.66,2.94-1.58-38.36Z"/><path id="cam-light-grey2-pth2" class="cls-8" d="M299.22,218.73,310,187.27a121.94,121.94,0,0,0-13.9,31.49V219h3.09Z"/><path id="cam-light-grey2-pth1" class="cls-8" d="M268.6,226l-32.39,1.2v1.47l1.57,43h42a4.62,4.62,0,0,1,3.16-1.33,4.42,4.42,0,0,1,1.2.19,5.43,5.43,0,0,1,0-1.14,5.63,5.63,0,0,1,1.87-3.74,4.76,4.76,0,0,1,2-1.07l3-25a2.28,2.28,0,0,1,.13-.63L295.34,225Z"/></g><circle id="shutter-bg-gradient" class="cls-9" cx="373.12" cy="373.12" r="100.4"/><g id="shutter-clipped"><g class="cls-10"><path id="shutter" class="cls-2" d="M716.93,227.89a374.37,374.37,0,1,0,29.32,145.23A371.79,371.79,0,0,0,716.93,227.89Zm15.21,62.62h-398L487.6,23.94a3.47,3.47,0,0,0,.35-.85C609.4,63,703.16,164.54,732.14,290.51ZM373.12,4.77a367.19,367.19,0,0,1,107.51,16L282.16,365.55,128.31,99.08a3.51,3.51,0,0,0-.42-.59A366.89,366.89,0,0,1,373.12,4.77ZM122.18,103.7,321,448.11H13.39a4,4,0,0,0-.92.13,368.26,368.26,0,0,1-7.7-75.12C4.77,266.88,50,171,122.18,103.7Zm-108.07,352h398L258.64,722.3a4.56,4.56,0,0,0-.35.86C136.85,683.21,43.09,581.71,14.11,455.74Zm359,285.74a367.17,367.17,0,0,1-107.5-16L464.09,380.7,617.94,647.17a3.43,3.43,0,0,0,.42.58A366.9,366.9,0,0,1,373.12,741.48Zm251-98.94L425.22,298.13H732.86a4,4,0,0,0,.92-.12,368.24,368.24,0,0,1,7.7,75.11C741.48,479.37,696.27,575.25,624.07,642.54Z"/></g></g><ellipse id="glare" class="cls-11" cx="338.89" cy="338.89" rx="63.78" ry="43.48" transform="translate(-140.37 338.89) rotate(-45)"/>
</svg>

Plot n-row data as column gnuplot

I have a data in formatted in 10-columns as follow:
# col1 col2 col3 col4 col5 col6 col7 col8 col9 col10
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20
I want to plot all the data individually as a single column,that is the 11th data will be 11 and so on. How can I do this in gnuplot directly?
example of the data can be obtained here: data
This is a bit a special data format. Well, you could rearrange it with whatever tools, but you can also rearrange with gnuplot only.
For this, you need to have the data in a datablock. How to get it from a file into a datablock see the answer to this question: gnuplot: load datafile 1:1 into datablock
Code:
### plot special dataformat
reset session
$Data <<EOD
#SP# 12 10511.100
265 7 2 5 2 10 6 10 4 4
8 8 4 8 8 7 17 16 12 17
9 23 18 16 18 26 18 31 31 38
35 58 48 95 107 156 161 199 282 398
448 704 851 1127 1399 1807 2272 2724 3376 4077
4903 6458 7158 9045 9279 12018 13765 14212 17397 19166
21159 23650 25537 28003 29645 35385 34328 36021 42720 39998
45825 48111 49548 46591 53471 53888 56166 61747 57867 59226
59888 65953 61544 68233 68770 69336 63925 69660 69781 70590
76419 70791 70411 75909 70082 76136 69906 75069 75168 74690
73897 73656 73134 77603 70795 77603 68092 74208 73385 66906
71924 70866 74408 67869 67703 70924 65004 68566 62694 65917
64636 62988 62372 64923 59231 58266 60636 59191 54090 56428
55222 53519 52724 53973 49649 51418 46858 48289 46800 45395
44235 43087 40999 42777 39129 40020 37985 37019 35739 34925
33344 33968 30874 31292 30141 29528 27956 27001 25712 25842
23857 23752 22900 21926 20853 19897 19063 18997 18345 16499
16631 15810 15793 14158 13609 13429 13022 12276 11579 10810
10930 9743 9601 8939 8762 8338 7723 7470 6815 6774
6342 6056 5939 5386 5264 4889 4600 4380 4151 3982
3579 3557 3335 3220 3030 2763 2769 2516 2409 2329
2310 2153 2122 1948 1813 1879 1671 1666 1622 1531
1584 1455 1430 1409 1345 1291 1300 1284 1373 1261
1189 1373 1258 1220 1134 1261 1213 1116 1288 1087
1113 1137 1182 1087 1213 1061 1132 1211 1004 1081
1130 1144 1208 1089 1114 1088 1116 1188 1137 1150
1216 1101 1092 1148 1115 1161 1262 1157 1206 1183
1177 1274 1203 1150 1161 1206 1215 1166 1248 1217
1212 1250 1239 1292 1226 1262 1209 1329 1178 1383
1219 1175 1265 1264 1361 1206 1266 1285 1189 1284
1330 1223 1325 1338 1250 1322 1256 1252 1353 1269
1278 1281 1349 1256 1326 1309 1262 1374 1303 1293
1350 1297 1262 1144 1305 1224 1259 1292 1447 1187
1342 1267 1197 1327 1189 1248 1250 1198 1290 1299
1233 1173 1327 1206 1231 1205 1182 1232 1233 1158
1193 1137 1180 1211 1196 1176 1096 1131 1086 1134
1125 1122 1090 1145 1053 1067 1097 1003 1044 993
1056 1006 915 959 923 943 1026 930 927 929
914 849 920 818 808 888 877 808 848 867
735 785 769 738 744 716 708 677 660 657
589 626 649 581 578 597 580 539 495 541
528 402 457 435 425 417 415 408 366 375
322 341 292 286 272 313 263 255 246 207
213 176 195 180 181 168 153 140 114 130
106 100 97 92 71 71 72 59 57 49
43 42 35 38 36 26 33 29 29 14
22 19 11 11 14 14 6 6 9 4
7 5 2 5 1 3 0 0 0 2
0 1 3 0 2 0 0 0 0 1
1 0 3 1 0 1 2 1 2 0
0 3 0 0 1 0 0 1 2 0
1 0 0 0 0 0 0 1 2 0
2 3 1 0 0 3 1 0 1 0
0 1 0 1 1 0 0 1 0 0
0 1 0 0 1 2 1 2 0 1
1 1 0 0 0 0 0 0 0 2
1 1 0 0 0 1 0 1 0 1
1 1 1 1 1 0 0 3 0 2
1 1 1 0 1 0 1 0 0 2
1 1 0 1 0 0 0 1 0 1
0 0 0 0 2 3 1 2 0 0
1 2 0 1 2 1 1 1 1 1
1 0 1 0 0 2 1 2 2 1
0 0 1 1 1 0 1 1 1 0
0 2 1 1 1 0 0 0 1 1
0 2 1 1 2 0 2 1 1 1
1 1 0 0 0 2 0 0 1 0
1 0 1 1 2 2 0 0 0 3
2 0 0 0 2 0 1 1 0 1
0 0 0 2 1 4 0 1 0 1
2 0 0 0 0 0 1 0 0 2
0 0 0 0 1 0 0 0 0 0
0 1 0 1 0 0 0 0 1 2
0 0 1 0 1 0 0 1 0 1
0 0 2 1 1 0 0 1 0 0
0 0 0 1 0 0 0 0 0 1
0 0 0 0 0 1 0 0 0 0
0 0 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 1 0 0
1 0 0 0 0 0 0 0 0 0
0 0 0 0 1 0 0 0 0 1
0 0 1 2 0 0 0 0 0 0
0 0 1 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 1 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 1 0 0 0 0 0 0 0
0 0 0 0 0 0 1 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 1 0 0 0 0
1 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0
EOD
set print $Data2
HeaderLines = 1
Line = ''
do for [i=HeaderLines+1:|$Data|] {
Line = Line.sprintf(' %s',$Data[i][1:strlen($Data[i])-1])
}
print Line
set print
WavStart = 450
WavStep = 0.1
myWav(col) = WavStart + column(col)*WavStep
set grid x,y
plot $Data2 u (myWav(1)):0:3 matrix w l lc "red" notitle
### end of code
Result:

fabricjs - extend toSVG to export custom properties

According to this part of the doc, it is possible to extend the toSVG() method to export custom properties. Unfortunately, it is unclear as if we should override toSVG() itself, or rather the toObject() method.
My problem is, I've used this bit of code
fabric.SHARED_ATTRIBUTES.push('class')
fabric.Path.ATTRIBUTE_NAMES.push('class')
fabric.Image.ATTRIBUTE_NAMES.push('class')
So that my imported SVGs objects would have CSS classes. Unfortunately, when using toSVG(), these classes are nowhere to be found in the generated SVG, therefore resulting in this kind of non-blended SVGs (if you set the CSS mix-blend-mode property to 'multiply' for the paths, you'll see the correct image.
How can I tweak toSVG() so that the class property gets exported in my SVG ? DO I have to modify the toSVG() method for every object in the imported SVG ?
You need to extend _toSVG method from each class where you want to add this extra info.
Here is an example for fabric.Path
var site_url = 'http://s3.eu-central-1.amazonaws.com/balibart-s3/SVGMockups2/59f32980b5d8493ef7f29904/front/Layer.svg';
fabric.SHARED_ATTRIBUTES.push('class')
fabric.Path.ATTRIBUTE_NAMES.push('class')
fabric.Image.ATTRIBUTE_NAMES.push('class')
fabric.Path.prototype._toSVG = (function(_toSVG){
return function(){
var svg = _toSVG.call(this);
if(this.class){
svg.splice(1,0,this.class+'" ');
svg.splice(1,0,'class="');
}
return svg;
}
})(fabric.Path.prototype._toSVG)
canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var group = new fabric.Group(objects, {
left: 165,
top: 100,
});
canvas.add(group);
canvas.renderAll();
console.log(canvas.toSVG());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<canvas id='canvas' width="900" height="300"></canvas>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<g xmlns="http://www.w3.org/2000/svg" transform="matrix(1 0 0 1 0.006507237105 4.339693398719)" id="Path-2 back">
<path class="st1" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,130,165); fill-rule: nonzero; opacity: 1;" transform=" translate(-499.991507237105, -504.294693398719)" d="M 132 374.47 c 2.83 -8.49 8.24 -16.11 12.09 -24 c 3.94 -8.12 8.42 -16 12.26 -24.14 c 5.49 -11.66 11.3 -23.16 17.19 -34.61 c 5.11 -9.92 9.87 -20 15.12 -29.87 c 4.32 -8.12 8.23 -16.44 12.49 -24.58 c 6.05 -11.54 12.13 -23.07 18.37 -34.51 c 3.44 -6.31 7.58 -12.22 11.26 -18.39 a 78.8 78.8 0 0 1 10 -13.64 a 55.62 55.62 0 0 1 9.49 -7.8 c 15.37 -10.42 31.13 -20.23 47.07 -29.73 a 394.42 394.42 0 0 1 40.24 -20.5 c 10.29 -4.63 20.46 -9.53 31 -13.66 c 0.23 -0.09 0.43 -0.24 0.66 -0.34 c 6.08 -2.74 4.37 -1.12 4.37 2.9 a 118.46 118.46 0 0 0 5 34.94 a 136.89 136.89 0 0 0 11.55 25.35 a 170.25 170.25 0 0 0 16.8 23.3 c 6.22 7.37 12.5 14.67 19.12 21.66 a 103.62 103.62 0 0 0 22.2 17.86 a 129.32 129.32 0 0 0 19.48 9.63 a 71.31 71.31 0 0 0 17.55 4.25 q 5.64 0.67 11.29 1.26 c 14.09 1.45 27.93 0.48 41.46 -3.84 A 101.4 101.4 0 0 0 572 217.18 a 143 143 0 0 0 33.54 -39.24 a 151.79 151.79 0 0 0 11.78 -24.22 c 2.53 -7 3.56 -14.39 4.25 -21.86 c 0.64 -6.91 0.8 -13.8 1 -20.72 c 0 -2.13 0.57 -4.25 0.45 -6.41 s 1.59 -1.84 2.47 -1.42 c 7.84 3.75 16.08 6.4 24.26 9.24 s 16.27 5.85 24.18 9.36 c 7.05 3.13 13.89 6.67 20.62 10.42 c 7.29 4.06 14.4 8.43 21.67 12.52 c 9.29 5.22 18.4 10.65 26.57 17.59 a 222.23 222.23 0 0 0 20 15.12 c 1.92 1.29 2.5 3.46 3.62 5.23 c 4.74 7.54 9.65 15 14 22.78 c 7.24 13 14 26.32 20.4 39.78 c 4.26 8.94 9.11 17.59 13.66 26.4 c 3.88 7.51 7.66 15.07 11.57 22.56 c 6.79 13 13.5 26.06 20.52 38.94 c 6.33 11.62 13 23 19.54 34.57 c 0.8 1.42 3.91 3.45 -0.19 3.73 c -7.89 3.14 -16.31 6.69 -24 10.35 c -7.5 3.59 -14.88 7.56 -22.17 11.58 c -9.14 5 -18.3 10.16 -27.47 15.16 c -9.7 5.29 -19.38 10.61 -29 16.07 c -14.42 8.19 -28.3 17 -42.27 26 c -0.35 0.22 -2.59 2.12 -2.92 2.38 c -3.43 2.72 -2.21 1.1 -5.85 -1.22 a 8.71 8.71 0 0 0 -3.28 -1.6 c 0.48 4.22 -0.28 8.29 -0.48 12.4 c -0.43 8.72 -0.11 17.45 -0.53 26.15 c -0.6 12.44 -0.6 24.88 -1 37.31 c -0.44 13.1 -0.71 26.21 -1 39.31 c -0.12 4.88 0.1 9.8 -0.43 14.65 c -0.78 7.22 0 14.46 -0.48 21.66 c -0.79 12.51 -0.75 25 -1.09 37.56 c -0.14 5.22 0.11 10.47 -0.44 15.65 c -0.79 7.56 0 15.13 -0.5 22.66 c -0.43 6 0 12 -0.52 17.9 c -0.61 7.1 -0.14 14.18 -0.43 21.25 c -0.53 12.6 -0.86 25.2 -1.13 37.81 c -0.11 5.38 0.07 10.79 -0.39 16.15 c -1 11.13 -0.13 22.28 -0.48 33.41 a 43.23 43.23 0 0 0 1.08 11.29 c 0.91 3.89 0.38 7.69 -0.27 11.51 a 12.52 12.52 0 0 0 -0.27 1.45 c -0.83 16.71 -0.62 33.44 -0.39 50.15 a 109.17 109.17 0 0 0 1.74 15 a 43 43 0 0 1 -0.47 12.82 c -0.16 1.05 -1.4 1.55 -2.65 1.75 a 34.36 34.36 0 0 1 -12.06 0 a 9.25 9.25 0 0 0 -2 0 c -11.79 0.29 -23.52 -1.14 -35.31 -1.18 c -5.36 0 -10.79 0.09 -16.15 -0.37 c -9.22 -0.79 -18.46 0.07 -27.65 -0.57 c -7.07 -0.49 -14.12 0 -21.16 -0.4 c -20.46 -1.08 -40.94 0 -61.4 -0.6 c -5.89 -0.17 -11.81 0.12 -17.65 -0.48 a 105.12 105.12 0 0 0 -15.66 -0.33 c -16 0.74 -32 -0.11 -47.9 0.55 c -11.56 0.48 -23.11 0.12 -34.66 0.37 c -11.07 0.23 -22.1 1 -33.12 2 c -3.46 0.29 -6.94 0.19 -10.41 0.4 c -5.53 0.34 -11.11 0.43 -16.64 0.76 c -7.88 0.48 -15.77 1 -23.64 1.67 c -5.9 0.53 -11.81 1.74 -17.79 1.17 a 42.11 42.11 0 0 1 -6 -1 a 2.54 2.54 0 0 1 -2 -2 c -0.42 -4.59 -1 -9.17 -0.16 -13.81 c 0.49 -2.58 0.25 -5.26 0.5 -7.9 c 0.37 -3.93 1.44 -7.8 1.17 -11.79 c -0.37 -5.66 0.5 -11.36 -0.52 -17 a 11.29 11.29 0 0 1 0 -2 c 0 -23.92 -0.38 -47.84 0.14 -71.74 c 0.31 -14.22 -0.22 -28.45 0.47 -42.65 c 0.4 -8.23 -0.11 -16.46 0.44 -24.66 c 0.9 -13.22 -0.16 -26.46 0.53 -39.65 c 0.67 -12.64 0.29 -25.27 0.38 -37.91 c 0.13 -18.85 0.4 -37.71 -0.11 -56.55 c -0.3 -10.92 0.07 -21.84 -0.4 -32.75 c -0.41 -9.55 -0.06 -19.12 -0.56 -28.65 c -0.72 -13.73 -0.11 -27.44 -0.4 -41.16 c -0.21 -10 -0.47 -20 -1.29 -30.35 c -0.91 1.32 -0.77 2 -1.84 1.38 c -6.73 -3.84 -14.48 -8.45 -21.29 -12.13 c -5 -2.71 -10 -5.37 -15.27 -7.7 c -4.62 -2.06 -9.07 -4.52 -13.71 -6.56 c -9.35 -4.1 -18.75 -8.1 -27.93 -12.54 q -8.46 -4.09 -16.79 -8.48 c -7.35 -3.87 -14.92 -7.33 -22.5 -10.72 c -5.21 -2.33 -10.6 -4.28 -15.93 -6.34 c -7 -2.69 -14 -5.28 -21 -8 C 138.52 377.06 134.83 375.72 132 374.47 Z" stroke-linecap="round"/>
</g>
</svg>
</textarea>
You can override the existing toSVG function like this.
var circle = new fabric.Circle ({
radius: 40,
left: 50,
top: 50,
fill: 'rgb(0,255,0)',
opacity: 0.5,
id: 'hello'
});
circle.toSVG = (function(toSVG) {
return function(){
var svgString = toSVG.call(this);
var domParser = new DOMParser();
var doc = domParser.parseFromString(svgString, 'image/svg+xml');
var parentG = doc.querySelector('circle')
parentG.setAttribute('id', this.id);
return doc.documentElement.outerHTML;
}
})(circle.toSVG)

How to plot spikes of neurons' data set?

I have a dataset that you can see below. I just wanted to plot these spikes of neurons in one graph such as barchart. How can we plot and show this graph visually sensible. I am using Excel at the moment; however, Matlab, Python, R any programming language, software or tool would be helpful.
TIME N1 N2 N3 N4 ALL
0 0 0 0 0 0
0.01 0 1 0 0 1
0.02 0 0 1 0 1
0.03 0 0 0 0 0
0.04 0 0 0 0 0
0.05 0 0 1 0 1
0.06 0 0 0 0 0
0.07 0 0 0 0 0
0.08 1 0 0 0 1
0.09 0 0 0 0 0
0.1 0 0 0 0 0
0.11 0 0 0 0 0
0.12 0 0 0 0 0
0.13 0 0 0 0 0
0.14 0 0 0 0 0
0.15 0 0 0 0 0
0.16 0 1 0 0 1
0.17 0 0 0 0 0
0.18 0 0 0 0 0
0.19 0 0 0 0 0
0.2 0 0 1 0 1
0.21 0 0 0 0 0
0.22 0 0 0 0 0
0.23 1 0 0 0 1
0.24 0 0 0 0 0
0.25 0 0 0 0 0
0.26 1 0 0 0 1
0.27 0 0 0 0 0
0.28 0 0 0 1 1

Convert a vector in R to a dataframe by columns

I would like to convert this vector with strings in each row and spaces separating the elements within one string:
> v.input_red
[1] "pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249 0 0 "
[2] "pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249 0 0 "
[3] "pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249 0 0 "
to a dataframe with a column for each element. But I'm not quite sure how to extract the elements from the strings. Best way would be to convert the whole thing at once somehow, I guess..
Wanted result-dataframe (created manually):
V1 V2 V3 V4 V5 V6 V7 V8 V9 V10 V11 V12 V13 V14 V15 V16 V17 V18 V19 V20 V21 V22 V23 V24 V25 V26 V27 V28 V29 V30 V31 V32 V33 V34 V35
1 pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249
2 pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249
3 pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249
Thanks in advance!
Matthias
For quite some time, read.table and family have had a text argument that lets you read directly from character vectors. There's no need to write the object to a file first.
Your sample data...
v.input_red <- c("pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249 0 0 ",
"pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249 0 0 ",
"pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249 0 0 ")
... directly read in:
read.table(text = v.input_red, header = FALSE)
# V1 V2 V3 V4 V5 V6 V7 V8 V9 V10 V11 V12 V13 V14 V15 V16 V17
# 1 pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0
# 2 pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0
# 3 pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0
# V18 V19 V20 V21 V22 V23 V24 V25 V26 V27 V28 V29 V30 V31 V32 V33
# 1 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff
# 2 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff
# 3 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff
# V34 V35 V36 V37
# 1 0 249 0 0
# 2 0 249 0 0
# 3 0 249 0 0
Assuming file is a file name that you save on your system:
writeLines(v.input_red, file)
data <- read.table(file)
Is this solution what you were looking for?
s1 <- "pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249 0 0 "
s2 <- "pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249 0 0 "
s3 <- "pm 0 100 2.1 59 70 15.5 14.8 31 984 32 0 56 55 0 0 0 0 0 0 -60 -260 0 0 6 0 0 0 0 0 20 8 2ff 0 249 0 0 "
df <- t(data.frame(strsplit(s1, " "),strsplit(s2, " "),strsplit(s3, " ")))
row.names(df) <- c("s1", "s2", "s3")
strsplit splits the string at each space char. Concatenated as data.frame gives you a df wih 3 columns. So you have to transpose it with t. I changes row names for better readability.

Resources