Skip to content

Commit df835e2

Browse files
dimitrov-adriandimitrov-adrian
committed
Added disable state; Added tooltips; Remove value and id soruces
1 parent 4e2dff6 commit df835e2

File tree

8 files changed

+212
-172
lines changed

8 files changed

+212
-172
lines changed

‎README.md‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@
22
33
# SVG Map Picker
44

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

812
Example usages could be:
913

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

1418
... etc
1519

16-
![](https://raw.githubusercontent.com/dimitrov-adrian/directus-extension-svgmap-picker-interface/main/screenshot.png)
17-
1820
## Installation
1921

2022
In your Directus installation root
@@ -36,21 +38,21 @@ Restart directus
3638

3739
### What type of SVG I can use?
3840

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

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

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

4648
### How to use as M2O interface?
4749

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

50-
### Can I bundle with own SVG in order to reduce manual work?
52+
### Can I bundle my own SVG in order to reduce manual work?
5153

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

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

8486
<!-- Define selectable blocks -->
8587

86-
<g data-value="bue_pill" class="choice">
88+
<g data-value="bue_pill" class="choice" title="The blue pill">
8789
<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"/>
8890
<text font-size="20" y="34" x="151" fill="#B1FFFF">Blue Pill</text>
8991
</g>
9092

91-
<g data-value="red_pill" class="choice">
93+
<g data-value="red_pill" class="choice" title="The red pill">
9294
<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"/>
9395
<text font-size="20" y="34" x="29" fill="#FFAFCC">Red Pill</text>
9496
</g>

‎demo maps/bulgarian-provinces/index.js‎

Lines changed: 30 additions & 33 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo maps/countries/index.js‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo maps/example/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@ export default {
5555
5656
<!-- Define selectable blocks -->
5757
58-
<g data-value="bue_pill" class="choice">
58+
<g data-value="bue_pill" class="choice" title="The blue pill">
5959
<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"/>
6060
<text font-size="20" y="34" x="151" fill="#B1FFFF">Blue Pill</text>
6161
</g>
6262
63-
<g data-value="red_pill" class="choice">
63+
<g data-value="red_pill" class="choice" title="The blue pill">
6464
<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"/>
6565
<text font-size="20" y="34" x="29" fill="#FFAFCC">Red Pill</text>
6666
</g>

‎demo maps/human-muscles/index.js‎

Lines changed: 49 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -6,62 +6,61 @@
66
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 723">
77
<style>
88
.shape { fill: var(--background-normal-alt); stroke: var(--border-normal); stroke-width: 2; }
9-
.muscle-group path { fill: var(--v-button-color-disabled); stroke: var(--v-button-background-color-disabled); stroke-width: 1; transition: fill var(--fast); }
9+
.muscle-group path { fill: var(--v-button-color-disabled); stroke: var(--v-button-background-color-disabled); stroke-width: 1; }
1010
</style>
1111
<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"/>
1212
<g id="back-muscles" class="muscle-group">
13-
<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"/>
14-
<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"/>
15-
<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"/>
16-
<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"/>
17-
<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"/>
18-
<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"/>
19-
<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"/>
20-
<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"/>
21-
<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"/>
22-
<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"/>
23-
<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"/>
24-
<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"/>
25-
<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"/>
26-
<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"/>
27-
<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"/>
28-
<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"/>
29-
<path id="Left_Elbow" d="M357 255s13-18 26 0c0 0 3 11-17 21 0 0-12 0-9-21z"/>
30-
<path id="Right_Elbow" d="M554 254s-13-18-26 0c0 0-3 11 17 21 0 0 12 0 9-21z"/>
31-
<path id="Right_Hand_Fingers" d="M587 362s-19-29-27 3c0 0-7 23 16 21 0 0 19-10 11-24Z"/>
32-
<path id="Left_Hand_Fingers" d="M324 362s19-29 27 3c0 0 7 23-16 21 0 0-19-10-11-24Z"/>
13+
<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"/>
14+
<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"/>
15+
<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"/>
16+
<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"/>
17+
<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"/>
18+
<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"/>
19+
<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"/>
20+
<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"/>
21+
<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"/>
22+
<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"/>
23+
<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"/>
24+
<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"/>
25+
<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"/>
26+
<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"/>
27+
<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"/>
28+
<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"/>
29+
<path data-value="Left_Elbow" d="M357 255s13-18 26 0c0 0 3 11-17 21 0 0-12 0-9-21z"/>
30+
<path data-value="Right_Elbow" d="M554 254s-13-18-26 0c0 0-3 11 17 21 0 0 12 0 9-21z"/>
31+
<path data-value="Right_Hand_Fingers" d="M587 362s-19-29-27 3c0 0-7 23 16 21 0 0 19-10 11-24Z"/>
32+
<path data-value="Left_Hand_Fingers" d="M324 362s19-29 27 3c0 0 7 23-16 21 0 0-19-10-11-24Z"/>
3333
</g>
3434
<g id="front-muscles" class="muscle-group">
35-
<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"/>
36-
<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"/>
37-
<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"/>
38-
<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"/>
39-
<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"/>
40-
<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"/>
41-
<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"/>
42-
<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"/>
43-
<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"/>
44-
<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"/>
45-
<path id="Right_Knee" d="M130 536s0 12-6 18c-5 6-21 5-23-18s16-32 29-13v13z"/>
46-
<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"/>
47-
<path id="Right_Shin" d="M99 568s16-15 29 3c0 0-8 70-3 88 0 0-20-47-26-91z"/>
48-
<path id="Left_Shin" d="M209 568s-17-15-30 3c0 0 9 70 3 88 0 0 20-47 27-91z"/>
49-
<path id="Right_Wrist" d="M28 351s5 10 22 5l1-5s-9-2-8-14c0 0-4 11-11 8l-4 6Z"/>
50-
<path id="Left_Wrist" d="M281 356s-6 11-24 6v-6s9-3 9-16c0 0 6 14 13 11l2 5Z"/>
51-
<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"/>
52-
<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"/>
53-
<path id="Left_Hip" d="m208 316-13 13s33 46 31 58c0 0 4-45-18-71z"/>
54-
<path id="Right_Hip" d="m96 318 13 13s-27 43-26 58c0 0-8-27 13-71Z"/>
55-
<path id="Right_Adductor" d="M119 336s28 86 27 109l4-29 3-35s-11-36-31-49c0 0-4 0-3 4Z"/>
56-
<path id="Left_Adductor" d="M188 337s-29 85-29 108l-4-29-1-36s11-35 31-47c0 0 3-1 3 4Z"/>
57-
<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"/>
58-
<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"/>
59-
<path id="Left_Neck" d="M163 120c7 7 25 6 31 2-23 3-22-34-19-38-3-2-16 21-12 36Z"/>
60-
<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"/>
61-
<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"/>
35+
<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"/>
36+
<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"/>
37+
<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"/>
38+
<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"/>
39+
<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"/>
40+
<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"/>
41+
<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"/>
42+
<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"/>
43+
<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"/>
44+
<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"/>
45+
<path data-value="Right_Knee" d="M130 536s0 12-6 18c-5 6-21 5-23-18s16-32 29-13v13z"/>
46+
<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"/>
47+
<path data-value="Right_Shin" d="M99 568s16-15 29 3c0 0-8 70-3 88 0 0-20-47-26-91z"/>
48+
<path data-value="Left_Shin" d="M209 568s-17-15-30 3c0 0 9 70 3 88 0 0 20-47 27-91z"/>
49+
<path data-value="Right_Wrist" d="M28 351s5 10 22 5l1-5s-9-2-8-14c0 0-4 11-11 8l-4 6Z"/>
50+
<path data-value="Left_Wrist" d="M281 356s-6 11-24 6v-6s9-3 9-16c0 0 6 14 13 11l2 5Z"/>
51+
<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"/>
52+
<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"/>
53+
<path data-value="Left_Hip" d="m208 316-13 13s33 46 31 58c0 0 4-45-18-71z"/>
54+
<path data-value="Right_Hip" d="m96 318 13 13s-27 43-26 58c0 0-8-27 13-71Z"/>
55+
<path data-value="Right_Adductor" d="M119 336s28 86 27 109l4-29 3-35s-11-36-31-49c0 0-4 0-3 4Z"/>
56+
<path data-value="Left_Adductor" d="M188 337s-29 85-29 108l-4-29-1-36s11-35 31-47c0 0 3-1 3 4Z"/>
57+
<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"/>
58+
<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"/>
59+
<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"/>
60+
<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"/>
61+
<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"/>
6262
</g>
63-
</svg>
64-
`;
63+
</svg>`;
6564

6665
export default {
6766
id: 'custom-muscles-name-picker',

0 commit comments

Comments
 (0)