1
0
mirror of https://github.com/SimonPistache/famfamfam-silk-svg.git synced 2025-06-08 01:54:20 +02:00
Simon Priet 3377bb2025
fix(#179): Fix angular gradient not working (#224)
* fix(#179): Fix angular gradient not working on svg on CD, DVD and Color wheel icon.

* fix(#179): Fix related icons + Page white CD, Page white DVD, Drive CD
2025-03-14 16:45:56 +01:00

56 lines
12 KiB
XML

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_134_2588)">
<g clip-path="url(#clip1_134_2588)">
<g clip-path="url(#clip2_134_2588)">
<mask id="path-1-inside-1_134_2588" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 9C8.55229 9 9 8.55229 9 8C9 7.44772 8.55229 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55229 7.44772 9 8 9Z"/>
</mask>
<g clip-path="url(#paint0_angular_134_2588_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 -0.008 0.008 0 8 8)"><foreignObject x="-1125" y="-1125" width="2250" height="2250"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(213, 213, 213, 1) 0deg,rgba(255, 255, 255, 1) 19.8434deg,rgba(255, 244, 183, 1) 31.0548deg,rgba(255, 237, 136, 1) 55.8443deg,rgba(255, 255, 255, 1) 72.1291deg,rgba(237, 237, 237, 1) 76.4907deg,rgba(152, 214, 255, 1) 107.426deg,rgba(235, 235, 235, 1) 110.724deg,rgba(191, 243, 158, 1) 223.79deg,rgba(194, 194, 194, 1) 226.086deg,rgba(255, 255, 255, 1) 230.029deg,rgba(210, 210, 210, 1) 243.225deg,rgba(231, 231, 231, 1) 316.155deg,rgba(255, 255, 255, 1) 317.595deg,rgba(201, 201, 201, 1) 354.309deg,rgba(213, 213, 213, 1) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 9C8.55229 9 9 8.55229 9 8C9 7.44772 8.55229 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55229 7.44772 9 8 9Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.055120464414358139},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.95738303661346436,&#34;b&#34;:0.72062176465988159,&#34;a&#34;:1.0},&#34;position&#34;:0.086263343691825867},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.93145388364791870,&#34;b&#34;:0.53388673067092896,&#34;a&#34;:1.0},&#34;position&#34;:0.15512295067310333},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.20035858452320099},{&#34;color&#34;:{&#34;r&#34;:0.93000000715255737,&#34;g&#34;:0.93000000715255737,&#34;b&#34;:0.93000000715255737,&#34;a&#34;:1.0},&#34;position&#34;:0.21247418224811554},{&#34;color&#34;:{&#34;r&#34;:0.59850257635116577,&#34;g&#34;:0.84183436632156372,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.29840609431266785},{&#34;color&#34;:{&#34;r&#34;:0.92526042461395264,&#34;g&#34;:0.92526042461395264,&#34;b&#34;:0.92526042461395264,&#34;a&#34;:1.0},&#34;position&#34;:0.3075672984123230},{&#34;color&#34;:{&#34;r&#34;:0.75136303901672363,&#34;g&#34;:0.95441359281539917,&#34;b&#34;:0.62214887142181396,&#34;a&#34;:1.0},&#34;position&#34;:0.62163805961608887},{&#34;color&#34;:{&#34;r&#34;:0.76113283634185791,&#34;g&#34;:0.76113283634185791,&#34;b&#34;:0.76113283634185791,&#34;a&#34;:1.0},&#34;position&#34;:0.62801724672317505},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.63897055387496948},{&#34;color&#34;:{&#34;r&#34;:0.82488608360290527,&#34;g&#34;:0.82488608360290527,&#34;b&#34;:0.82488608360290527,&#34;a&#34;:1.0},&#34;position&#34;:0.67562526464462280},{&#34;color&#34;:{&#34;r&#34;:0.90605407953262329,&#34;g&#34;:0.90605407953262329,&#34;b&#34;:0.90605407953262329,&#34;a&#34;:1.0},&#34;position&#34;:0.87820714712142944},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.88220709562301636},{&#34;color&#34;:{&#34;r&#34;:0.7907714843750,&#34;g&#34;:0.7907714843750,&#34;b&#34;:0.7907714843750,&#34;a&#34;:1.0},&#34;position&#34;:0.98419117927551270}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.055120464414358139},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.95738303661346436,&#34;b&#34;:0.72062176465988159,&#34;a&#34;:1.0},&#34;position&#34;:0.086263343691825867},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.93145388364791870,&#34;b&#34;:0.53388673067092896,&#34;a&#34;:1.0},&#34;position&#34;:0.15512295067310333},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.20035858452320099},{&#34;color&#34;:{&#34;r&#34;:0.93000000715255737,&#34;g&#34;:0.93000000715255737,&#34;b&#34;:0.93000000715255737,&#34;a&#34;:1.0},&#34;position&#34;:0.21247418224811554},{&#34;color&#34;:{&#34;r&#34;:0.59850257635116577,&#34;g&#34;:0.84183436632156372,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.29840609431266785},{&#34;color&#34;:{&#34;r&#34;:0.92526042461395264,&#34;g&#34;:0.92526042461395264,&#34;b&#34;:0.92526042461395264,&#34;a&#34;:1.0},&#34;position&#34;:0.3075672984123230},{&#34;color&#34;:{&#34;r&#34;:0.75136303901672363,&#34;g&#34;:0.95441359281539917,&#34;b&#34;:0.62214887142181396,&#34;a&#34;:1.0},&#34;position&#34;:0.62163805961608887},{&#34;color&#34;:{&#34;r&#34;:0.76113283634185791,&#34;g&#34;:0.76113283634185791,&#34;b&#34;:0.76113283634185791,&#34;a&#34;:1.0},&#34;position&#34;:0.62801724672317505},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.63897055387496948},{&#34;color&#34;:{&#34;r&#34;:0.82488608360290527,&#34;g&#34;:0.82488608360290527,&#34;b&#34;:0.82488608360290527,&#34;a&#34;:1.0},&#34;position&#34;:0.67562526464462280},{&#34;color&#34;:{&#34;r&#34;:0.90605407953262329,&#34;g&#34;:0.90605407953262329,&#34;b&#34;:0.90605407953262329,&#34;a&#34;:1.0},&#34;position&#34;:0.87820714712142944},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.88220709562301636},{&#34;color&#34;:{&#34;r&#34;:0.7907714843750,&#34;g&#34;:0.7907714843750,&#34;b&#34;:0.7907714843750,&#34;a&#34;:1.0},&#34;position&#34;:0.98419117927551270}],&#34;transform&#34;:{&#34;m00&#34;:1.3231137444892106e-14,&#34;m01&#34;:16.0,&#34;m02&#34;:0.0,&#34;m10&#34;:-16.0,&#34;m11&#34;:9.6784237660916053e-15,&#34;m12&#34;:16.0},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
<path d="M15 8C15 11.866 11.866 15 8 15V17C12.9706 17 17 12.9706 17 8H15ZM8 1C11.866 1 15 4.13401 15 8H17C17 3.02944 12.9706 -1 8 -1V1ZM1 8C1 4.13401 4.13401 1 8 1V-1C3.02944 -1 -1 3.02944 -1 8H1ZM8 15C4.13401 15 1 11.866 1 8H-1C-1 12.9706 3.02944 17 8 17V15ZM8 8V10C9.10457 10 10 9.10457 10 8H8ZM8 8H10C10 6.89543 9.10457 6 8 6V8ZM8 8V6C6.89543 6 6 6.89543 6 8H8ZM8 8H6C6 9.10457 6.89543 10 8 10V8Z" fill="url(#paint1_linear_134_2588)" fill-opacity="0.66" style="mix-blend-mode:hard-light" mask="url(#path-1-inside-1_134_2588)"/>
<mask id="path-3-inside-2_134_2588" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"/>
</mask>
<path d="M14 8C14 11.3137 11.3137 14 8 14V16C12.4183 16 16 12.4183 16 8H14ZM8 2C11.3137 2 14 4.68629 14 8H16C16 3.58172 12.4183 0 8 0V2ZM2 8C2 4.68629 4.68629 2 8 2V0C3.58172 0 0 3.58172 0 8H2ZM8 14C4.68629 14 2 11.3137 2 8H0C0 12.4183 3.58172 16 8 16V14ZM9 8C9 8.55228 8.55228 9 8 9V11C9.65685 11 11 9.65685 11 8H9ZM8 7C8.55228 7 9 7.44772 9 8H11C11 6.34315 9.65685 5 8 5V7ZM7 8C7 7.44772 7.44772 7 8 7V5C6.34315 5 5 6.34315 5 8H7ZM8 9C7.44772 9 7 8.55228 7 8H5C5 9.65685 6.34315 11 8 11V9Z" fill="white" fill-opacity="0.66" style="mix-blend-mode:hard-light" mask="url(#path-3-inside-2_134_2588)"/>
</g>
<rect y="6" width="11" height="6" rx="1" fill="#303030"/>
<path d="M1.9964 6.9806C3.0694 6.9806 4.0844 7.3112 4.0844 8.97C4.0844 10.5882 3.11 11 2.0834 11H0.877V6.9806H1.9964ZM2.1298 7.6708H1.8282V10.3098H2.1414C2.7156 10.3098 3.0984 10.0372 3.0984 8.97C3.0984 7.8912 2.6866 7.6708 2.1298 7.6708ZM7.11617 6.9806L5.99677 11H4.81357L3.65357 6.9806H4.65697L5.42257 10.2576L6.14177 6.9806H7.11617ZM8.06918 6.9806C9.14218 6.9806 10.1572 7.3112 10.1572 8.97C10.1572 10.5882 9.18278 11 8.15618 11H6.94978V6.9806H8.06918ZM8.20258 7.6708H7.90098V10.3098H8.21418C8.78838 10.3098 9.17118 10.0372 9.17118 8.97C9.17118 7.8912 8.75938 7.6708 8.20258 7.6708Z" fill="white"/>
</g>
<mask id="path-7-outside-3_134_2588" maskUnits="userSpaceOnUse" x="6" y="6" width="10" height="10" fill="black">
<rect fill="white" x="6" y="6" width="10" height="10"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 15V13.5L10 11V8.5L11.5 7H13L15 9V10.5L13.5 12H11V13H10V14H9V15H7ZM13 8L14 9L13 10L12 9L13 8Z"/>
</mask>
<g filter="url(#filter0_i_134_2588)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 15V13.5L10 11V8.5L11.5 7H13L15 9V10.5L13.5 12H11V13H10V14H9V15H7ZM13 8L14 9L13 10L12 9L13 8Z" fill="#F4D847"/>
</g>
<path d="M7 13.5L6.35982 12.7318L6 13.0316V13.5H7ZM7 15H6V16H7V15ZM10 11L10.6402 11.7682L11 11.4684V11H10ZM10 8.5L9.29289 7.79289L9 8.08579V8.5H10ZM11.5 7V6H11.0858L10.7929 6.29289L11.5 7ZM13 7L13.7071 6.29289L13.4142 6H13V7ZM15 9H16V8.58579L15.7071 8.29289L15 9ZM15 10.5L15.7071 11.2071L16 10.9142V10.5H15ZM13.5 12V13H13.9142L14.2071 12.7071L13.5 12ZM11 12V11H10V12H11ZM11 13V14H12V13H11ZM10 13V12H9V13H10ZM10 14V15H11V14H10ZM9 14V13H8V14H9ZM9 15V16H10V15H9ZM14 9L14.7071 9.70711L15.4142 9L14.7071 8.29289L14 9ZM13 8L13.7071 7.29289L13 6.58579L12.2929 7.29289L13 8ZM13 10L12.2929 10.7071L13 11.4142L13.7071 10.7071L13 10ZM12 9L11.2929 8.29289L10.5858 9L11.2929 9.70711L12 9ZM6 13.5V15H8V13.5H6ZM9.35982 10.2318L6.35982 12.7318L7.64018 14.2682L10.6402 11.7682L9.35982 10.2318ZM9 8.5V11H11V8.5H9ZM10.7929 6.29289L9.29289 7.79289L10.7071 9.20711L12.2071 7.70711L10.7929 6.29289ZM13 6H11.5V8H13V6ZM15.7071 8.29289L13.7071 6.29289L12.2929 7.70711L14.2929 9.70711L15.7071 8.29289ZM16 10.5V9H14V10.5H16ZM14.2071 12.7071L15.7071 11.2071L14.2929 9.79289L12.7929 11.2929L14.2071 12.7071ZM11 13H13.5V11H11V13ZM12 13V12H10V13H12ZM10 14H11V12H10V14ZM11 14V13H9V14H11ZM9 15H10V13H9V15ZM10 15V14H8V15H10ZM7 16H9V14H7V16ZM14.7071 8.29289L13.7071 7.29289L12.2929 8.70711L13.2929 9.70711L14.7071 8.29289ZM13.7071 10.7071L14.7071 9.70711L13.2929 8.29289L12.2929 9.29289L13.7071 10.7071ZM11.2929 9.70711L12.2929 10.7071L13.7071 9.29289L12.7071 8.29289L11.2929 9.70711ZM12.2929 7.29289L11.2929 8.29289L12.7071 9.70711L13.7071 8.70711L12.2929 7.29289Z" fill="url(#paint2_linear_134_2588)" mask="url(#path-7-outside-3_134_2588)"/>
</g>
<defs>
<clipPath id="paint0_angular_134_2588_clip_path"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 9C8.55229 9 9 8.55229 9 8C9 7.44772 8.55229 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55229 7.44772 9 8 9Z"/></clipPath><filter id="filter0_i_134_2588" x="6" y="6" width="10" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2" dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_134_2588"/>
</filter>
<linearGradient id="paint1_linear_134_2588" x1="16" y1="16" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="1" stop-color="#666666"/>
</linearGradient>
<linearGradient id="paint2_linear_134_2588" x1="8.5" y1="8.5" x2="12.7612" y2="14.0656" gradientUnits="userSpaceOnUse">
<stop stop-color="#EAC15E"/>
<stop offset="1" stop-color="#C98032"/>
</linearGradient>
<clipPath id="clip0_134_2588">
<rect width="16" height="16" fill="white"/>
</clipPath>
<clipPath id="clip1_134_2588">
<rect width="16" height="16" fill="white"/>
</clipPath>
<clipPath id="clip2_134_2588">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>