Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add stroke to thick and mohawk hairstyles #60

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+39 −9
Open

Add stroke to thick and mohawk hairstyles #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b73966b
Update mohawk.tsx
pxsanghyo Jul 22, 2024
bde0232
Update thick.tsx
pxsanghyo Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 33 additions & 4 deletions src/hair/mohawk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,39 @@ export default function hairMohawk(props: { color: string, colorRandom: boolean
viewBox="0 0 240 203"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.35" d="M187.986 80.1756C179.986 73.7756 166.153 73.1758 160.486 73.6758L152.486 47.1758C166.086 50.3758 184.486 71.1758 187.986 80.1756Z" fill={subColor} stroke={subColor} strokeWidth="1" />
<path d="M85.7923 14.7636C85.7923 14.7636 91.5301 10.802 115.746 4.70097C139.963 -1.40007 148.792 0.983287 148.792 0.983287L160.581 73.815C160.581 73.815 152.542 73.6416 132.548 78.0085C112.555 82.3754 102.986 87.6748 102.986 87.6748L85.7923 14.7636Z" fill={mainColor} />
<path d="M48.9855 89.6758C42.1855 48.0758 72.3188 21.5091 85.9855 14.1758L102.985 87.6758C83.7855 48.0758 57.6521 72.5091 48.9855 89.6758Z" fill={mainColor} />
<path opacity="0.35" d="M67.4855 133.675C60.2855 106.475 89.4855 91.8415 102.985 87.6749C95.9855 71.3415 79.9854 56.6749 60.4854 74.6756C42.4854 105.175 49.4855 128.676 54.9855 146.675L67.4855 133.675Z" fill={subColor} stroke={subColor} strokeWidth="1" />
<path
opacity="0.35"
d="M187.986 80.1756C179.986 73.7756 166.153 73.1758 160.486 73.6758L152.486 47.1758C166.086 50.3758 184.486 71.1758 187.986 80.1756Z"
fill={subColor}
stroke="#717376"
strokeWidth="1"
/>
<path
opacity="0.35"
d="M67.4855 133.675C60.2855 106.475 89.4855 91.8415 102.985 87.6749C95.9855 71.3415 79.9854 56.6749 60.4854 74.6756C42.4854 105.175 49.4855 128.676 54.9855 146.675L67.4855 133.675Z"
fill={subColor}
stroke="#717376"
strokeWidth="1"
/>
<defs>
<path
id="ld"
d="M115.746 6.676C91.529 12.777 85.792 16.74 85.792 16.74 72.124 24.072 42.184 50.05 48.984 91.65c8.667-17.167 34.8-41.6 54-2 0 0 9.569-5.3 29.563-9.666 19.993-4.367 28.032-4.194 28.032-4.194L148.791 2.96s-8.829-2.384-33.045 3.717Z"
fill={mainColor}
/>
<clipPath id="clip">
<use xlinkHref="#ld" />
</clipPath>
</defs>
<g>
<use
xlinkHref="#ld"
stroke="#171921"
strokeWidth="8"
fill={mainColor}
clipPath="url(#clip)"
/>
</g>
</svg>

);
Expand Down
11 changes: 6 additions & 5 deletions src/hair/thick.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@ export default function hairThick(props: { color: string, colorRandom: boolean }
viewBox="0 0 240 200"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M210.177 51.3965C201.855 91.2936 103.499 96.8962 83.6772 96.8962C31.6548 102.823 56.6248 165.262 66.1772 196.396C58.6772 197.396 59.6772 206.396 30.6772 134.896C7.47724 77.6964 73.1831 42.8337 121.999 30.9995C170.815 19.1653 189.499 2.50195 189.499 2.50195C210.177 11 215.116 27.7185 210.177 51.3965Z" fill={colorRandom && color || "black"} stroke={colorRandom && color || "black"} />
<path d="M205.134 124.947L189.316 71.5069L199.354 62.3644C210.109 99.4523 210.601 120.988 205.134 124.947Z" fill={colorRandom && color || "black"} stroke={colorRandom && color || "black"} />
<path d="M80 170C74.4 142.8 60.3333 147.667 51 149L41 105L81.5844 96.5056C82.3363 96.2656 83.1408 96.0955 84 96L81.5844 96.5056C63.4332 102.299 75.9565 148.796 91 168L80 170Z" fill={colorRandom && color || "black"} stroke={colorRandom && color || "black"} strokeWidth="3" />
<path d="M24.9887 67.3632C33.8341 62.9091 44.2805 65.4873 48.3981 67.3331L36.6273 82.2134C39.6625 77.3568 30.1329 70.2897 24.9887 67.3632Z" fill={colorRandom && color || "black"} />
<path d="M10 84.4996C21.6 77.6996 32.8333 79.9996 37 81.9996L32.5 97.5C31.3 89.1 17 85.3331 10 84.4996Z" fill={colorRandom && color || "black"} />
<path
d="M30.678 134.896c29 71.5 28 62.5 35.5 61.5-3.893-12.689-10.348-30.579-13.107-47.723 9.232-1.538 21.73-3.927 26.93 21.327l11-2c-14.345-18.312-26.398-61.437-11.752-70.43a57.652 57.652 0 0 1 4.43-.674c14.966 0 74.711-3.194 106.66-21.935l14.796 49.986c5.22-3.78 5.007-23.584-4.385-57.648 4.825-4.578 8.165-9.845 9.428-15.903 4.939-23.678 0-40.396-20.678-48.894 0 0-18.684 16.663-67.5 28.498-24.975 6.054-54.37 18.136-74.019 36.153-4.372-1.825-14.431-4.1-22.992.21 4.146 2.359 11.14 7.407 12.11 11.82a68.537 68.537 0 0 0-1.555 2.217C30.582 79.63 20.44 78.38 10 84.5c5.34.636 14.93 2.98 19.71 7.785-5.058 12.458-5.499 26.667.968 42.611Z"
fill={(colorRandom && color) || "black"}
stroke="black"
strokeWidth="3"
/>
</svg>

);
Expand Down