Skip to content

Commit

Permalink
Added disable state; Added tooltips; Remove value and id soruces
Browse files Browse the repository at this point in the history
  • Loading branch information
@dimitrov-adrian
dimitrov-adrian committed Feb 2, 2022
1 parent 4e2dff6 commit df835e2
Show file tree
Hide file tree
Showing 8 changed files with 212 additions and 172 deletions.
30 changes: 16 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,21 @@
# SVG Map Picker

Select a value from a SVG Map box. Basically it's intended to be a select-dropdown or checkboxes replacement, where is
required to pick a value from predefined list, and is nice to have good visual feedback.
![](https://raw.githubusercontent.com/dimitrov-adrian/directus-extension-svgmap-picker-interface/main/screenshot.png)

Selecting a value from a SVG Map box.

Basically it's intended to be a select-dropdown or checkboxes replacement, where is required to pick a value from
predefined list, and is nice to have good visual feedback.

Example usages could be:

- Regional maps (where region code or ID is required to emit, instead of GEO location)
- Automotive part (for example linked to categories)
- Automotive parts categories
- Human body parts

... etc

![](https://raw.githubusercontent.com/dimitrov-adrian/directus-extension-svgmap-picker-interface/main/screenshot.png)

## Installation

In your Directus installation root
Expand All @@ -36,21 +38,21 @@ Restart directus

### What type of SVG I can use?

You can use whatever SVGs you like, it is just necessery to have proper selection (such as class) and have `data-value`
attribute with desired values.
You can use whatever SVGs you like, it is just necessery to have good way to select items (class names are good way to
go) and have `data-value `attribute with desired values.

### Can I use hover/active custom styles in place of the colors of picker?
### Can I use custom styling for hover and active states?

Yes, just use `:hover` pseudo class for hovering effect and `.active` class name for current selected item.

### How to use as M2O interface?

Just setup and ensure the `data-value` is setup to coresponding allowed ID of target collection.
Just setup and ensure the `data-value` is set to coresponding allowed ID of target collection.

### Can I bundle with own SVG in order to reduce manual work?
### Can I bundle my own SVG in order to reduce manual work?

Yes, you could benefit from the reusability and custom Directus extensions, so you could create your own "bundle"
version, just take in mind that you still need to have this extension installed.
Yes, you could benefit from the reusability and custom Directus extensions, so you could create your own packed version.
Just take in mind that you still need to have this extension installed, even using custom bundles.

About how to do that, check the premade demo bundles on
[demo maps](https://github.com/dimitrov-adrian/directus-extension-svgmap-picker-interface/blob/main/demo%20maps). Every
Expand Down Expand Up @@ -83,12 +85,12 @@ of these is ready to be placed in your `./extensions/interfaces`

<!-- Define selectable blocks -->

<g data-value="bue_pill" class="choice">
<g data-value="bue_pill" class="choice" title="The blue pill">
<path d="M130 26c0-11 9-20 20-20h72c11 0 20 9 20 20s-9 20-20 20h-72c-11 0-20-9-20-20z" fill="#426373"/>
<text font-size="20" y="34" x="151" fill="#B1FFFF">Blue Pill</text>
</g>

<g data-value="red_pill" class="choice">
<g data-value="red_pill" class="choice" title="The red pill">
<path d="M7 26C7 15 16 6 27 6h72c11 0 20 9 20 20s-9 20-20 20H27C16 46 7 37 7 26z" fill="#805064"/>
<text font-size="20" y="34" x="29" fill="#FFAFCC">Red Pill</text>
</g>
Expand Down
63 changes: 30 additions & 33 deletions demo maps/bulgarian-provinces/index.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion demo maps/countries/index.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions demo maps/example/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,12 @@ export default {
<!-- Define selectable blocks -->
<g data-value="bue_pill" class="choice">
<g data-value="bue_pill" class="choice" title="The blue pill">
<path d="M130 26c0-11 9-20 20-20h72c11 0 20 9 20 20s-9 20-20 20h-72c-11 0-20-9-20-20z" fill="#426373"/>
<text font-size="20" y="34" x="151" fill="#B1FFFF">Blue Pill</text>
</g>
<g data-value="red_pill" class="choice">
<g data-value="red_pill" class="choice" title="The blue pill">
<path d="M7 26C7 15 16 6 27 6h72c11 0 20 9 20 20s-9 20-20 20H27C16 46 7 37 7 26z" fill="#805064"/>
<text font-size="20" y="34" x="29" fill="#FFAFCC">Red Pill</text>
</g>
Expand Down
99 changes: 49 additions & 50 deletions demo maps/human-muscles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,62 +6,61 @@
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 723">
<style>
.shape { fill: var(--background-normal-alt); stroke: var(--border-normal); stroke-width: 2; }
.muscle-group path { fill: var(--v-button-color-disabled); stroke: var(--v-button-background-color-disabled); stroke-width: 1; transition: fill var(--fast); }
.muscle-group path { fill: var(--v-button-color-disabled); stroke: var(--v-button-background-color-disabled); stroke-width: 1; }
</style>
<path class="shape" d="M153 410c-1 13 11 78 16 103 2 12 7 32 5 43-3 14-4 33-2 44 1 7 4 37 0 49-3 6-7 36-7 36-11 28-5 27-5 27 4 4 10 0 10 0 4 3 7-1 7-1 4 3 9 0 9 0 5 2 9-2 9-2 3 1 4-1 4-1 8 0-5-27-5-27-3-25 3-38 3-38 21-61 22-77 14-100-3-7-3-10-2-12 2-7 0-34 3-45 6-20 12-72 15-96 4-33-14-77-14-77-4-18 2-81 2-81 8 12 8 35 8 35-2 23 19 59 19 59 9 15 13 29 13 30l-1 15 1 9 1 14c-2 23 2 19 2 19 3 0 7-19 7-19 0 5-1 20 1 25 3 7 6-1 6-3 0-30 2-22 2-22 2 25 4 30 8 28 3-1 0-29 0-29 5 17 9 19 9 19 8 6 3-10 2-13-6-17-6-23-6-23 7 15 13 15 13 15 8-3-6-24-14-34l-12-17c-2-7-4-30-4-30-1-26-7-38-7-38-12-18-14-52-14-52v-57c-4-39-33-39-33-39-29-5-33-14-33-14-6-9-3-26-3-26 5-4 7-15 7-15 9-6 8-16 5-16-4 0-3-2-3-2 5-43-33-45-33-45h-6s-38 2-32 45c0 0 0 2-3 2-4 0-4 10 4 16 0 0 2 11 7 15 0 0 4 17-2 26 0 0-4 10-33 14 0 0-29 0-33 39v57s-2 34-14 52c0 0-6 12-7 38 0 0-2 23-5 30-1 4-7 11-11 17-8 10-22 31-15 34 0 0 6 0 14-15 0 0 0 6-6 23-2 3-7 19 2 13 0 0 3-2 8-19 0 0-2 28 1 29 4 2 6-3 7-28 0 0 2-7 3 23 0 1 2 9 6 2 2-5 1-20 1-25 0 0 3 19 7 19 0 0 3 5 2-19l1-14 1-9-1-15c0-1 3-15 13-30 0 0 20-36 19-59 0 0 0-22 8-35 0 0 6 63 2 81 0 0-18 44-14 77 3 24 8 76 14 97 3 10 1 37 4 44 1 3 0 5-2 12-8 23-7 39 14 100 0 0 6 14 3 38 0 0-13 27-5 28h4s4 5 9 2c0 0 5 4 8 0 0 0 4 4 8 1 0 0 6 4 10 0 0 0 6 1-5-27l-7-36c-4-11-1-42 0-49 1-11 0-30-3-44-2-11 4-30 6-42l15-104zm302 0c-1 12 11 77 16 103 2 12 7 32 5 42-3 15-3 34-2 45 1 6 4 37 0 48-3 6-6 38-6 38-2 19 6 22 6 22 9 2 24-4 24-4 53-16 0-18 0-18-3-24 1-44 1-44 21-61 22-77 14-100-3-6-3-9-2-12 2-7 1-33 4-44 5-20 11-72 14-97 4-32-14-76-14-76-4-18 2-81 2-81 8 12 8 35 8 35-2 23 19 59 19 59 9 15 13 29 13 30l-1 15 1 9 1 14c-2 23 2 19 2 19 3 0 7-19 7-19 0 5-2 19 1 25s6-1 6-3c0-30 2-22 2-22 2 24 4 30 8 28 3-2 0-29 0-29 5 16 9 19 9 19 8 6 3-10 2-14-6-17-6-22-6-22 7 15 13 14 13 14 8-2-6-24-15-34l-11-16c-2-7-4-30-4-30-1-27-8-38-8-38-11-18-13-52-13-52l-1-57c-4-39-32-39-32-39-29-4-33-14-33-14-6-9-3-26-3-26 5-4 7-15 7-15 9-6 8-16 4-16-3 0-2-2-2-2 5-43-33-45-33-45h-6s-37 2-32 45c0 0 0 2-3 2-4 0-4 10 4 16 0 0 2 11 7 15 0 0 4 17-2 26 0 0-4 10-33 14 0 0-29 0-33 39v57s-2 34-14 52c0 0-6 11-7 38 0 0-2 23-5 30-1 4-6 11-11 16-8 11-22 32-14 34 0 0 5 1 13-14 0 0 0 6-6 23-1 3-7 19 2 13 0 0 4-3 9-19 0 0-3 28 0 29 4 2 6-4 8-28 0 0 1-8 2 22 0 2 3 10 6 3 2-6 1-20 1-25 0 0 4 19 7 19 0 0 4 4 2-19l1-14 1-9-1-15c0-1 4-15 13-30 0 0 21-36 19-59 0 0 0-23 8-35 0 0 6 63 2 81 0 0-18 44-14 76 3 25 9 77 14 97 3 11 2 38 4 44 1 3 1 6-2 12-8 23-7 40 14 101 0 0 4 19 1 43 0 0-45 1 1 18 0 0 11 6 23 4 0 0 12 1 7-24 0 0-4-30-7-36-4-11-1-42 0-48 1-11 0-30-2-45-2-10 3-30 5-42l15-103Z"/>
<g id="back-muscles" class="muscle-group">
<path id="Trapezius" d="M451 265c0 2 2-10 5-9 3 2 6 9 6 9-1-9 8-24 14-34 7-11 10-12 15-26 2-6 0-42 7-56 8-13 14-12 19-15 2-1-47-5-51-37V81c1-5-25-7-26 0-3 10 15 39-46 48-4 1 13 8 22 22 2 3 2 12 9 58 2 10 22 41 26 56z"/>
<path id="Right_Lat" d="M467 262s18 18 19 29c2 10 2 27 12 25 0 0-4-4 1-11 14-25 14-54 14-54l1-46s-9 3-19-4c-3-2-1 16-12 26-4 4-20 24-16 35Z"/>
<path id="Left_Lat" d="M444 262s-17 18-19 29c-2 10 0 25-9 24 0 0 1-3-3-10-15-25-16-54-16-54v-44s9 1 20-6c2-2 1 16 11 26 4 4 20 24 16 35Z"/>
<path id="Right_Tricep" d="M517 171s13-8 17-5c5 2 13 16 14 22-1 14 3 51 3 51s1 6-4 7c-4 2-4-12-7-13-3-2 0 10-4 11-3 1-13-3-13-3l-8-19s7-41 2-51Z"/>
<path id="Left_Tricep" d="M394 170s-13-8-18-5c-4 2-13 16-14 22 1 17-2 51-2 51s-1 7 3 8c5 2 4-12 8-13 3-2 0 10 3 11 4 1 14-3 14-3l7-19s-7-42-1-52Z"/>
<path id="Left_Glute" d="M404 312c3 0 47 22 50 56 2 34-24 47-47 41-22-6-20-33-20-40 1-4 5-15 8-39 1-5 7-17 9-18z"/>
<path id="Right_Glute" d="M513 317c-3-1-47 12-56 45-8 33 14 50 36 48 21-1 25-28 25-34v-41c0-4-3-17-5-18z"/>
<path id="Right_Hamstring" d="M466 412s43 2 50-4c6-6 5 33-3 75-6 41-3 42-4 41-10-7-13-26-14-25 0 0-19 29-16 51l-19-113c-3-12-5-25 6-25Z"/>
<path id="Left_Hamstring" d="M445 412s-43 2-50-4-6 32 2 74c6 40 3 44 4 43 9-6 14-27 14-26 1 0 20 29 17 51l18-119c3-12 3-19-5-19Z"/>
<path id="Right_Calf" d="M497 529s-20 25-21 35c-3 19 1 56 2 67 3 6 16-14 19-26 4-13-3 11 5 20 1 2 17-49 13-66-3-17-5-17-6-25 0-16-7-5-9 2-1 8-3-7-3-7Z"/>
<path id="Left_Calf" d="M415 529s19 26 20 36c2 25-2 51-3 66-3 6-15-14-18-26-3-13 3 11-5 20-1 2-16-44-14-61 2-19 8-23 7-33 1-9 7-2 9 5 2 8 4-7 4-7Z"/>
<path id="Right_Ankle" d="M472 679s-2-21 6-40c0 0 11 11 7 38 0 0 2-30 14-43 0 0-6 22-3 46 0 0-13 9-24-1Z"/>
<path id="Left_Ankle" d="M441 677s-1-20-9-39c0 0-8 11-4 37 0 0-5-28-17-41 0 0 7 21 4 45 0 0 15 9 26-2Z"/>
<path id="Left_Rear_Deltoid" d="M387 132s-13 0-22 28c0 0 17-3 27 6 0 0 12-10 10-17 0 0 3-8-15-17z"/>
<path id="Right_Rear_Deltoid" d="M525 133s13 0 22 28c0 0-17-3-28 6 0 0-11-10-9-17 0 0-3-8 15-17z"/>
<path id="Lower_Back" d="M428 317s-4-39 27-47c0 0 30-3 29 47 0 0-11 6-28 28 0 0-11-16-28-28z"/>
<path id="Left_Elbow" d="M357 255s13-18 26 0c0 0 3 11-17 21 0 0-12 0-9-21z"/>
<path id="Right_Elbow" d="M554 254s-13-18-26 0c0 0-3 11 17 21 0 0 12 0 9-21z"/>
<path id="Right_Hand_Fingers" d="M587 362s-19-29-27 3c0 0-7 23 16 21 0 0 19-10 11-24Z"/>
<path id="Left_Hand_Fingers" d="M324 362s19-29 27 3c0 0 7 23-16 21 0 0-19-10-11-24Z"/>
<path data-value="Trapezius" d="M451 265c0 2 2-10 5-9 3 2 6 9 6 9-1-9 8-24 14-34 7-11 10-12 15-26 2-6 0-42 7-56 8-13 14-12 19-15 2-1-47-5-51-37V81c1-5-25-7-26 0-3 10 15 39-46 48-4 1 13 8 22 22 2 3 2 12 9 58 2 10 22 41 26 56z"/>
<path data-value="Right_Lat" d="M467 262s18 18 19 29c2 10 2 27 12 25 0 0-4-4 1-11 14-25 14-54 14-54l1-46s-9 3-19-4c-3-2-1 16-12 26-4 4-20 24-16 35Z"/>
<path data-value="Left_Lat" d="M444 262s-17 18-19 29c-2 10 0 25-9 24 0 0 1-3-3-10-15-25-16-54-16-54v-44s9 1 20-6c2-2 1 16 11 26 4 4 20 24 16 35Z"/>
<path data-value="Right_Tricep" d="M517 171s13-8 17-5c5 2 13 16 14 22-1 14 3 51 3 51s1 6-4 7c-4 2-4-12-7-13-3-2 0 10-4 11-3 1-13-3-13-3l-8-19s7-41 2-51Z"/>
<path data-value="Left_Tricep" d="M394 170s-13-8-18-5c-4 2-13 16-14 22 1 17-2 51-2 51s-1 7 3 8c5 2 4-12 8-13 3-2 0 10 3 11 4 1 14-3 14-3l7-19s-7-42-1-52Z"/>
<path data-value="Left_Glute" d="M404 312c3 0 47 22 50 56 2 34-24 47-47 41-22-6-20-33-20-40 1-4 5-15 8-39 1-5 7-17 9-18z"/>
<path data-value="Right_Glute" d="M513 317c-3-1-47 12-56 45-8 33 14 50 36 48 21-1 25-28 25-34v-41c0-4-3-17-5-18z"/>
<path data-value="Right_Hamstring" d="M466 412s43 2 50-4c6-6 5 33-3 75-6 41-3 42-4 41-10-7-13-26-14-25 0 0-19 29-16 51l-19-113c-3-12-5-25 6-25Z"/>
<path data-value="Left_Hamstring" d="M445 412s-43 2-50-4-6 32 2 74c6 40 3 44 4 43 9-6 14-27 14-26 1 0 20 29 17 51l18-119c3-12 3-19-5-19Z"/>
<path data-value="Right_Calf" d="M497 529s-20 25-21 35c-3 19 1 56 2 67 3 6 16-14 19-26 4-13-3 11 5 20 1 2 17-49 13-66-3-17-5-17-6-25 0-16-7-5-9 2-1 8-3-7-3-7Z"/>
<path data-value="Left_Calf" d="M415 529s19 26 20 36c2 25-2 51-3 66-3 6-15-14-18-26-3-13 3 11-5 20-1 2-16-44-14-61 2-19 8-23 7-33 1-9 7-2 9 5 2 8 4-7 4-7Z"/>
<path data-value="Right_Ankle" d="M472 679s-2-21 6-40c0 0 11 11 7 38 0 0 2-30 14-43 0 0-6 22-3 46 0 0-13 9-24-1Z"/>
<path data-value="Left_Ankle" d="M441 677s-1-20-9-39c0 0-8 11-4 37 0 0-5-28-17-41 0 0 7 21 4 45 0 0 15 9 26-2Z"/>
<path data-value="Left_Rear_Deltoid" d="M387 132s-13 0-22 28c0 0 17-3 27 6 0 0 12-10 10-17 0 0 3-8-15-17z"/>
<path data-value="Right_Rear_Deltoid" d="M525 133s13 0 22 28c0 0-17-3-28 6 0 0-11-10-9-17 0 0-3-8 15-17z"/>
<path data-value="Lower_Back" d="M428 317s-4-39 27-47c0 0 30-3 29 47 0 0-11 6-28 28 0 0-11-16-28-28z"/>
<path data-value="Left_Elbow" d="M357 255s13-18 26 0c0 0 3 11-17 21 0 0-12 0-9-21z"/>
<path data-value="Right_Elbow" d="M554 254s-13-18-26 0c0 0-3 11 17 21 0 0 12 0 9-21z"/>
<path data-value="Right_Hand_Fingers" d="M587 362s-19-29-27 3c0 0-7 23 16 21 0 0 19-10 11-24Z"/>
<path data-value="Left_Hand_Fingers" d="M324 362s19-29 27 3c0 0 7 23-16 21 0 0-19-10-11-24Z"/>
</g>
<g id="front-muscles" class="muscle-group">
<path id="Right_Deltoid" d="M124 132s-44-21-60 14c-6 13-2 54-2 56 0 1 13-27 24-33 2-1-1-29 38-37Z"/>
<path id="Left_Deltoid" d="M183 132s42-23 60 14c6 13 2 54 2 56 0 1-13-27-24-33-2-1 1-29-38-37Z"/>
<path id="Right_Bicep" d="M88 170s4 58-1 61-8 31-8 31-2-7-5-7c-3 1-9 6-10 8s-18-60 24-93z"/>
<path id="Left_Bicep" d="M221 177s-4 59 1 61c5 3 7 32 7 32s3-7 6-7 8 6 10 8c1 2 18-60-24-94z"/>
<path id="Right_Pectoral" d="M146 139c-1 14 7 31 7 42 0 14-1 25-26 28-20 2-24-6-31-11-4-2-5-29-9-33-2-2 14-31 37-30 23 0 23 1 22 4z"/>
<path id="Left_Pectoral" d="M160 139c2 14-7 31-7 42 0 14 1 25 26 28 20 2 25-6 31-11 4-2 6-29 9-33 3-2-14-31-36-30-23 0-23 1-23 4z"/>
<path id="Right_Oblique" d="M125 218s5 111 0 115-6-22-23-25c-4-1-1-60-9-74-8-15 29-21 32-16z"/>
<path id="Left_Oblique" d="M181 218s-5 111 0 115c4 4 5-22 23-25 3-1 1-60 9-74 8-15-29-21-32-16z"/>
<path id="Right_Quad" d="M110 333s37 82 34 120c-3 39-7 51-7 61s3-14-9-14c-15 0-26 12-29 24-1 2-2-36-2-36s-5-11-8-46c-5-54 34-73 21-109Z"/>
<path id="Left_Quad" d="M196 333s-38 82-36 120c4 30 10 51 10 61s-1-14 11-14c14 0 22 12 26 24 1 2 3-36 3-36s5-13 8-48c5-54-35-71-22-107Z"/>
<path id="Right_Knee" d="M130 536s0 12-6 18c-5 6-21 5-23-18s16-32 29-13v13z"/>
<path id="Left_Knee" d="M176 536s0 12 5 18c6 6 21 5 23-18 3-23-15-32-28-13 0 0-2 3 0 13z"/>
<path id="Right_Shin" d="M99 568s16-15 29 3c0 0-8 70-3 88 0 0-20-47-26-91z"/>
<path id="Left_Shin" d="M209 568s-17-15-30 3c0 0 9 70 3 88 0 0 20-47 27-91z"/>
<path id="Right_Wrist" d="M28 351s5 10 22 5l1-5s-9-2-8-14c0 0-4 11-11 8l-4 6Z"/>
<path id="Left_Wrist" d="M281 356s-6 11-24 6v-6s9-3 9-16c0 0 6 14 13 11l2 5Z"/>
<path id="Right_Forearm" d="M53 265s19 5 24 18c0 0-7 25-26 54 0 0-3 1-11-4 0 0 5-53 13-68z"/>
<path id="Left_Forearm" d="M254 270s-20 5-24 18c0 0 7 25 26 53 0 0 3 2 11-4 0 0-5-53-13-67z"/>
<path id="Left_Hip" d="m208 316-13 13s33 46 31 58c0 0 4-45-18-71z"/>
<path id="Right_Hip" d="m96 318 13 13s-27 43-26 58c0 0-8-27 13-71Z"/>
<path id="Right_Adductor" d="M119 336s28 86 27 109l4-29 3-35s-11-36-31-49c0 0-4 0-3 4Z"/>
<path id="Left_Adductor" d="M188 337s-29 85-29 108l-4-29-1-36s11-35 31-47c0 0 3-1 3 4Z"/>
<path id="Abs" d="M127 216s26-30 51 0c0 0 2 97-5 121 0 0-20 18-41 0 0 0-6-46-5-121z"/>
<path id="Right_Neck" d="M143 120c-5 8-26 6-32 2 23 3 23-34 19-38 3-2 17 21 13 36Z"/>
<path id="Left_Neck" d="M163 120c7 7 25 6 31 2-23 3-22-34-19-38-3-2-16 21-12 36Z"/>
<path id="Right_Foot" d="M119 666s6-12 16-1c0 0 2 29 9 40 0 0-26 4-34-2 0 0 8-11 9-37Z"/>
<path id="Left_Foot" d="M188 666s-6-12-16-1c0 0-2 29-9 40 0 0 26 4 34-2 0 0-8-11-9-37Z"/>
<path data-value="Right_Deltoid" d="M124 132s-44-21-60 14c-6 13-2 54-2 56 0 1 13-27 24-33 2-1-1-29 38-37Z"/>
<path data-value="Left_Deltoid" d="M183 132s42-23 60 14c6 13 2 54 2 56 0 1-13-27-24-33-2-1 1-29-38-37Z"/>
<path data-value="Right_Bicep" d="M88 170s4 58-1 61-8 31-8 31-2-7-5-7c-3 1-9 6-10 8s-18-60 24-93z"/>
<path data-value="Left_Bicep" d="M221 177s-4 59 1 61c5 3 7 32 7 32s3-7 6-7 8 6 10 8c1 2 18-60-24-94z"/>
<path data-value="Right_Pectoral" d="M146 139c-1 14 7 31 7 42 0 14-1 25-26 28-20 2-24-6-31-11-4-2-5-29-9-33-2-2 14-31 37-30 23 0 23 1 22 4z"/>
<path data-value="Left_Pectoral" d="M160 139c2 14-7 31-7 42 0 14 1 25 26 28 20 2 25-6 31-11 4-2 6-29 9-33 3-2-14-31-36-30-23 0-23 1-23 4z"/>
<path data-value="Right_Oblique" d="M125 218s5 111 0 115-6-22-23-25c-4-1-1-60-9-74-8-15 29-21 32-16z"/>
<path data-value="Left_Oblique" d="M181 218s-5 111 0 115c4 4 5-22 23-25 3-1 1-60 9-74 8-15-29-21-32-16z"/>
<path data-value="Right_Quad" d="M110 333s37 82 34 120c-3 39-7 51-7 61s3-14-9-14c-15 0-26 12-29 24-1 2-2-36-2-36s-5-11-8-46c-5-54 34-73 21-109Z"/>
<path data-value="Left_Quad" d="M196 333s-38 82-36 120c4 30 10 51 10 61s-1-14 11-14c14 0 22 12 26 24 1 2 3-36 3-36s5-13 8-48c5-54-35-71-22-107Z"/>
<path data-value="Right_Knee" d="M130 536s0 12-6 18c-5 6-21 5-23-18s16-32 29-13v13z"/>
<path data-value="Left_Knee" d="M176 536s0 12 5 18c6 6 21 5 23-18 3-23-15-32-28-13 0 0-2 3 0 13z"/>
<path data-value="Right_Shin" d="M99 568s16-15 29 3c0 0-8 70-3 88 0 0-20-47-26-91z"/>
<path data-value="Left_Shin" d="M209 568s-17-15-30 3c0 0 9 70 3 88 0 0 20-47 27-91z"/>
<path data-value="Right_Wrist" d="M28 351s5 10 22 5l1-5s-9-2-8-14c0 0-4 11-11 8l-4 6Z"/>
<path data-value="Left_Wrist" d="M281 356s-6 11-24 6v-6s9-3 9-16c0 0 6 14 13 11l2 5Z"/>
<path data-value="Right_Forearm" d="M53 265s19 5 24 18c0 0-7 25-26 54 0 0-3 1-11-4 0 0 5-53 13-68z"/>
<path data-value="Left_Forearm" d="M254 270s-20 5-24 18c0 0 7 25 26 53 0 0 3 2 11-4 0 0-5-53-13-67z"/>
<path data-value="Left_Hip" d="m208 316-13 13s33 46 31 58c0 0 4-45-18-71z"/>
<path data-value="Right_Hip" d="m96 318 13 13s-27 43-26 58c0 0-8-27 13-71Z"/>
<path data-value="Right_Adductor" d="M119 336s28 86 27 109l4-29 3-35s-11-36-31-49c0 0-4 0-3 4Z"/>
<path data-value="Left_Adductor" d="M188 337s-29 85-29 108l-4-29-1-36s11-35 31-47c0 0 3-1 3 4Z"/>
<path data-value="Abs" d="M127 216s26-30 51 0c0 0 2 97-5 121 0 0-20 18-41 0 0 0-6-46-5-121z"/>
<path data-value="Right_Neck" d="M143 120c-5 8-26 6-32 2 23 3 23-34 19-38 3-2 17 21 13 36Z"/>
<path data-value="Left_Neck" d="M163 120c7 7 25 6 31 2-23 3-22-34-19-38-3-2-16 21-12 36Z"/>
<path data-value="Right_Foot" d="M119 666s6-12 16-1c0 0 2 29 9 40 0 0-26 4-34-2 0 0 8-11 9-37Z"/>
<path data-value="Left_Foot" d="M188 666s-6-12-16-1c0 0-2 29-9 40 0 0 26 4 34-2 0 0-8-11-9-37Z"/>
</g>
</svg>
`;
</svg>`;

export default {
id: 'custom-muscles-name-picker',
Expand Down
Loading

0 comments on commit df835e2

Please sign in to comment.