Make a default avatar with transparent background and adaptive coloring based on username

[TheVillageGuy]

Code works flawlessly, just have to create a default avatar and somehow point to it from the code

[github-actions[bot]]

This PR is stale because it has been open 40 days with no activity.

[melroy89]

I will make it easier for you. Here is the svg in raw plain text:

<svg
   width="320"
   height="320"
   viewBox="0 0 320 320"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1" />
  <rect
     style="display:none;opacity:1;fill:#29144a;fill-opacity:1;stroke:none;stroke-width:4.39823;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
     id="rect35"
     width="323.65826"
     height="325.41187"
     x="0"
     y="-2.7059329" />
  <g
     id="g1"
     transform="matrix(0.97092512,0,0,0.95099897,34.423647,35.890832)">
    <g
       id="layer1"
       style="display:inline;fill:none"
       transform="matrix(2.12871,0,0,2.0000001,-90.126008,15.218211)">
      <path
         id="path5"
         style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
         d="m 97.229482,-27.966661 a 5.0000002,5.0000002 0 0 0 -4.330895,2.500455 L 23.616552,94.533014 a 4.9999999,4.9999999 0 0 0 4.330895,7.500336 H 166.51152 a 4.9999996,4.9999996 0 0 0 4.32995,-7.500336 l -69.28204,-119.99922 a 5.0000002,5.0000002 0 0 0 -4.329948,-2.500455 z M 97.247442,7.1649804 140.54977,82.164236 H 123.22998 L 110.23918,59.664254 97.247437,82.164236 84.256642,59.664254 71.266792,82.164236 H 53.946047 Z m 0,14.9996456 -10.824875,18.749814 a 7.5008819,7.5008819 0 0 0 0,7.500337 L 97.247437,67.164591 108.0742,48.414777 a 7.4997612,7.4997612 0 0 0 0,-7.500337 z"
         transform="translate(5.8501312,19.942587)" />
    </g>
  </g>
</svg>

[melroy89]

I will make it easier for you. Here is the svg in raw plain text:

<svg
   width="320"
   height="320"
   viewBox="0 0 320 320"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1" />
  <rect
     style="display:none;opacity:1;fill:#29144a;fill-opacity:1;stroke:none;stroke-width:4.39823;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
     id="rect35"
     width="323.65826"
     height="325.41187"
     x="0"
     y="-2.7059329" />
  <g
     id="g1"
     transform="matrix(0.97092512,0,0,0.95099897,34.423647,35.890832)">
    <g
       id="layer1"
       style="display:inline;fill:none"
       transform="matrix(2.12871,0,0,2.0000001,-90.126008,15.218211)">
      <path
         id="path5"
         style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
         d="m 97.229482,-27.966661 a 5.0000002,5.0000002 0 0 0 -4.330895,2.500455 L 23.616552,94.533014 a 4.9999999,4.9999999 0 0 0 4.330895,7.500336 H 166.51152 a 4.9999996,4.9999996 0 0 0 4.32995,-7.500336 l -69.28204,-119.99922 a 5.0000002,5.0000002 0 0 0 -4.329948,-2.500455 z M 97.247442,7.1649804 140.54977,82.164236 H 123.22998 L 110.23918,59.664254 97.247437,82.164236 84.256642,59.664254 71.266792,82.164236 H 53.946047 Z m 0,14.9996456 -10.824875,18.749814 a 7.5008819,7.5008819 0 0 0 0,7.500337 L 97.247437,67.164591 108.0742,48.414777 a 7.4997612,7.4997612 0 0 0 0,-7.500337 z"
         transform="translate(5.8501312,19.942587)" />
    </g>
  </g>
</svg>

I will make it even even easier for you..

Here you go:

<svg
   width="320"
   height="320"
   viewBox="0 0 320 320"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs id="defs1">
    <!-- Define a linear gradient for the background -->
    <linearGradient id="bgGradient" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#d244f0;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#301a6f;stop-opacity:1" />
    </linearGradient>
    <!-- Define a vertical linear gradient for the logo with an abrupt color transition -->
    <linearGradient id="logoGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#2de2e6;stop-opacity:1" />
      <stop offset="80%" style="stop-color:#3399ff;stop-opacity:1" />
      <stop offset="80%" style="stop-color:#f61ab6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#f61ab6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- Background rectangle with gradient fill -->
  <rect
     width="320"
     height="320"
     fill="url(#bgGradient)" />
  <g
     id="g1"
     transform="matrix(0.97092512,0,0,0.95099897,34.423647,35.890832)">
    <g
       id="layer1"
       style="display:inline;fill:none"
       transform="matrix(2.12871,0,0,2.0000001,-90.126008,15.218211)">
      <path
         id="path5"
         style="display:inline;opacity:1;fill:url(#logoGradient);stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
         d="m 97.229482,-27.966661 a 5.0000002,5.0000002 0 0 0 -4.330895,2.500455 L 23.616552,94.533014 a 4.9999999,4.9999999 0 0 0 4.330895,7.500336 H 166.51152 a 4.9999996,4.9999996 0 0 0 4.32995,-7.500336 l -69.28204,-119.99922 a 5.0000002,5.0000002 0 0 0 -4.329948,-2.500455 z M 97.247442,7.1649804 140.54977,82.164236 H 123.22998 L 110.23918,59.664254 97.247437,82.164236 84.256642,59.664254 71.266792,82.164236 H 53.946047 Z m 0,14.9996456 -10.824875,18.749814 a 7.5008819,7.5008819 0 0 0 0,7.500337 L 97.247437,67.164591 108.0742,48.414777 a 7.4997612,7.4997612 0 0 0 0,-7.500337 z"
         transform="translate(5.8501312,19.942587)" />
    </g>
  </g>
</svg>

Example: https://melroy89.w3spaces.com/svg-example-1.html (cool huh?).

This allows you to add any colors for both the background or foreground. Any gradient you like. In any way or form you like.

[github-actions[bot]]

This PR is stale because it has been open 40 days with no activity.