macOS folder SVG

In this example below you will see how to do a macOS folder SVG with some HTML / CSS and Javascript

macOS folder as SVG.

Thumbnail
This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>macOS folder SVG</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg>
  <defs>
   <symbol id="c" viewBox="0 0 24 24">
      <path d="M15.09 12L12 14.08v.01L8.91 12 12 9.92 15.09 12M12 2a.93.93 0 0 0-.47.15L2.5 8.11c-.23.11-.41.32-.5.56v6.25c0 .41 0 .41.15.61l9.38 6.33c.14.1.31.14.47.14.16 0 .33-.05.47-.15l9.38-6.35c.15-.17.15-.17.15-.58V8.67a1.04 1.04 0 0 0-.5-.57l-9.03-5.95A.843.843 0 0 0 12 2m4.58 11l3.01 2.04-6.76 4.56v-4.07L16.58 13m3.11-4.1L16.58 11l-3.75-2.53V4.38l6.86 4.52m.64 1.57v3.06L18.07 12l2.26-1.53M7.42 13l3.75 2.54v4.06l-6.76-4.56L7.42 13M4.31 8.9l6.86-4.51V8.5L7.42 11 4.31 8.9m-.64 1.6L5.93 12l-2.26 1.54V10.5z"/>
    </symbol>
  </defs>
</svg>


<h1>macOS folder icon as SVG</h1>
<svg viewBox="0 0 1024 1024">
  <defs>
 
    <linearGradient id="k" x2="0" y2="1">
      <stop offset="5%" stop-color="#69cdf9"/>
      <stop offset="95%" stop-color="#79d4fb"/>
    </linearGradient>
    <linearGradient id="m" x2="0" y2="1">
      <stop offset="0%" stop-color="#a7e0f9" stop-opacity=".8"/>
      <stop offset="10%" stop-color="#79d4fb" stop-opacity=".8"/>
      <stop offset="65%" stop-color="#69cdf9" stop-opacity=".2"/>
      <stop offset="100%" stop-color="#61b7df" stop-opacity=".8"/>
    </linearGradient>
    <clipPath id="i">
      <path d="M40 180v673a30 30 0 0 0 30 30h885a30 30 0 0 0 30-30V255a40 40 0 0 0-40-40H415a60 60 0 0 1-55-35 60 60 0 0 0-60-40H80a40 40 0 0 0-40 40z"/>
    </clipPath>
    <clipPath id="l">
      <path d="M40 300v553a30 30 0 0 0 30 30h885a30 30 0 0 0 30-30V300a40 40 0 0 0-40-40H80a40 40 0 0 0-40 40z"/>
    </clipPath>
    <filter id="j">
      <feTurbulence baseFrequency="0.1,0.2" numOctaves="5" stitchTiles="stitch" type="fractalNoise"/>
      <feColorMatrix type="luminanceToAlpha"/>
    </filter>
    <filter id="h">
      <feGaussianBlur in="SourceAlpha" result="a" stdDeviation="8"/>
      <feOffset dy="8" in="a" result="b"/>
      <feFlood flood-color="#000" flood-opacity="1" result="c"/>
      <feComposite in="c" in2="b" operator="in" result="b"/>
      <feComponentTransfer in="b" result="b">
        <feFuncA slope=".8" type="linear"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="n">
      <feGaussianBlur result="a" stdDeviation="3"/>
      <feOffset dy="-2" in="a" result="b"/>
      <feFlood flood-color="#4f9ebd" flood-opacity="1" result="c"/>
      <feComposite in="SourceGraphic" in2="b" operator="out" result="d"/>
      <feComposite in="c" in2="d" operator="in" result="e"/>
      <feComponentTransfer in="e" result="e">
        <feFuncA slope=".8" type="linear"/>
      </feComponentTransfer>
    </filter>
    <linearGradient id="a" x2="0" y2="1">
      <stop offset="5%" stop-color="#456"/>
      <stop offset="95%" stop-color="#789"/>
    </linearGradient>
    <filter id="b">
      <feGaussianBlur in="SourceAlpha" result="a" stdDeviation="1"/>
      <feOffset dy="3" in="a" result="b"/>
      <feFlood flood-color="#fff" flood-opacity="1" result="c"/>
      <feComposite in="c" in2="b" operator="in" result="b"/>
      <feComponentTransfer in="b" result="b">
        <feFuncA slope=".75" type="linear"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="d">
      <feGaussianBlur result="a" stdDeviation="6"/>
      <feOffset dy="3" in="a" result="b"/>
      <feFlood flood-color="#000" flood-opacity="1" result="c"/>
      <feComposite in="SourceGraphic" in2="b" operator="out" result="d"/>
      <feComposite in="c" in2="d" operator="in" result="e"/>
      <feComponentTransfer in="e" result="e">
        <feFuncA type="linear"/>
      </feComponentTransfer>
    </filter>
    <g id="f" opacity=".3">
      <use width="512" height="512" x="256" y="286" fill="url(#a)" filter="url(#b)" href="#c"/>
      <use width="512" height="512" x="256" y="286" filter="url(#d)" href="#c"/>
    </g>
    <g id="g" opacity=".2">
      <use width="512" height="512" x="256" y="286" fill="url(#a)" filter="url(#b)" href="#c"/>
      <use width="512" height="512" x="256" y="286" filter="url(#d)" href="#c"/>
    </g>
    <filter id="o" width="1024" height="1024" x="0" y="0">
      <feImage width="1024" height="1024" href="#e" result="bg"/>
      <feImage width="1024" height="1024" href="#f" result="fg"/>
      <feImage width="1024" height="1024" href="#g" result="ffg"/>
      <feBlend in="bg" in2="ffg" mode="multiply" result="m"/>
      <feBlend in="m" in2="fg" mode="overlay"/>
    </filter>
    <g id="e" filter="url(#h)">
      <path fill="#96defd" d="M40 180v673a30 30 0 0 0 30 30h885a30 30 0 0 0 30-30V255a40 40 0 0 0-40-40H415a60 60 0 0 1-55-35 60 60 0 0 0-60-40H80a40 40 0 0 0-40 40z" clip-path="url(#i)"/>
      <path d="M40 180v673a30 30 0 0 0 30 30h885a30 30 0 0 0 30-30V255a40 40 0 0 0-40-40H415a60 60 0 0 1-55-35 60 60 0 0 0-60-40H80a40 40 0 0 0-40 40z" clip-path="url(#i)" filter="url(#j)" opacity=".05"/>
      <path fill="url(#k)" d="M40 300v553a30 30 0 0 0 30 30h885a30 30 0 0 0 30-30V300a40 40 0 0 0-40-40H80a40 40 0 0 0-40 40z" clip-path="url(#l)"/>
      <path fill="url(#k)" d="M40 300v553a30 30 0 0 0 30 30h885a30 30 0 0 0 30-30V300a40 40 0 0 0-40-40H80a40 40 0 0 0-40 40z" clip-path="url(#l)" filter="url(#j)" opacity=".05"/>
      <g fill="url(#m)" clip-path="url(#i)" filter="url(#i)">
        <path d="M40 858h945v25H40z"/>
        <path d="M40 858h945v25H40z" filter="url(#j)" opacity=".05"/>
        <path d="M40 833h945v25H40z"/>
        <path d="M40 833h945v25H40z" filter="url(#j)" opacity=".05"/>
        <path d="M40 808h945v25H40z"/>
        <path d="M40 808h945v25H40z" filter="url(#j)" opacity=".05"/>
      </g>
      <path d="M40 180v673a30 30 0 0 0 30 30h885a30 30 0 0 0 30-30V255a40 40 0 0 0-40-40H415a60 60 0 0 1-55-35 60 60 0 0 0-60-40H80a40 40 0 0 0-40 40z" filter="url(#n)"/>
    </g>
  </defs>
  <path d="M0 0h1024v1024H0z" filter="url(#o)"/>
</svg>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pixelass/macos-folder-svg-YaOaXG */
svg {
  max-width: 512px;
  margin: auto;
  display: block;
}
body {
  font-family: sans-serif;
  text-align: center;
}

Comments