shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

feat(org-chart): add core cards and fixed-layout integration

Browse Source
This commit is contained in:
shkim4 committed 2026-10-12 17:58:30 +09:00
1 parent d18e3c3380
commit 61c6f8d1f1
161 files changed
+13044 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/org-chart/src/assets/cards/README.md
+13
View File
@@ -0,0 +1,13 @@
# OrgChart 1단계 카드 자산
- `대표자.svg`: 사용자가 본문으로 전달한 SVG. 최상단 독립 `topLeader` 전용, 146×74. 부서 자산 매핑에 넣지 않는다.
- `사업관리팀.svg`, `사업관리팀-sm.svg`: 사용자 PNG에서 색상·알파·내측 그라데이션 방향을 추출한 벡터. 조직장 146×68 / 일반 직원 108×52. PNG를 SVG에 삽입하지 않는다.
- 경영기획팀 / 디자인기획팀 / 솔루션통합팀 / 인재성장팀 / 통합시스템 디비전의 큰·작은 SVG 10개: `D:\디자인시스템\카드 이미지`에서 원본 바이트를 그대로 복사했다. SHA-256 일치는 `test-results/org-chart-card-design/browser.json`에서 확인한다.
부서 매핑은 `src/core/department-card-assets.ts`, 대표자 전용 매핑은 `src/core/representative-card-asset.ts`에 있다. `solution-sales`에 솔루션통합팀 자산을 쓰는 것은 이번 작업에서 사용자가 명시 승인했다. 하위 조직은 실제 `parentId`로 상위 부서 자산을 찾으며 데이터 JSON을 수정하지 않는다.
사업관리 PNG 원본은 확장자가 없는 `D:\디자인시스템\카드 이미지\사업관리`(PNG, 408×191)다. 추출 색은 외곽 `#DEE6F0 → #A8BBD1 → #577BA5`(마지막 opacity 0.6), 내측 `#FFFFFF → #E0E6F4`다. 경영기획과 색상 끝점은 같지만 사업관리 PNG의 투명도와 내측 그라데이션 방향을 별도로 유지했다.
재생성: `examples/org-chart/create-business-card-assets.py <원본 PNG 경로>`. Pillow/numpy가 필요하다. 추출 근거는 `business-management-colors.json`, Chrome 실제 래스터 비교는 `business-management-comparison.json`에 보존한다. 신규 벡터의 외곽·곡선 path는 같은 크기의 경영기획 SVG를 재사용한다.
SVG는 `?inline`으로 번들에 포함되고 별도 장식 이미지 레이어로 렌더링된다. 직원 이름·직위·직책·상태·프로필·관계사 로고는 기존 데이터 레이어다. 파견/휴직 보조 영역에는 새 자산을 전달하지 않는다. 고정 카드 크기의 소비자 override는 이 원본 비율 variant에 적용하지 않는다.
packages/org-chart/src/assets/cards/경영기획팀-sm.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="108" height="52" viewBox="0 0 108 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48.494C0 50.4303 1.5697 52 3.50602 52H104.494C106.43 52 108 50.4303 108 48.494V3.50602C108 1.5697 106.43 0 104.494 0H3.50602C1.5697 0 0 1.5697 0 3.50602V48.494Z" fill="url(#paint0_linear_69_2371)"/>
<path d="M1.47852 48.1332C1.47852 49.4241 2.52498 50.4706 3.81587 50.4706H104.334C105.541 50.4706 106.52 49.492 106.52 48.2849C106.52 22.4626 85.5865 1.5294 59.7641 1.5294H3.81587C2.52499 1.5294 1.47852 2.57587 1.47852 3.86675V48.1332Z" fill="url(#paint1_linear_69_2371)"/>
<defs>
<linearGradient id="paint0_linear_69_2371" x1="92.1155" y1="10.1048" x2="66.3798" y2="53.0473" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEE6F0"/>
<stop offset="0.72" stop-color="#A8BBD1"/>
<stop offset="1" stop-color="#577BA5"/>
</linearGradient>
<linearGradient id="paint1_linear_69_2371" x1="57.7525" y1="19.8874" x2="43.9106" y2="50.2297" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.97" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

