DevTools
Practical Utilities

Search tools

Jump directly to a tool from anywhere in the app.

Protopie
LicenseCC0-1.0
Variants2
CategoryProtopie
Categories
protopieSoftware

Protopie

protopie

Variants

glyph
glyph
wordmark
wordmark

SVG Source

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="228.571" height="64" fill="none" viewBox="0 0 100 28">
  <g clip-path="url(#a)">
    <path fill="#252830" fill-rule="evenodd" d="M41.696 12.942q-.494.51-1.243.51h-2.095V9.908h2.095q.75 0 1.243.502.495.502.494 1.27 0 .753-.494 1.263Zm1.652-4.055q-1.174-1.137-2.895-1.138h-4.445v11.48h2.35v-3.62h2.095q1.72 0 2.895-1.136 1.175-1.138 1.175-2.793t-1.175-2.793m5.85 2.133a2.27 2.27 0 0 0-1.013 1.205v-1.606h-2.197v8.61h2.197V15.23q0-1.204.792-1.723.792-.518 1.797-.401v-2.488q-.87 0-1.575.402Zm5.084 5.518q.637.636 1.6.636.96 0 1.607-.636.646-.636.646-1.614t-.646-1.615q-.646-.635-1.608-.635-.96 0-1.599.635-.638.636-.638 1.615c0 .979.213 1.19.638 1.614m4.715 1.443q-1.276 1.247-3.116 1.247t-3.107-1.247-1.268-3.057 1.268-3.058q1.267-1.246 3.107-1.247 1.84 0 3.116 1.247t1.276 3.058q0 1.809-1.276 3.057m5.706-5.288h1.925V10.62h-1.925V8.525l-2.197.66v1.434h-1.481v2.074h1.481v3.657q0 1.723.928 2.392.929.668 3.194.418v-1.957a10 10 0 0 1-1.056.009q-.426-.026-.647-.226-.222-.201-.222-.636zm5.433 3.845q.638.636 1.6.636.96 0 1.607-.636.646-.636.646-1.614t-.646-1.615q-.646-.635-1.608-.635-.96 0-1.599.635-.638.636-.638 1.615c0 .979.213 1.19.638 1.614m4.715 1.443q-1.276 1.247-3.116 1.247t-3.107-1.247q-1.268-1.247-1.268-3.057t1.268-3.058q1.267-1.246 3.107-1.247 1.84 0 3.116 1.247 1.275 1.248 1.276 3.058 0 1.809-1.276 3.057m8.429-5.039q-.494.51-1.243.51h-2.095V9.908h2.095q.75 0 1.243.502t.494 1.27q0 .753-.494 1.263Zm1.652-4.055q-1.175-1.138-2.895-1.138h-4.445v11.48h2.35v-3.62h2.095q1.72 0 2.895-1.136 1.176-1.138 1.175-2.793t-1.175-2.793m2.64 10.341h2.197v-7.174h-2.197zm1.079-8.609q-.589 0-1.02-.424a1.36 1.36 0 0 1-.432-1.002q0-.578.432-1.01a1.4 1.4 0 0 1 1.02-.434q.606 0 1.038.433.432.434.432 1.011 0 .579-.432 1.002a1.43 1.43 0 0 1-1.038.424m9.165 3.539h-4.324q.185-.783.763-1.215.576-.432 1.458-.432.746 0 1.33.407.586.408.773 1.24m1.763 3.326s.058-.08.13-.188l-2.048-.616q-.633.64-1.745.64-1.95 0-2.39-1.532h6.393q.083-.457.084-.864 0-1.826-1.212-3.066t-3.078-1.239q-1.968 0-3.222 1.231t-1.254 3.074q0 1.859 1.27 3.081 1.273 1.224 3.376 1.223 2.441 0 3.696-1.744" clip-rule="evenodd"/>
    <path fill="url(#b)" stroke="#d8dbe3" stroke-width=".17" d="M17.698.077h-7.62c-5.523 0-10 4.384-10 9.792v7.462c0 5.408 4.477 9.792 10 9.792h7.62c5.523 0 10-4.384 10-9.792V9.869c0-5.408-4.477-9.792-10-9.792Z"/>
    <g filter="url(#c)">
      <g fill-rule="evenodd" clip-rule="evenodd" filter="url(#d)">
        <path fill="url(#e)" d="M13.921 20.122v2.718c-.459 0-.875-.178-1.18-.468h-.002l-.23-.269-7.507-8.75a.03.03 0 0 1-.01-.012l-.031-.034-.006-.008a.6.6 0 0 1-.089-.158.6.6 0 0 1-.046-.218v-.045a.64.64 0 0 1 .182-.431.68.68 0 0 1 .495-.213h1.654l6.769 7.889z"/>
        <path fill="url(#f)" d="M13.921 20.122v2.718c-.459 0-.875-.178-1.18-.468h-.002l-.23-.269-7.507-8.75a.03.03 0 0 1-.01-.012l-.031-.034-.006-.008a.6.6 0 0 1-.089-.158.6.6 0 0 1-.046-.218v-.045a.64.64 0 0 1 .182-.431.68.68 0 0 1 .495-.213h1.654l6.769 7.889z"/>
      </g>
      <g filter="url(#g)">
        <path fill="url(#h)" fill-opacity=".4" fill-rule="evenodd" d="M13.921 20.122v2.718c-.459 0-.875-.178-1.18-.468h-.002l-.23-.269-5.6-6.528-1.907-2.222a.03.03 0 0 1-.01-.012l-.031-.034-.006-.008a.6.6 0 0 1-.089-.158.6.6 0 0 1-.046-.218v-.045a.64.64 0 0 1 .182-.431.68.68 0 0 1 .495-.213h1.654l.778.907 2.088 2.434 3.425 3.99.478.558z" clip-rule="evenodd"/>
      </g>
      <g fill-rule="evenodd" clip-rule="evenodd" filter="url(#i)">
        <path fill="url(#j)" d="M13.921 16.51v3.63l-.001.001-8.93-10.38a.6.6 0 0 1-.124-.199.6.6 0 0 1-.046-.219v-.045a.64.64 0 0 1 .182-.428.67.67 0 0 1 .495-.213h1.668z"/>
        <path fill="url(#k)" d="M13.921 16.51v3.63l-.001.001-8.93-10.38a.6.6 0 0 1-.124-.199.6.6 0 0 1-.046-.219v-.045a.64.64 0 0 1 .182-.428.67.67 0 0 1 .495-.213h1.668z"/>
      </g>
      <g filter="url(#l)">
        <path fill="url(#m)" fill-opacity=".3" fill-rule="evenodd" d="M13.921 16.51v3.63l-.001.001-.478-.556-3.424-3.98-2.089-2.427-.778-.905L4.99 9.762a.6.6 0 0 1-.124-.2.6.6 0 0 1-.046-.219v-.045a.64.64 0 0 1 .182-.428.67.67 0 0 1 .495-.213h1.668l.78.905 2.331 2.711.778.905 2.089 2.428z" clip-rule="evenodd"/>
      </g>
      <g fill-rule="evenodd" clip-rule="evenodd" filter="url(#n)">
        <path fill="url(#o)" d="M5.466 5.017a.67.67 0 0 0-.495.213.64.64 0 0 0-.182.429v.044a.6.6 0 0 0 .046.22l.006.016a.6.6 0 0 0 .125.189l.01.01 8.914 10.36v6.342a1.7 1.7 0 0 0 1.18-.467l.002-.001.23-.267 7.518-8.74q.015-.015.026-.03a.6.6 0 0 0 .099-.168.6.6 0 0 0 .046-.24V5.68a.675.675 0 0 0-.678-.663H5.465Z"/>
        <path fill="url(#p)" d="M5.466 5.017a.67.67 0 0 0-.495.213.64.64 0 0 0-.182.429v.044a.6.6 0 0 0 .046.22l.006.016a.6.6 0 0 0 .125.189l.01.01 8.914 10.36v6.342a1.7 1.7 0 0 0 1.18-.467l.002-.001.23-.267 7.518-8.74q.015-.015.026-.03a.6.6 0 0 0 .099-.168.6.6 0 0 0 .046-.24V5.68a.675.675 0 0 0-.678-.663H5.465Z"/>
        <path fill="url(#q)" d="M5.466 5.017a.67.67 0 0 0-.495.213.64.64 0 0 0-.182.429v.044a.6.6 0 0 0 .046.22l.006.016a.6.6 0 0 0 .125.189l.01.01 8.914 10.36v6.342a1.7 1.7 0 0 0 1.18-.467l.002-.001.23-.267 7.518-8.74q.015-.015.026-.03a.6.6 0 0 0 .099-.168.6.6 0 0 0 .046-.24V5.68a.675.675 0 0 0-.678-.663H5.465Z"/>
        <path fill="url(#r)" d="M5.466 5.017a.67.67 0 0 0-.495.213.64.64 0 0 0-.182.429v.044a.6.6 0 0 0 .046.22l.006.016a.6.6 0 0 0 .125.189l.01.01 8.914 10.36v6.342a1.7 1.7 0 0 0 1.18-.467l.002-.001.23-.267 7.518-8.74q.015-.015.026-.03a.6.6 0 0 0 .099-.168.6.6 0 0 0 .046-.24V5.68a.675.675 0 0 0-.678-.663H5.465Z"/>
        <path fill="url(#s)" d="M5.466 5.017a.67.67 0 0 0-.495.213.64.64 0 0 0-.182.429v.044a.6.6 0 0 0 .046.22l.006.016a.6.6 0 0 0 .125.189l.01.01 8.914 10.36v6.342a1.7 1.7 0 0 0 1.18-.467l.002-.001.23-.267 7.518-8.74q.015-.015.026-.03a.6.6 0 0 0 .099-.168.6.6 0 0 0 .046-.24V5.68a.675.675 0 0 0-.678-.663H5.465Z"/>
        <path fill="url(#t)" d="M5.466 5.017a.67.67 0 0 0-.495.213.64.64 0 0 0-.182.429v.044a.6.6 0 0 0 .046.22l.006.016a.6.6 0 0 0 .125.189l.01.01 8.914 10.36v6.342a1.7 1.7 0 0 0 1.18-.467l.002-.001.23-.267 7.518-8.74q.015-.015.026-.03a.6.6 0 0 0 .099-.168.6.6 0 0 0 .046-.24V5.68a.675.675 0 0 0-.678-.663H5.465Z"/>
      </g>
    </g>
  </g>
  <defs>
    <linearGradient id="b" x1="13.888" x2="13.888" y1="0" y2="27.2" gradientUnits="userSpaceOnUse">
      <stop stop-color="#fff"/>
      <stop offset="1" stop-color="#f6f8fc"/>
    </linearGradient>
    <linearGradient id="e" x1="10.286" x2="8.728" y1="15.304" y2="16.553" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ffa794" stop-opacity=".3"/>
      <stop offset="1" stop-color="#ff9794"/>
    </linearGradient>
    <linearGradient id="f" x1="10.286" x2="8.728" y1="15.304" y2="16.553" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ffa794" stop-opacity=".3"/>
      <stop offset="1" stop-color="#ff9794"/>
    </linearGradient>
    <linearGradient id="h" x1="10.151" x2="11.817" y1="19.243" y2="17.722" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ffdfd7"/>
      <stop offset="1" stop-color="#ffdfd7"/>
    </linearGradient>
    <linearGradient id="j" x1="10.286" x2="8.567" y1="11.981" y2="13.734" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ffa794" stop-opacity=".3"/>
      <stop offset="1" stop-color="#ff9794"/>
    </linearGradient>
    <linearGradient id="k" x1="10.286" x2="8.567" y1="11.981" y2="13.734" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ffa794" stop-opacity=".3"/>
      <stop offset="1" stop-color="#ff9794"/>
    </linearGradient>
    <linearGradient id="m" x1="10.656" x2="12.405" y1="16.173" y2="14.354" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ffa694"/>
      <stop offset="1" stop-color="#ffb7a9"/>
    </linearGradient>
    <linearGradient id="o" x1="19.822" x2="7.687" y1="16.932" y2="8.409" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ff6661"/>
      <stop offset="1" stop-color="#ff7d73"/>
    </linearGradient>
    <linearGradient id="p" x1="19.822" x2="7.687" y1="16.932" y2="8.409" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ff6661"/>
      <stop offset="1" stop-color="#ff7d73"/>
    </linearGradient>
    <linearGradient id="q" x1="19.822" x2="7.687" y1="16.932" y2="8.409" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ff6661"/>
      <stop offset="1" stop-color="#ff7d73"/>
    </linearGradient>
    <linearGradient id="r" x1="19.822" x2="7.687" y1="16.932" y2="8.409" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ff6661"/>
      <stop offset="1" stop-color="#ff7d73"/>
    </linearGradient>
    <linearGradient id="s" x1="19.822" x2="7.687" y1="16.932" y2="8.409" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ff6661"/>
      <stop offset="1" stop-color="#ff7d73"/>
    </linearGradient>
    <linearGradient id="t" x1="19.822" x2="7.687" y1="16.932" y2="8.409" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ff6661"/>
      <stop offset="1" stop-color="#ff7d73"/>
    </linearGradient>
    <filter id="c" width="25.019" height="24.639" x="2.233" y="3.07" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx=".852" dy="1.461"/>
      <feGaussianBlur stdDeviation="1.704"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.875 0 0 0 0 0.843 0 0 0 0.63 0"/>
      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1_1453"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx=".365" dy=".73"/>
      <feGaussianBlur stdDeviation="1.217"/>
      <feColorMatrix values="0 0 0 0 0.771137 0 0 0 0 0.469437 0 0 0 0 0.40806 0 0 0 0.3 0"/>
      <feBlend in2="effect1_dropShadow_1_1453" result="effect2_dropShadow_1_1453"/>
      <feBlend in="SourceGraphic" in2="effect2_dropShadow_1_1453" result="shape"/>
    </filter>
    <filter id="d" width="11.901" height="14.744" x="4.82" y="12.234" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="2.799" dy="6.938"/>
      <feGaussianBlur stdDeviation="2.069"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.651 0 0 0 0 0.58 0 0 0 1 0"/>
      <feBlend in2="shape" result="effect1_innerShadow_1_1453"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="-2.241" dy="14.789"/>
      <feGaussianBlur stdDeviation="2.017"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.875 0 0 0 0 0.843 0 0 0 0.48 0"/>
      <feBlend in2="effect1_innerShadow_1_1453" result="effect2_innerShadow_1_1453"/>
    </filter>
    <filter id="g" width="10.684" height="11.945" x="4.82" y="10.896" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx=".122" dy="-1.461"/>
      <feGaussianBlur stdDeviation=".548"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.604589 0 0 0 0 0.591667 0 0 0 0.2 0"/>
      <feBlend in2="shape" mode="multiply" result="effect1_innerShadow_1_1453"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="1.582" dy="-1.339"/>
      <feGaussianBlur stdDeviation=".791"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
      <feBlend in2="effect1_innerShadow_1_1453" result="effect2_innerShadow_1_1453"/>
    </filter>
    <filter id="i" width="14.142" height="15.623" x="2.58" y="8.657" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="2.799" dy="6.938"/>
      <feGaussianBlur stdDeviation="2.069"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.651 0 0 0 0 0.58 0 0 0 1 0"/>
      <feBlend in2="shape" result="effect1_innerShadow_1_1453"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="-2.241" dy="14.789"/>
      <feGaussianBlur stdDeviation="2.017"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.875 0 0 0 0 0.843 0 0 0 0.48 0"/>
      <feBlend in2="effect1_innerShadow_1_1453" result="effect2_innerShadow_1_1453"/>
    </filter>
    <filter id="l" width="9.954" height="12.093" x="4.82" y="8.413" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx=".365" dy="-.243"/>
      <feGaussianBlur stdDeviation=".913"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 0.996078 0 0 0 0 0.458823 0 0 0 0 0.411765 0 0 0 0.5 0"/>
      <feBlend in2="shape" result="effect1_innerShadow_1_1453"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="1.947" dy=".365"/>
      <feGaussianBlur stdDeviation=".426"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
      <feBlend in2="effect1_innerShadow_1_1453" result="effect2_innerShadow_1_1453"/>
    </filter>
    <filter id="n" width="20.637" height="21.23" x="2.355" y="3.192" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="-2.434" dy="-1.825"/>
      <feGaussianBlur stdDeviation="1.765"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
      <feBlend in2="shape" mode="hard-light" result="effect1_innerShadow_1_1453"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="-.243" dy="1.582"/>
      <feGaussianBlur stdDeviation="1.521"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.87451 0 0 0 0 0.843137 0 0 0 0.7 0"/>
      <feBlend in2="effect1_innerShadow_1_1453" mode="soft-light" result="effect2_innerShadow_1_1453"/>
    </filter>
    <clipPath id="a">
      <path fill="#fff" d="M0 0h100v27.2H0z"/>
    </clipPath>
  </defs>
</svg>