Newer
Older
bugtrail / brand / bugtrail.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- BugTrail mark: a bug at the head of the trail of steps it walked -->
  <defs>
    <linearGradient id="tile" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1b1e2e"/>
      <stop offset="1" stop-color="#14151f"/>
    </linearGradient>
    <linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#89b4fa"/>
      <stop offset="1" stop-color="#7aa2f7"/>
    </linearGradient>
  </defs>

  <rect width="512" height="512" rx="104" fill="url(#tile)"/>
  <rect x="8" y="8" width="496" height="496" rx="96" fill="none" stroke="#2f334d" stroke-width="8" opacity="0.8"/>

  <!-- trail: recent steps first, older ones smaller and fainter -->
  <circle cx="256" cy="368" r="20" fill="#7aa2f7" opacity="0.85"/>
  <circle cx="256" cy="424" r="14" fill="#7aa2f7" opacity="0.55"/>
  <circle cx="256" cy="464" r="9"  fill="#7aa2f7" opacity="0.30"/>

  <!-- legs, three pairs, behind the body -->
  <g stroke="#c0caf5" stroke-width="15" stroke-linecap="round" fill="none">
    <path d="M212 190 L152 148 L138 104"/>
    <path d="M300 190 L360 148 L374 104"/>
    <path d="M198 246 L128 240"/>
    <path d="M314 246 L384 240"/>
    <path d="M212 302 L154 342 L140 386"/>
    <path d="M300 302 L358 342 L372 386"/>
  </g>

  <!-- antennae -->
  <g stroke="#c0caf5" stroke-width="13" stroke-linecap="round" fill="none">
    <path d="M238 96 C 228 70, 208 56, 188 50"/>
    <path d="M274 96 C 284 70, 304 56, 324 50"/>
  </g>

  <!-- head -->
  <circle cx="256" cy="124" r="33" fill="#c0caf5"/>

  <!-- body with elytra split -->
  <ellipse cx="256" cy="244" rx="64" ry="100" fill="url(#body)"/>
  <line x1="256" y1="164" x2="256" y2="338" stroke="#1b1e2e" stroke-width="11" stroke-linecap="round"/>
  <path d="M256 200 C 226 214, 210 252, 208 300" stroke="#1b1e2e" stroke-width="8" fill="none" opacity="0.25" stroke-linecap="round"/>
  <path d="M256 200 C 286 214, 302 252, 304 300" stroke="#1b1e2e" stroke-width="8" fill="none" opacity="0.25" stroke-linecap="round"/>
  <ellipse cx="232" cy="196" rx="18" ry="34" fill="#ffffff" opacity="0.14" transform="rotate(-18 232 196)"/>
</svg>