packages/org-chart/src/assets/cards/경영기획팀.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="146" height="68" viewBox="0 0 146 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 64.494C0 66.4303 1.5697 68 3.50602 68H142.494C144.43 68 146 66.4303 146 64.494V3.50603C146 1.5697 144.43 0 142.494 0H3.50602C1.5697 0 0 1.5697 0 3.50603V64.494Z" fill="url(#paint0_linear_67_1090)"/>
<path d="M2 63.6627C2 64.9535 3.04647 66 4.33735 66H141.663C142.954 66 144 64.9535 144 63.6627V52C144 24.3858 121.614 2 94 2H4.33735C3.04647 2 2 3.04647 2 4.33735V63.6627Z" fill="url(#paint1_linear_67_1090)"/>
<defs>
<linearGradient id="paint0_linear_67_1090" x1="124.527" y1="13.2139" x2="91.4091" y2="70.3397" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEE6F0"/>
<stop offset="0.72" stop-color="#A8BBD1"/>
<stop offset="1" stop-color="#577BA5"/>
</linearGradient>
<linearGradient id="paint1_linear_67_1090" x1="78.0741" y1="26.0067" x2="60.3685" y2="66.1292" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.97" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1013 B

packages/org-chart/src/assets/cards/대표자.svg
+15
View File
@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="74" viewBox="0 0 146 74" fill="none">
<path d="M0 70C0 72.2091 1.79086 74 4 74H142C144.209 74 146 72.2091 146 70V4.00001C146 1.79086 144.209 0 142 0H4C1.79086 0 0 1.79086 0 4V70Z" fill="url(#paint0_linear_22_271)"/>
<path d="M2 69.6627C2 70.9535 3.04647 72 4.33735 72H142.013C143.11 72 144 71.1103 144 70.0129C144 32.4504 113.55 2 75.9871 2H4.33735C3.04647 2 2 3.04647 2 4.33735V69.6627Z" fill="url(#paint1_linear_22_271)"/>
<defs>
<linearGradient id="paint0_linear_22_271" x1="123.344" y1="9.12442" x2="104.553" y2="74.0869" gradientUnits="userSpaceOnUse">
<stop stop-color="#A7B9DF"/>
<stop offset="0.6" stop-color="#A7B9DF"/>
<stop offset="1" stop-color="#0135A1" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="paint1_linear_22_271" x1="77.3365" y1="18.8479" x2="77.3365" y2="72" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

packages/org-chart/src/assets/cards/디자인기획팀-sm.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="108" height="52" viewBox="0 0 108 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48.494C0 50.4303 1.5697 52 3.50602 52H104.494C106.43 52 108 50.4303 108 48.494V3.50602C108 1.5697 106.43 3.73075e-09 104.494 3.73075e-09H3.50602C1.5697 3.73075e-09 0 1.5697 0 3.50602V48.494Z" fill="url(#paint0_linear_69_2374)"/>
<path d="M1.48047 48.1332C1.48047 49.4241 2.52694 50.4706 3.81782 50.4706H104.336C105.543 50.4706 106.522 49.492 106.522 48.2849C106.522 22.4626 85.5884 1.5294 59.7661 1.5294H3.81782C2.52694 1.5294 1.48047 2.57587 1.48047 3.86675V48.1332Z" fill="url(#paint1_linear_69_2374)"/>
<defs>
<linearGradient id="paint0_linear_69_2374" x1="92.1156" y1="10.1048" x2="66.3799" y2="53.0473" gradientUnits="userSpaceOnUse">
<stop stop-color="#DDEEEF"/>
<stop offset="0.72" stop-color="#A2D1D1"/>
<stop offset="1" stop-color="#319D99" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="paint1_linear_69_2374" x1="58.7484" y1="16.1449" x2="54.0638" y2="50.215" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

packages/org-chart/src/assets/cards/디자인기획팀.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="146" height="68" viewBox="0 0 146 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 64.494C0 66.4303 1.5697 68 3.50602 68H142.494C144.43 68 146 66.4303 146 64.494V3.50605C146 1.56973 144.43 3.05176e-05 142.494 3.05176e-05H3.50603C1.5697 3.05176e-05 0 1.56973 0 3.50605V64.494Z" fill="url(#paint0_linear_67_59)"/>
<path d="M2 63.6627C2 64.9535 3.04647 66 4.33735 66H141.663C142.954 66 144 64.9535 144 63.6627V52C144 24.3858 121.614 2 94 2H4.33735C3.04647 2 2 3.04647 2 4.33735V63.6627Z" fill="url(#paint1_linear_67_59)"/>
<defs>
<linearGradient id="paint0_linear_67_59" x1="124.527" y1="13.214" x2="91.4092" y2="70.3397" gradientUnits="userSpaceOnUse">
<stop stop-color="#DDEEEF"/>
<stop offset="0.72" stop-color="#A2D1D1"/>
<stop offset="1" stop-color="#319D99" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="paint1_linear_67_59" x1="79.4178" y1="21.1125" x2="73.4847" y2="65.7189" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

packages/org-chart/src/assets/cards/사업관리팀-sm.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="108" height="52" viewBox="0 0 108 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48.494C0 50.4303 1.5697 52 3.50602 52H104.494C106.43 52 108 50.4303 108 48.494V3.50602C108 1.5697 106.43 0 104.494 0H3.50602C1.5697 0 0 1.5697 0 3.50602V48.494Z" fill="url(#business_management_outer_69_2371)"/>
<path d="M1.47852 48.1332C1.47852 49.4241 2.52498 50.4706 3.81587 50.4706H104.334C105.541 50.4706 106.52 49.492 106.52 48.2849C106.52 22.4626 85.5865 1.5294 59.7641 1.5294H3.81587C2.52499 1.5294 1.47852 2.57587 1.47852 3.86675V48.1332Z" fill="url(#business_management_inner_69_2371)"/>
<defs>
<linearGradient id="business_management_outer_69_2371" x1="92.1155" y1="10.1048" x2="66.3798" y2="53.0473" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEE6F0"/>
<stop offset="0.72" stop-color="#A8BBD1"/>
<stop offset="1" stop-color="#577BA5" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="business_management_inner_69_2371" x1="57.7534" y1="15.6726" x2="53.1643" y2="49.8431" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

packages/org-chart/src/assets/cards/사업관리팀.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="146" height="68" viewBox="0 0 146 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 64.494C0 66.4303 1.5697 68 3.50602 68H142.494C144.43 68 146 66.4303 146 64.494V3.50603C146 1.5697 144.43 0 142.494 0H3.50602C1.5697 0 0 1.5697 0 3.50603V64.494Z" fill="url(#business_management_outer_67_1090)"/>
<path d="M2 63.6627C2 64.9535 3.04647 66 4.33735 66H141.663C142.954 66 144 64.9535 144 63.6627V52C144 24.3858 121.614 2 94 2H4.33735C3.04647 2 2 3.04647 2 4.33735V63.6627Z" fill="url(#business_management_inner_67_1090)"/>
<defs>
<linearGradient id="business_management_outer_67_1090" x1="124.527" y1="13.2139" x2="91.4091" y2="70.3397" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEE6F0"/>
<stop offset="0.72" stop-color="#A8BBD1"/>
<stop offset="1" stop-color="#577BA5" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="business_management_inner_67_1090" x1="78.0741" y1="20.4949" x2="71.8702" y2="65.1795" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

