Skip to content

Instantly share code, notes, and snippets.

@rviscomi
Last active June 26, 2023 01:16
Show Gist options
  • Save rviscomi/c0655fff20a2f8ba05e47b81c606b5f2 to your computer and use it in GitHub Desktop.
Save rviscomi/c0655fff20a2f8ba05e47b81c606b5f2 to your computer and use it in GitHub Desktop.
How do I add this emoji to the middle of the SVG? 👤
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-linecap="square" stroke-miterlimit="10" viewBox="0 0 256 256">
<clipPath id="a">
<path d="M0 0h256v256H0V0z"/>
</clipPath>
<g clip-path="url(#a)">
<path fill="none" d="M0 0h256v256H0z"/>
<path fill="none" d="M-80-7.748h416v271.496H-80z"/>
<path fill="#f1c232" fill-rule="evenodd" d="m1.971 104 51.811-51.654v34.436L36.512 104l17.27 17.218v34.436z"/>
<path stroke="#000" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4" d="m1.971 104 51.811-51.654v34.436L36.512 104l17.27 17.218v34.436z"/>
<path fill="#f1c232" fill-rule="evenodd" d="m254.029 104-51.811-51.654v34.436L219.488 104l-17.27 17.218v34.436z"/>
<path stroke="#000" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4" d="m254.029 104-51.811-51.654v34.436L219.488 104l-17.27 17.218v34.436z"/>
</g>
</svg>
@rviscomi
Copy link
Author

rviscomi commented Jun 24, 2023

@rviscomi
Copy link
Author

rviscomi commented Jun 24, 2023

Tried inserting <text y=".9em" font-size="200">👤</text> into various parts of the SVG and with different font sizes, but the emoji doesn't seem to be rendered at all

@rviscomi
Copy link
Author

rviscomi commented Jun 24, 2023

Getting closer (spacing is tight)

image

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-linecap="square" stroke-miterlimit="10" viewBox="0 0 128 128">
  <clipPath id="a">
    <path d="M0 0h128v128H0V0z"/>
  </clipPath>
  <path d="M115.1 120v4H12.9v-4c0-15.7 19.9-23.3 42-24.9V94c-9.3-2.8-17.6-9.8-21.7-21.3-4.2-1.5-6.6-15.3-5.5-17.1C26.9 49.8 21.4 4.3 64 4c42.5.2 37.1 45.6 36.2 51.5 1.1 1.8-1.3 15.6-5.5 17.1-4 11.5-12.3 18.6-21.6 21.4v1c22.2 1.8 42 10.2 42 25z" style="fill:#1976d2"/>
  <g clip-path="url(#a)">
    <path d="M0 0h128v128H0z"/>
    <path fill="#f1c232" fill-rule="evenodd" d="m2.3 52 24.566-23.433v15.622L18.677 52l8.19 7.811v15.622z"/>
    <path stroke="#000" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4" d="m2.3 52 24.566-23.433v15.622L18.677 52l8.19 7.811v15.622z"/>
    <path fill="#f1c232" fill-rule="evenodd" d="m125.7 52-24.535-23.433v15.622L109.344 52l-8.179 7.811v15.622z"/>
    <path stroke="#000" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4" d="m125.7 52-24.535-23.433v15.622L109.344 52l-8.179 7.811v15.622z"/>
  </g>
</svg>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment