simplify composite slightly

knzai · Sep 2, 2024 · 83dc2e1 · 83dc2e1
1 parent 2b58314
commit 83dc2e1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 24 deletions.
diff --git a/_posts/2024-09-01-svg-ccc.md b/_posts/2024-09-01-svg-ccc.md
@@ -72,11 +72,9 @@ Below is the gist of what I ended up on for my ideal composite SVG. The font, gr
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="918" height="560" fill="none" viewBox="0 0 918 560">
   <g clip-path="url(#a)">
     <path fill="url(#b)" d="M-134 0H918v560H-134z"/>
-    <g filter="url(#c)" style="mix-blend-mode:overlay">
-      <path fill="url(#d)" d="M423 0h496v560H423z" shape-rendering="crispEdges"/>
-    </g>
-    <path fill="#fff" d="[PATHDATA]"/>
-      </g>
+    <path fill="url(#c)" d="M423 0h496v560H423z" shape-rendering="crispEdges" style="mix-blend-mode:overlay"/>
+    <use xlink:href="#d"/>
+  </g>
   <defs>
     <linearGradient id="b" x1="-355.072" x2="190.854" y1="369.927" y2="-569.885" gradientUnits="userSpaceOnUse">
       <stop stop-color="#B45BCF"/>
@@ -85,26 +83,11 @@ Below is the gist of what I ended up on for my ideal composite SVG. The font, gr
     <clipPath id="a">
       <rect width="918" height="560" fill="#fff" rx="7"/>
     </clipPath>
-    <pattern id="d" width="1" height="1" patternContentUnits="objectBoundingBox">
+    <pattern id="c" width="1" height="1" patternContentUnits="objectBoundingBox">
       <use xlink:href="#e" transform="matrix(.00204 0 0 .00184 -.013 -.03)"/>
     </pattern>
-    <filter id="c" width="504" height="568" x="419" y="0" 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 dy="4"/>
-      <feGaussianBlur stdDeviation="2"/>
-      <feComposite in2="hardAlpha" operator="out"/>
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3226_131"/>
-      <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 dy="4"/>
-      <feGaussianBlur stdDeviation="2"/>
-      <feComposite in2="hardAlpha" operator="out"/>
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-      <feBlend in2="effect1_dropShadow_3226_131" result="effect2_dropShadow_3226_131"/>
-      <feBlend in="SourceGraphic" in2="effect2_dropShadow_3226_131" result="shape"/>
-    </filter>
-    <image xlink:href="data:image/avif;base64,[IMGDATA" id="e" width="496" height="560"/>
+    <path id="d" fill="#fff" d="[PATHDATA]"/>
+    <image id="e" width="496" height="560" xlink:href="data:image/avif;base64,[IMGDATA]"/>
   </defs>
 </svg>
 ```