<html>
<head>
  <meta charset="utf-8">
  <title>Plume SVG Logo Test</title>
  <style>
  body {background: #123}
  body {display: flex}
  section {display: flex; justify-content: center; align-items: center; padding: 1em}
  .white {background: white}
  .black {background: black}
  .grey {background: #23f0c7}
  </style>
  <style>
  #plumeLogo {width: 48px; height: 100%; margin: 0 1em}
  .trwnhFeather path {stroke-width: 4px; fill: #7765e3; stroke: #333}
  .trwnhParagraphs path {fill: #7765e3;}
  .trwnhParagraphs {background: transparent}
  </style>
  <style>
  .white .trwnhParagraphs path {fill: black}
  .white .trwnhFeather path {stroke: white; fill: black}
  
  .black .trwnhParagraphs path {fill: white}
  .black .trwnhFeather path {stroke: #7765e3; fill: transparent; stroke-width: 6px}
  
  .grey .trwnhParagraphs path {fill: #7765e3;}
  .grey .trwnhParagraphs {background: white;}
  .grey .trwnhFeather path {stroke: #6457a6; stroke-width: 8px;}
  </style>
</head>
<body>

<section class="white">

<svg id="plumeLogo" class="trwnhFeather" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 
135.46666 135.46666">
<path d="M11.346629 126.87841c-10.2339328 10.3989-10.90810626 
7.27844-7.0005853-2.50973L16.162981 104.0034c1.615621.4056 13.896323-55.27971 
54.76559-81.99281-9.224928 15.79597-3.919201 18.80882-3.919201 18.80882 7.340235-21.97554 
13.657091-30.77817 66.36274-38.72208-15.16743 11.41894-6.45491 41.26757-50.150396 55.23494 
12.687787-2.73388 25.830656-8.74025 31.689776-15.67015-3.25597 22.41232-51.907452 
60.26584-84.872835 65.01524z" fill="none" stroke="#7765e3" stroke-width="4.23333328" 
stroke-linecap="square" stroke-linejoin="round"/></svg>

<svg id="plumeLogo" class="trwnhParagraphs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 
135.46666 135.46666">
<g>
<path transform="matrix(.26458 0 0 .26458 0 0)" d="m0 0v512h512v-512h-512zm65.9 
59.885h82.551c147.48 0.68145 146.25 182.67-3.9277 182.67l2.1816 
203.56h-77.529l-3.2754-386.23zm295.41 57.426h85.379v85.379h-85.379v-85.379zm-63.434 
120.57h148.25v84.246h-148.25v-84.246zm-100.49 119.51h249.23v85.227h-249.23v-85.227z"/>
</g>
</svg>

</section>

<section class="black">

<svg id="plumeLogo" class="trwnhFeather" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 
135.46666 135.46666">
<path d="M11.346629 126.87841c-10.2339328 10.3989-10.90810626 
7.27844-7.0005853-2.50973L16.162981 104.0034c1.615621.4056 13.896323-55.27971 
54.76559-81.99281-9.224928 15.79597-3.919201 18.80882-3.919201 18.80882 7.340235-21.97554 
13.657091-30.77817 66.36274-38.72208-15.16743 11.41894-6.45491 41.26757-50.150396 55.23494 
12.687787-2.73388 25.830656-8.74025 31.689776-15.67015-3.25597 22.41232-51.907452 
60.26584-84.872835 65.01524z" fill="none" stroke="#7765e3" stroke-width="4.23333328" 
stroke-linecap="square" stroke-linejoin="round"/></svg>

<svg id="plumeLogo" class="trwnhParagraphs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 
135.46666 135.46666">
<g>
<path transform="matrix(.26458 0 0 .26458 0 0)" d="m0 0v512h512v-512h-512zm65.9 
59.885h82.551c147.48 0.68145 146.25 182.67-3.9277 182.67l2.1816 
203.56h-77.529l-3.2754-386.23zm295.41 57.426h85.379v85.379h-85.379v-85.379zm-63.434 
120.57h148.25v84.246h-148.25v-84.246zm-100.49 119.51h249.23v85.227h-249.23v-85.227z"/>
</g>
</svg>

</section>

<section class="grey">

<svg id="plumeLogo" class="trwnhFeather" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 
135.46666 135.46666">
<path d="M11.346629 126.87841c-10.2339328 10.3989-10.90810626 
7.27844-7.0005853-2.50973L16.162981 104.0034c1.615621.4056 13.896323-55.27971 
54.76559-81.99281-9.224928 15.79597-3.919201 18.80882-3.919201 18.80882 7.340235-21.97554 
13.657091-30.77817 66.36274-38.72208-15.16743 11.41894-6.45491 41.26757-50.150396 55.23494 
12.687787-2.73388 25.830656-8.74025 31.689776-15.67015-3.25597 22.41232-51.907452 
60.26584-84.872835 65.01524z" fill="none" stroke="#7765e3" stroke-width="4.23333328" 
stroke-linecap="square" stroke-linejoin="round"/></svg>

<svg id="plumeLogo" class="trwnhParagraphs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 
135.46666 135.46666">
<g>
<path transform="matrix(.26458 0 0 .26458 0 0)" d="m0 0v512h512v-512h-512zm65.9 
59.885h82.551c147.48 0.68145 146.25 182.67-3.9277 182.67l2.1816 
203.56h-77.529l-3.2754-386.23zm295.41 57.426h85.379v85.379h-85.379v-85.379zm-63.434 
120.57h148.25v84.246h-148.25v-84.246zm-100.49 119.51h249.23v85.227h-249.23v-85.227z"/>
</g>
</svg>

</section>

</body>
</html>