Skip to content

brand guideline template

Thimbl Brand Guide

More

Share

Explore

Thimbl Brand Guide

Patterns
Patterns

⁠

⁠

⁠

⁠

gggrain → SVG generator for organic-feeling grainy gradients (fffuel.co)⁠

⁠

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 700 700" style="overflow: hidden; display: block;" width="700" height="700"><defs><linearGradient id="two-113" x1="350" y1="-350" x2="350" y2="350" spreadMethod="pad" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#43405D" stop-opacity="1"></stop><stop offset="100%" stop-color="#090031" stop-opacity="1"></stop></linearGradient></defs><g id="two-0" transform="matrix(1 0 0 1 0 0)" opacity="1"><path transform="matrix(1 0 0 1 350 350)" id="two-112" d="M 243.405164 55.55564 C 257.228431 91.904969 324.343363 113.52385 312.936854 150.702446 C 304.144148 179.361561 249.867159 161.48963 227.428004 181.367781 C 209.818315 196.967658 215.511298 232.799943 195.445602 245.081033 C 173.578807 258.464476 142.77824 250.12244 117.758655 244.528368 C 93.191437 239.03544 73.169625 207.474734 48.509015 212.531881 C 25.083611 217.335725 23.426454 271.161883 0 266.363166 C -36.437593 258.899223 0.156954 166.277564 -36.453027 159.711145 C -87.200077 150.609081 -84.617463 290.685418 -135.212002 280.770613 C -162.4272 275.437361 -145.398752 224.101263 -159.827701 200.417597 C -169.697083 184.218004 -185.662619 171.484738 -200.946784 160.249712 C -219.738446 146.436407 -260.55031 149.910404 -263.168959 126.735491 C -268.24157 81.843145 -168.673504 80.925485 -160.163314 36.556231 C -157.611034 23.249506 -169.258258 9.563263 -178.856541 0 C -217.270347 -38.273649 -308.664274 -22.709357 -325.432679 -74.277886 C -333.014654 -97.595027 -313.690797 -129.812597 -291.58519 -140.420027 C -244.293475 -163.113075 -169.236633 -67.877976 -135.895957 -108.37341 C -106.229917 -144.405647 -221.596831 -204.066441 -190.477569 -238.851317 C -170.335082 -261.366438 -129.100574 -227.658526 -102.626487 -213.106096 C -76.657778 -198.831464 -64.573895 -157.173262 -35.123411 -153.885716 C -22.013163 -152.422224 -9.155152 -163.475579 -0.000001 -172.973137 C 37.594559 -211.97375 20.264561 -332.221534 73.03399 -319.982819 C 126.558773 -307.568915 32.923457 -190.073219 73.913826 -153.483643 C 87.057157 -141.751402 109.86897 -155.087019 126.990273 -159.240766 C 175.35712 -170.974899 221.384629 -231.681124 267.712247 -213.493394 C 291.11789 -204.304588 294.835355 -169.369949 301.171749 -145.036671 C 307.447355 -120.936837 313.997346 -93.024141 305.309982 -69.685012 C 294.162588 -39.736864 248.605021 -30.169558 238.071563 -0.000001 C 232.000577 17.388305 236.858532 38.340773 243.405164 55.55564 Z " fill="url(#two-113)" stroke="undefined" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path></g></svg>

PATCH

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 600 600"><path d="M393.36627197265625,206.68467712402344C359.10032653808594,159.306765238444,314.86928685506183,130.11077626546225,261.1976318359375,141.64930725097656C207.52597681681314,153.18783823649088,79.20352172851562,217.3490727742513,71.33634185791016,275.9158630371094C63.46916198730469,334.48265329996747,148.08505884806317,468.0498962402344,213.9945526123047,493.050048828125C279.9040463765462,518.0502014160156,436.8980178833008,473.6443405151367,466.7933044433594,425.9167785644531C496.68859100341797,378.18921661376953,427.63221740722656,254.06258900960287,393.36627197265625,206.68467712402344C359.10032653808594,159.306765238444,314.86928685506183,130.11077626546225,261.1976318359375,141.64930725097656" fill="#14ffd2" fill-opacity="1"></path><defs></defs></svg>

⁠

This link can't be embedded.⁠

⁠

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700"><defs><linearGradient gradientTransform="rotate(-125, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="gggrain-gradient2"><stop stop-color="#FF8A5D" stop-opacity="1" offset="-0%"></stop><stop stop-color="rgba(255,255,255,0)" stop-opacity="0" offset="100%"></stop></linearGradient><linearGradient gradientTransform="rotate(125, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="gggrain-gradient3"><stop stop-color="#AEFFEF" stop-opacity="1"></stop><stop stop-color="rgba(255,255,255,0)" stop-opacity="0" offset="100%"></stop></linearGradient><filter id="gggrain-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

<feTurbulence type="fractalNoise" baseFrequency="0.97" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>

<feColorMatrix type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="colormatrix"></feColorMatrix>

<feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">

<feFuncR type="linear" slope="3"></feFuncR>

<feFuncG type="linear" slope="3"></feFuncG>

<feFuncB type="linear" slope="3"></feFuncB>

</feComponentTransfer>

<feColorMatrix x="0%" y="0%" width="100%" height="100%" in="componentTransfer" result="colormatrix2" type="matrix" values="1 0 0 0 0

0 1 0 0 0

0 0 1 0 0

0 0 0 18 -10"></feColorMatrix>

</filter></defs><g><rect width="100%" height="100%" fill="#afbbff"></rect><rect width="100%" height="100%" fill="url(#gggrain-gradient3)"></rect><rect width="100%" height="100%" fill="url(#gggrain-gradient2)"></rect><rect width="100%" height="100%" fill="transparent" filter="url(#gggrain-filter)" opacity="0.72" style="mix-blend-mode: normal"></rect></g></svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700"><defs><linearGradient gradientTransform="rotate(-150, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="gggrain-gradient2"><stop stop-color="hsla(168, 87%, 53%, 1)" stop-opacity="1" offset="-0%"></stop><stop stop-color="rgba(255,255,255,0)" stop-opacity="0" offset="100%"></stop></linearGradient><linearGradient gradientTransform="rotate(150, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="gggrain-gradient3"><stop stop-color="hsl(168, 100%, 84%)" stop-opacity="1"></stop><stop stop-color="rgba(255,255,255,0)" stop-opacity="0" offset="100%"></stop></linearGradient><filter id="gggrain-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

<feTurbulence type="fractalNoise" baseFrequency="0.55" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>

<feColorMatrix type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="colormatrix"></feColorMatrix>

<feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">

<feFuncR type="linear" slope="3"></feFuncR>

<feFuncG type="linear" slope="3"></feFuncG>

<feFuncB type="linear" slope="3"></feFuncB>

</feComponentTransfer>

<feColorMatrix x="0%" y="0%" width="100%" height="100%" in="componentTransfer" result="colormatrix2" type="matrix" values="1 0 0 0 0

0 1 0 0 0

0 0 1 0 0

0 0 0 19 -11"></feColorMatrix>

</filter></defs><g><rect width="100%" height="100%" fill="hsl(169, 100%, 54%)"></rect><rect width="100%" height="100%" fill="url(#gggrain-gradient3)"></rect><rect width="100%" height="100%" fill="url(#gggrain-gradient2)"></rect><rect width="100%" height="100%" fill="transparent" filter="url(#gggrain-filter)" opacity="1" style="mix-blend-mode: soft-light"></rect></g></svg>

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.