shapes-gradients.svg

Enable keyboard shortcuts

Default Checkerboard Light Dark

<!-- Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/ -->

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">

  <title>Gradient fills on simple shapes</title>

  <defs>

    <linearGradient id="h">

      <stop offset="0" stop-color="red"/>

      <stop offset="1" stop-color="blue"/>

    </linearGradient>

    <linearGradient id="v" x1="0" y1="0" x2="0" y2="1">

      <stop offset="0" stop-color="yellow"/>

      <stop offset="0.5" stop-color="green" stop-opacity="0.5"/>

      <stop offset="1" stop-color="black"/>

    </linearGradient>

    <linearGradient id="diag" x1="0" y1="0" x2="1" y2="1">

      <stop offset="0" stop-color="orange"/>

      <stop offset="1" stop-color="purple"/>

    </linearGradient>

    <linearGradient id="user" gradientUnits="userSpaceOnUse" x1="20" y1="0" x2="120" y2="0" spreadMethod="reflect">

      <stop offset="0" stop-color="white"/>

      <stop offset="1" stop-color="teal"/>

    </linearGradient>

    <linearGradient id="repeat" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="40" y2="0" spreadMethod="repeat">

      <stop offset="0" stop-color="pink"/>

      <stop offset="1" stop-color="maroon"/>

    </linearGradient>

    <linearGradient id="rot" gradientTransform="rotate(45 0.5 0.5)">

      <stop offset="0" stop-color="lime"/>

      <stop offset="1" stop-color="navy"/>

    </linearGradient>

    <linearGradient id="linear-rgb" color-interpolation="linearRGB">

      <stop offset="0" stop-color="red"/>

      <stop offset="1" stop-color="lime"/>

    </linearGradient>

    <radialGradient id="rad">

      <stop offset="0" stop-color="white"/>

      <stop offset="1" stop-color="darkblue"/>

    </radialGradient>

    <radialGradient id="rad-user" gradientUnits="userSpaceOnUse" cx="480" cy="280" r="30" spreadMethod="reflect">

      <stop offset="0" stop-color="gold"/>

      <stop offset="1" stop-color="brown"/>

    </radialGradient>

    <radialGradient id="href" href="#rad" cx="0.3" cy="0.3"/>

    <linearGradient id="one-stop">

      <stop offset="0" stop-color="gray"/>

    </linearGradient>

  </defs>

  <!-- objectBoundingBox linear gradients on rects of different aspect ratios -->

  <rect x="20" y="20" width="200" height="60" fill="url(#h)"/>

  <rect x="240" y="20" width="60" height="120" fill="url(#v)"/>

  <rect x="320" y="20" width="120" height="120" fill="url(#diag)"/>

  <rect x="460" y="20" width="120" height="120" fill="url(#rot)"/>

  <!-- user space gradients with reflect and repeat -->

  <rect x="20" y="100" width="200" height="40" fill="url(#user)"/>

  <rect x="20" y="160" width="200" height="40" fill="url(#repeat)"/>

  <rect x="240" y="160" width="200" height="40" fill="url(#linear-rgb)"/>

  <!-- radial gradients on circle, ellipse and rounded rect -->

  <circle cx="80" cy="280" r="60" fill="url(#rad)"/>

  <ellipse cx="240" cy="280" rx="80" ry="50" fill="url(#rad)"/>

  <rect x="340" y="220" width="100" height="120" rx="20" fill="url(#href)"/>

  <rect x="440" y="240" width="80" height="80" fill="url(#rad-user)"/>

  <!-- degenerate gradient: single stop -->

  <rect x="540" y="240" width="40" height="80" fill="url(#one-stop)"/>

  <!-- fill-opacity applies to the gradient -->

  <rect x="20" y="350" width="200" height="40" fill="url(#h)" fill-opacity="0.5"/>

  <!-- gradient fill with a stroke -->

  <rect x="240" y="350" width="200" height="40" fill="url(#h)" stroke="black" stroke-width="6"/>

</svg>