packages/org-chart/src/assets/cards/솔루션통합팀-sm.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="108" height="52" viewBox="0 0 108 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48.494C0 50.4303 1.5697 52 3.50602 52H104.494C106.43 52 108 50.4303 108 48.494V3.50602C108 1.5697 106.43 3.73075e-09 104.494 3.73075e-09H3.50602C1.5697 3.73075e-09 0 1.5697 0 3.50602V48.494Z" fill="url(#paint0_linear_69_2375)"/>
<path d="M1.48047 48.1332C1.48047 49.4241 2.52694 50.4706 3.81782 50.4706H104.336C105.543 50.4706 106.522 49.492 106.522 48.2849C106.522 22.4626 85.5884 1.5294 59.7661 1.5294H3.81782C2.52694 1.5294 1.48047 2.57587 1.48047 3.86675V48.1332Z" fill="url(#paint1_linear_69_2375)"/>
<defs>
<linearGradient id="paint0_linear_69_2375" x1="92.1156" y1="10.1048" x2="66.3799" y2="53.0473" gradientUnits="userSpaceOnUse">
<stop stop-color="#E0EAE1"/>
<stop offset="0.72" stop-color="#B8CDB3"/>
<stop offset="1" stop-color="#B8CDB3"/>
</linearGradient>
<linearGradient id="paint1_linear_69_2375" x1="58.8193" y1="16.2688" x2="54.1615" y2="50.2168" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

packages/org-chart/src/assets/cards/솔루션통합팀.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="146" height="68" viewBox="0 0 146 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 64.494C0 66.4303 1.5697 68 3.50602 68H142.494C144.43 68 146 66.4303 146 64.494V3.50602C146 1.5697 144.43 0 142.494 0H3.50603C1.5697 0 0 1.56969 0 3.50602V64.494Z" fill="url(#paint0_linear_67_67)"/>
<path d="M2 63.6627C2 64.9535 3.04647 66 4.33735 66H141.663C142.954 66 144 64.9535 144 63.6627V52C144 24.3858 121.614 2.00002 94 2.00002H4.33735C3.04647 2.00002 2 3.04648 2 4.33736V63.6627Z" fill="url(#paint1_linear_67_67)"/>
<defs>
<linearGradient id="paint0_linear_67_67" x1="124.527" y1="13.2139" x2="91.4092" y2="70.3397" gradientUnits="userSpaceOnUse">
<stop stop-color="#E0EAE1"/>
<stop offset="0.72" stop-color="#B8CDB3"/>
<stop offset="1" stop-color="#B8CDB3"/>
</linearGradient>
<linearGradient id="paint1_linear_67_67" x1="79.5136" y1="21.2746" x2="73.6145" y2="65.721" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1020 B

packages/org-chart/src/assets/cards/인재성장팀-sm.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="108" height="52" viewBox="0 0 108 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48.494C0 50.4303 1.5697 52 3.50602 52H104.494C106.43 52 108 50.4303 108 48.494V3.50602C108 1.5697 106.43 3.73075e-09 104.494 3.73075e-09H3.50602C1.5697 3.73075e-09 0 1.5697 0 3.50602V48.494Z" fill="url(#paint0_linear_69_2372)"/>
<path d="M1.47726 48.1939C1.47795 49.4848 2.52498 50.5306 3.81586 50.5299L104.36 50.4718C105.567 50.4711 106.545 49.492 106.545 48.2849V48.2849C106.531 22.4625 85.5865 1.54149 59.7641 1.5564L3.78958 1.58873C2.4987 1.58948 1.45279 2.63655 1.45349 3.92743L1.47726 48.1939Z" fill="url(#paint1_linear_69_2372)"/>
<defs>
<linearGradient id="paint0_linear_69_2372" x1="92.1156" y1="10.1048" x2="66.3799" y2="53.0473" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8CFEA"/>
<stop offset="0.72" stop-color="#BFD6F0"/>
<stop offset="1" stop-color="#3D86D4" stop-opacity="0.7"/>
</linearGradient>
<linearGradient id="paint1_linear_69_2372" x1="58.5614" y1="15.8664" x2="53.7835" y2="50.4693" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

packages/org-chart/src/assets/cards/인재성장팀.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="146" height="68" viewBox="0 0 146 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 64.494C0 66.4303 1.5697 68 3.50602 68H142.494C144.43 68 146 66.4303 146 64.494V3.50602C146 1.5697 144.43 0 142.494 0H3.50603C1.5697 0 0 1.56969 0 3.50602V64.494Z" fill="url(#paint0_linear_67_1091)"/>
<path d="M1.9987 63.742C1.99942 65.0329 3.04647 66.0788 4.33735 66.078L141.698 66.0013C142.989 66.0006 144.035 64.9535 144.034 63.6626L144.028 52C144.012 24.3858 121.614 2.0125 94 2.02793L4.30182 2.07805C3.01094 2.07877 1.96505 3.12582 1.96576 4.4167L1.9987 63.742Z" fill="url(#paint1_linear_67_1091)"/>
<defs>
<linearGradient id="paint0_linear_67_1091" x1="124.527" y1="13.2139" x2="91.4092" y2="70.3397" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8CFEA"/>
<stop offset="0.72" stop-color="#BFD6F0"/>
<stop offset="1" stop-color="#3D86D4" stop-opacity="0.7"/>
</linearGradient>
<linearGradient id="paint1_linear_67_1091" x1="79.1676" y1="20.7484" x2="73.1165" y2="66.0528" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

packages/org-chart/src/assets/cards/통합시스템 디비전-sm.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="108" height="52" viewBox="0 0 108 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48.494C0 50.4303 1.5697 52 3.50602 52H104.494C106.43 52 108 50.4303 108 48.494V3.50602C108 1.5697 106.43 0 104.494 0H3.50602C1.5697 0 0 1.5697 0 3.50602V48.494Z" fill="url(#paint0_linear_69_2373)"/>
<path d="M1.47852 48.1332C1.47852 49.4241 2.52498 50.4706 3.81587 50.4706H104.334C105.541 50.4706 106.52 49.492 106.52 48.2849C106.52 22.4626 85.5865 1.52939 59.7641 1.52939H3.81587C2.52499 1.52939 1.47852 2.57586 1.47852 3.86674V48.1332Z" fill="url(#paint1_linear_69_2373)"/>
<defs>
<linearGradient id="paint0_linear_69_2373" x1="92.1156" y1="10.1048" x2="66.3799" y2="53.0473" gradientUnits="userSpaceOnUse">
<stop stop-color="#DFDEE9"/>
<stop offset="0.72" stop-color="#AFA4C3"/>
<stop offset="1" stop-color="#7F6B9D" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="paint1_linear_69_2373" x1="58.4371" y1="16.1449" x2="53.7525" y2="50.215" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

packages/org-chart/src/assets/cards/통합시스템 디비전.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="146" height="68" viewBox="0 0 146 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 64.494C0 66.4303 1.5697 68 3.50602 68H142.494C144.43 68 146 66.4303 146 64.494V3.50603C146 1.5697 144.43 0 142.494 0H3.50603C1.5697 0 0 1.5697 0 3.50603V64.494Z" fill="url(#paint0_linear_67_51)"/>
<path d="M2 63.6627C2 64.9536 3.04647 66 4.33735 66H141.663C142.954 66 144 64.9536 144 63.6627V52C144 24.3858 121.614 2.00002 94 2.00002H4.33735C3.04647 2.00002 2 3.04648 2 4.33736V63.6627Z" fill="url(#paint1_linear_67_51)"/>
<defs>
<linearGradient id="paint0_linear_67_51" x1="124.527" y1="13.2139" x2="91.4092" y2="70.3397" gradientUnits="userSpaceOnUse">
<stop stop-color="#DFDEE9"/>
<stop offset="0.72" stop-color="#AFA4C3"/>
<stop offset="1" stop-color="#7F6B9D" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="paint1_linear_67_51" x1="78.9996" y1="21.1126" x2="73.0666" y2="65.719" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E0E6F4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB