<!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;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
![[BROKEN] prettify `<input type=range>` #57](https://codepen.io/thebabydino/pen/OPEpNr/image/small.png)
