Refactor SVG for Tailscale ExitNode: replace circles with paths for improved rendering

This commit is contained in:
jwkwon0817 2025-04-07 18:31:52 +09:00
parent 37835ccc55
commit 70992f317d

View File

@ -1,13 +1,14 @@
<svg width="375" height="120" viewBox="0 0 375 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="375" height="120" viewBox="0 0 375 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="45.6297" cy="60.5186" r="6.62966" fill="#141414"/> <rect width="375" height="120" rx="24" fill="white"/>
<circle cx="65.5186" cy="60.5186" r="6.62966" fill="#141414"/> <path d="M45.6297 67.1483C49.2912 67.1483 52.2594 64.1801 52.2594 60.5186C52.2594 56.8571 49.2912 53.8889 45.6297 53.8889C41.9682 53.8889 39 56.8571 39 60.5186C39 64.1801 41.9682 67.1483 45.6297 67.1483Z" fill="#141414"/>
<circle opacity="0.2" cx="45.6297" cy="80.4077" r="6.62966" fill="#141414"/> <path d="M65.5186 67.1483C69.1801 67.1483 72.1483 64.1801 72.1483 60.5186C72.1483 56.8571 69.1801 53.8889 65.5186 53.8889C61.8571 53.8889 58.8889 56.8571 58.8889 60.5186C58.8889 64.1801 61.8571 67.1483 65.5186 67.1483Z" fill="#141414"/>
<circle opacity="0.2" cx="85.4077" cy="80.4077" r="6.62966" fill="#141414"/> <path opacity="0.2" d="M45.6297 87.0374C49.2912 87.0374 52.2594 84.0692 52.2594 80.4077C52.2594 76.7462 49.2912 73.778 45.6297 73.778C41.9682 73.778 39 76.7462 39 80.4077C39 84.0692 41.9682 87.0374 45.6297 87.0374Z" fill="#141414"/>
<circle cx="65.5186" cy="80.4077" r="6.62966" fill="#141414"/> <path opacity="0.2" d="M85.4077 87.0374C89.0692 87.0374 92.0374 84.0692 92.0374 80.4077C92.0374 76.7462 89.0692 73.778 85.4077 73.778C81.7462 73.778 78.778 76.7462 78.778 80.4077C78.778 84.0692 81.7462 87.0374 85.4077 87.0374Z" fill="#141414"/>
<circle cx="85.4077" cy="60.5186" r="6.62966" fill="#141414"/> <path d="M65.5186 87.0374C69.1801 87.0374 72.1483 84.0692 72.1483 80.4077C72.1483 76.7462 69.1801 73.778 65.5186 73.778C61.8571 73.778 58.8889 76.7462 58.8889 80.4077C58.8889 84.0692 61.8571 87.0374 65.5186 87.0374Z" fill="#141414"/>
<circle opacity="0.2" cx="45.6297" cy="40.6297" r="6.62966" fill="#141414"/> <path d="M85.4077 67.1483C89.0692 67.1483 92.0374 64.1801 92.0374 60.5186C92.0374 56.8571 89.0692 53.8889 85.4077 53.8889C81.7462 53.8889 78.778 56.8571 78.778 60.5186C78.778 64.1801 81.7462 67.1483 85.4077 67.1483Z" fill="#141414"/>
<circle opacity="0.2" cx="65.5186" cy="40.6297" r="6.62966" fill="#141414"/> <path opacity="0.2" d="M45.6297 47.2594C49.2912 47.2594 52.2594 44.2912 52.2594 40.6297C52.2594 36.9682 49.2912 34 45.6297 34C41.9682 34 39 36.9682 39 40.6297C39 44.2912 41.9682 47.2594 45.6297 47.2594Z" fill="#141414"/>
<circle opacity="0.2" cx="85.4077" cy="40.6297" r="6.62966" fill="#141414"/> <path opacity="0.2" d="M65.5186 47.2594C69.1801 47.2594 72.1483 44.2912 72.1483 40.6297C72.1483 36.9682 69.1801 34 65.5186 34C61.8571 34 58.8889 36.9682 58.8889 40.6297C58.8889 44.2912 61.8571 47.2594 65.5186 47.2594Z" fill="#141414"/>
<path opacity="0.2" d="M85.4077 47.2594C89.0692 47.2594 92.0374 44.2912 92.0374 40.6297C92.0374 36.9682 89.0692 34 85.4077 34C81.7462 34 78.778 36.9682 78.778 40.6297C78.778 44.2912 81.7462 47.2594 85.4077 47.2594Z" fill="#141414"/>
<path d="M132.184 82.995C134.061 82.995 135.586 82.8191 137.404 82.4672V75.6637C136.289 76.0743 135.058 76.1916 133.885 76.1916C131.011 76.1916 129.955 74.7839 129.955 72.086V58.2445H137.404V51.441H129.955V41.3531H121.744V51.441H116.407V58.2445H121.744V72.8485C121.744 79.3 125.146 82.995 132.184 82.995Z" fill="#141414"/> <path d="M132.184 82.995C134.061 82.995 135.586 82.8191 137.404 82.4672V75.6637C136.289 76.0743 135.058 76.1916 133.885 76.1916C131.011 76.1916 129.955 74.7839 129.955 72.086V58.2445H137.404V51.441H129.955V41.3531H121.744V51.441H116.407V58.2445H121.744V72.8485C121.744 79.3 125.146 82.995 132.184 82.995Z" fill="#141414"/>
<path d="M150.814 82.995C155.212 82.995 158.145 81.5288 159.611 79.2414C159.728 80.2384 160.08 81.5874 160.55 82.4085H167.94C167.529 81.0009 167.236 78.7722 167.236 77.3059V61.2357C167.236 54.6081 162.485 50.8545 154.45 50.8545C148.35 50.8545 143.6 53.1419 140.96 56.485L145.652 61.1184C147.764 58.7723 150.462 57.5407 153.746 57.5407C157.734 57.5407 159.494 58.8896 159.494 60.8838C159.494 62.5846 158.321 63.7576 151.987 63.7576C145.887 63.7576 139.729 66.2796 139.729 73.3177C139.729 79.8279 144.421 82.995 150.814 82.995ZM152.456 76.7781C149.289 76.7781 147.822 75.4291 147.822 73.0244C147.822 70.913 149.582 69.5054 152.514 69.5054C157.207 69.5054 158.497 69.2121 159.494 68.2151V70.737C159.494 74.0801 156.679 76.7781 152.456 76.7781Z" fill="#141414"/> <path d="M150.814 82.995C155.212 82.995 158.145 81.5288 159.611 79.2414C159.728 80.2384 160.08 81.5874 160.55 82.4085H167.94C167.529 81.0009 167.236 78.7722 167.236 77.3059V61.2357C167.236 54.6081 162.485 50.8545 154.45 50.8545C148.35 50.8545 143.6 53.1419 140.96 56.485L145.652 61.1184C147.764 58.7723 150.462 57.5407 153.746 57.5407C157.734 57.5407 159.494 58.8896 159.494 60.8838C159.494 62.5846 158.321 63.7576 151.987 63.7576C145.887 63.7576 139.729 66.2796 139.729 73.3177C139.729 79.8279 144.421 82.995 150.814 82.995ZM152.456 76.7781C149.289 76.7781 147.822 75.4291 147.822 73.0244C147.822 70.913 149.582 69.5054 152.514 69.5054C157.207 69.5054 158.497 69.2121 159.494 68.2151V70.737C159.494 74.0801 156.679 76.7781 152.456 76.7781Z" fill="#141414"/>
<path d="M172.573 47.5114H181.136V39.8282H172.573V47.5114ZM172.749 82.4085H180.96V51.441H172.749V82.4085Z" fill="#141414"/> <path d="M172.573 47.5114H181.136V39.8282H172.573V47.5114ZM172.749 82.4085H180.96V51.441H172.749V82.4085Z" fill="#141414"/>
@ -17,4 +18,4 @@
<path d="M270.578 82.995C274.976 82.995 277.909 81.5288 279.375 79.2414C279.493 80.2384 279.844 81.5874 280.314 82.4085H287.704C287.293 81.0009 287 78.7722 287 77.3059V61.2357C287 54.6081 282.249 50.8545 274.214 50.8545C268.114 50.8545 263.364 53.1419 260.724 56.485L265.416 61.1184C267.528 58.7723 270.226 57.5407 273.51 57.5407C277.498 57.5407 279.258 58.8896 279.258 60.8838C279.258 62.5846 278.085 63.7576 271.751 63.7576C265.651 63.7576 259.493 66.2796 259.493 73.3177C259.493 79.8279 264.185 82.995 270.578 82.995ZM272.22 76.7781C269.053 76.7781 267.586 75.4291 267.586 73.0244C267.586 70.913 269.346 69.5054 272.279 69.5054C276.971 69.5054 278.261 69.2121 279.258 68.2151V70.737C279.258 74.0801 276.443 76.7781 272.22 76.7781Z" fill="#141414"/> <path d="M270.578 82.995C274.976 82.995 277.909 81.5288 279.375 79.2414C279.493 80.2384 279.844 81.5874 280.314 82.4085H287.704C287.293 81.0009 287 78.7722 287 77.3059V61.2357C287 54.6081 282.249 50.8545 274.214 50.8545C268.114 50.8545 263.364 53.1419 260.724 56.485L265.416 61.1184C267.528 58.7723 270.226 57.5407 273.51 57.5407C277.498 57.5407 279.258 58.8896 279.258 60.8838C279.258 62.5846 278.085 63.7576 271.751 63.7576C265.651 63.7576 259.493 66.2796 259.493 73.3177C259.493 79.8279 264.185 82.995 270.578 82.995ZM272.22 76.7781C269.053 76.7781 267.586 75.4291 267.586 73.0244C267.586 70.913 269.346 69.5054 272.279 69.5054C276.971 69.5054 278.261 69.2121 279.258 68.2151V70.737C279.258 74.0801 276.443 76.7781 272.22 76.7781Z" fill="#141414"/>
<path d="M291.826 82.4085H300.037V40.7666H291.826V82.4085Z" fill="#141414"/> <path d="M291.826 82.4085H300.037V40.7666H291.826V82.4085Z" fill="#141414"/>
<path d="M319.743 82.995C325.784 82.995 330.652 80.5904 333.35 76.3089L327.133 72.3206C325.491 74.9012 323.321 76.3089 319.743 76.3089C315.696 76.3089 312.764 74.0801 312.001 69.74H335.344V66.8661C335.344 58.7137 330.359 50.8545 319.685 50.8545C309.538 50.8545 304.025 58.7723 304.025 66.9248C304.025 78.5376 312.764 82.995 319.743 82.995ZM312.295 63.2884C313.585 59.3588 316.283 57.5407 319.861 57.5407C323.908 57.5407 326.371 59.9453 327.192 63.2884H312.295Z" fill="#141414"/> <path d="M319.743 82.995C325.784 82.995 330.652 80.5904 333.35 76.3089L327.133 72.3206C325.491 74.9012 323.321 76.3089 319.743 76.3089C315.696 76.3089 312.764 74.0801 312.001 69.74H335.344V66.8661C335.344 58.7137 330.359 50.8545 319.685 50.8545C309.538 50.8545 304.025 58.7723 304.025 66.9248C304.025 78.5376 312.764 82.995 319.743 82.995ZM312.295 63.2884C313.585 59.3588 316.283 57.5407 319.861 57.5407C323.908 57.5407 326.371 59.9453 327.192 63.2884H312.295Z" fill="#141414"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB