swap simpleicons silhouettes for actual brand marks on comparison table

This commit is contained in:
Will Anderson
2026-05-02 11:30:14 -05:00
parent 640813e42e
commit b76c0c995a
5 changed files with 56 additions and 4 deletions
+1
View File
@@ -0,0 +1 @@
<svg fill="#D97757" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Anthropic</title><path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg>

After

Width:  |  Height:  |  Size: 296 B

+40
View File
@@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
<path d="M34.1423 7.32501C33.5634 5.35387 31.7547 4 29.7003 4L28.3488 4C26.1142 4 24.1985 5.59611 23.7952 7.79398L21.4805 20.4072L22.0549 18.4419C22.6319 16.4679 24.4419 15.1111 26.4986 15.1111H34.3524L37.6462 16.3942L40.8213 15.1111H39.8946C37.8401 15.1111 36.0315 13.7572 35.4525 11.7861L34.1423 7.32501Z" fill="url(#paint0_radial_56201_15503)"></path>
<path d="M14.3307 40.656C14.9032 42.6366 16.7165 44 18.7783 44H21.6486C24.1592 44 26.2122 41.999 26.2767 39.4893L26.5893 27.3271L25.9354 29.5602C25.3577 31.5332 23.5481 32.8889 21.4923 32.8889L13.5732 32.8889L10.7499 31.3573L7.69336 32.8889H8.60461C10.6663 32.8889 12.4796 34.2522 13.0521 36.2329L14.3307 40.656Z" fill="url(#paint1_radial_56201_15503)"></path>
<path d="M29.4993 4H13.46C8.87732 4 6.12772 10.0566 4.29466 16.1132C2.12296 23.2886 -0.718769 32.8852 7.50252 32.8852H14.4282C16.4978 32.8852 18.3147 31.5168 18.8835 29.5269C20.0876 25.3143 22.1978 17.9655 23.8554 12.3712C24.6977 9.52831 25.3993 7.08673 26.4762 5.56628C27.0799 4.71385 28.086 4 29.4993 4Z" fill="url(#paint2_linear_56201_15503)"></path>
<path d="M29.4993 4H13.46C8.87732 4 6.12772 10.0566 4.29466 16.1132C2.12296 23.2886 -0.718769 32.8852 7.50252 32.8852H14.4282C16.4978 32.8852 18.3147 31.5168 18.8835 29.5269C20.0876 25.3143 22.1978 17.9655 23.8554 12.3712C24.6977 9.52831 25.3993 7.08673 26.4762 5.56628C27.0799 4.71385 28.086 4 29.4993 4Z" fill="url(#paint3_linear_56201_15503)"></path>
<path d="M18.498 44H34.5374C39.12 44 41.8696 37.9424 43.7027 31.8848C45.8744 24.7081 48.7161 15.1098 40.4948 15.1098H33.5693C31.4996 15.1098 29.6827 16.4784 29.114 18.4684C27.9098 22.6817 25.7996 30.032 24.142 35.6273C23.2996 38.4708 22.598 40.9127 21.5212 42.4335C20.9175 43.286 19.9113 44 18.498 44Z" fill="url(#paint4_radial_56201_15503)"></path>
<path d="M18.498 44H34.5374C39.12 44 41.8696 37.9424 43.7027 31.8848C45.8744 24.7081 48.7161 15.1098 40.4948 15.1098H33.5693C31.4996 15.1098 29.6827 16.4784 29.114 18.4684C27.9098 22.6817 25.7996 30.032 24.142 35.6273C23.2996 38.4708 22.598 40.9127 21.5212 42.4335C20.9175 43.286 19.9113 44 18.498 44Z" fill="url(#paint5_linear_56201_15503)"></path>
<defs>
<radialGradient id="paint0_radial_56201_15503" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(38.005 20.5144) rotate(-129.304) scale(17.3033 16.2706)">
<stop offset="0.0955758" stop-color="#00AEFF"></stop>
<stop offset="0.773185" stop-color="#2253CE"></stop>
<stop offset="1" stop-color="#0736C4"></stop>
</radialGradient>
<radialGradient id="paint1_radial_56201_15503" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.1215 32.8171) rotate(51.84) scale(15.9912 15.5119)">
<stop offset="0" stop-color="#FFB657"></stop>
<stop offset="0.633728" stop-color="#FF5F3D"></stop>
<stop offset="0.923392" stop-color="#C02B3C"></stop>
</radialGradient>
<linearGradient id="paint2_linear_56201_15503" x1="12.5" y1="7.5" x2="14.7884" y2="33.9751" gradientUnits="userSpaceOnUse">
<stop offset="0.156162" stop-color="#0D91E1"></stop>
<stop offset="0.487484" stop-color="#52B471"></stop>
<stop offset="0.652394" stop-color="#98BD42"></stop>
<stop offset="0.937361" stop-color="#FFC800"></stop>
</linearGradient>
<linearGradient id="paint3_linear_56201_15503" x1="14.5" y1="4" x2="15.7496" y2="32.8852" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3DCBFF"></stop>
<stop offset="0.246674" stop-color="#0588F7" stop-opacity="0"></stop>
</linearGradient>
<radialGradient id="paint4_radial_56201_15503" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41.3187 12.2813) rotate(109.274) scale(38.3873 45.9867)">
<stop offset="0.0661714" stop-color="#8C48FF"></stop>
<stop offset="0.5" stop-color="#F2598A"></stop>
<stop offset="0.895833" stop-color="#FFB152"></stop>
</radialGradient>
<linearGradient id="paint5_linear_56201_15503" x1="42.5859" y1="13.346" x2="42.5695" y2="21.2147" gradientUnits="userSpaceOnUse">
<stop offset="0.0581535" stop-color="#F8ADFA"></stop>
<stop offset="0.708063" stop-color="#A86EDD" stop-opacity="0"></stop>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

+1
View File
@@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z" fill="url(#prefix__paint0_radial_980_20147)"/><defs><radialGradient id="prefix__paint0_radial_980_20147" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)"><stop offset=".067" stop-color="#9168C0"/><stop offset=".343" stop-color="#5684D1"/><stop offset=".672" stop-color="#1BA1E3"/></radialGradient></defs></svg>

After

Width:  |  Height:  |  Size: 599 B

+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2406 2406">
<path d="M1 578.4C1 259.5 259.5 1 578.4 1h1249.1c319 0 577.5 258.5 577.5 577.4V2406H578.4C259.5 2406 1 2147.5 1 1828.6V578.4z" fill="#74aa9c"/>
<path id="a" d="M1107.3 299.1c-197.999 0-373.9 127.3-435.2 315.3L650 743.5v427.9c0 21.4 11 40.4 29.4 51.4l344.5 198.515V833.3h.1v-27.9L1372.7 604c33.715-19.52 70.44-32.857 108.47-39.828L1447.6 450.3C1361 353.5 1237.1 298.5 1107.3 299.1zm0 117.5-.6.6c79.699 0 156.3 27.5 217.6 78.4-2.5 1.2-7.4 4.3-11 6.1L952.8 709.3c-18.4 10.4-29.4 30-29.4 51.4V1248l-155.1-89.4V755.8c-.1-187.099 151.601-338.9 339-339.2z" fill="#fff"/>
<use xlink:href="#a" transform="rotate(60 1203 1203)"/>
<use xlink:href="#a" transform="rotate(120 1203 1203)"/>
<use xlink:href="#a" transform="rotate(180 1203 1203)"/>
<use xlink:href="#a" transform="rotate(240 1203 1203)"/>
<use xlink:href="#a" transform="rotate(300 1203 1203)"/>
</svg>

After

Width:  |  Height:  |  Size: 972 B

+4 -4
View File
@@ -32,25 +32,25 @@ fn comparison() -> String {
</th>
<th style=\"text-align:center;padding:0.75rem 1rem;font-weight:400;color:var(--t3);font-size:0.8rem;width:13.5%\">
<div style=\"display:flex;flex-direction:column;align-items:center;gap:0.35rem\">
<img src=\"https://cdn.simpleicons.org/openai/000000\" alt=\"ChatGPT\" style=\"width:24px;height:24px\">
<img src=\"/assets/brand/openai.svg\" alt=\"ChatGPT\" style=\"width:28px;height:28px\">
ChatGPT
</div>
</th>
<th style=\"text-align:center;padding:0.75rem 1rem;font-weight:400;color:var(--t3);font-size:0.8rem;width:13.5%\">
<div style=\"display:flex;flex-direction:column;align-items:center;gap:0.35rem\">
<img src=\"https://cdn.simpleicons.org/anthropic/000000\" alt=\"Claude\" style=\"width:24px;height:24px\">
<img src=\"/assets/brand/anthropic.svg\" alt=\"Claude\" style=\"width:28px;height:28px\">
Claude
</div>
</th>
<th style=\"text-align:center;padding:0.75rem 1rem;font-weight:400;color:var(--t3);font-size:0.8rem;width:13.5%\">
<div style=\"display:flex;flex-direction:column;align-items:center;gap:0.35rem\">
<img src=\"https://cdn.simpleicons.org/googlegemini\" alt=\"Gemini\" style=\"width:24px;height:24px\">
<img src=\"/assets/brand/gemini.svg\" alt=\"Gemini\" style=\"width:28px;height:28px\">
Gemini
</div>
</th>
<th style=\"text-align:center;padding:0.75rem 1rem;font-weight:400;color:var(--t3);font-size:0.8rem;width:13.5%\">
<div style=\"display:flex;flex-direction:column;align-items:center;gap:0.35rem\">
<img src=\"https://cdn.simpleicons.org/microsoftcopilot/0078D4\" alt=\"Copilot\" style=\"width:24px;height:24px\">
<img src=\"/assets/brand/copilot.svg\" alt=\"Copilot\" style=\"width:28px;height:28px\">
Copilot
</div>
</th>