SVG
Viewer
T6J2yLWH
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
Set Dimensions
Change dimensions
Optimize
1.36 KB
1.02 KB
-25%
Prettify
Preferences
Clear
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(100,120)" id="moon"> <circle fill="#ECE0D9" stroke-width="5" stroke="#000" r="70" cy="0" cx="0"></circle> <circle fill="#826E66" r="4" cy="-10" cx="8"></circle> <circle fill="#947D82" r="5" cy="-6" cx="-4"></circle> <circle fill="#706365" r="6" cy="-15" cx="2"></circle> </g> <linearGradient y2="200" x2="180" y1="80" x1="40" gradientUnits="userSpaceOnUse" id="moonGradient"> <stop style="stop-color: #5A5353" offset="0%"></stop> <stop style="stop-color: #CBC5C4" offset="50%"></stop> <stop style="stop-color: #ECE0D9" offset="100%"></stop> </linearGradient> <radialGradient r="70" cy="0" cx="0" gradientUnits="userSpaceOnUse" id="moonLightGradient"> <stop style="stop-color: #FFF" offset="0%"></stop> <stop style="stop-color: #FFF9EC" offset="90%"></stop> </radialGradient> <mask id="moonMask"> <circle fill="white" r="70" cy="0" cx="0"></circle> </mask> <g mask="url(#moonMask)"> <path fill="url(#moonGradient)" d="M0,0V70H70v-70Z"></path> <circle fill="url(#moonLightGradient)" r="70" cy="0" cx="0"></circle> </g> <circle stroke-width="2" stroke="#000" fill="#3DA1E6" r="22" cy="120" cx="300"></circle> <animateMotion path="M300,120C100,-50 100,180 300,120Z" repeatCount="indefinite" dur="6s"></animateMotion> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download
SVG
Viewer
Edit
Export
Rotate
Flip Y
Flip X
Set Dimensions
Change dimensions
Optimize
1.36 KB
1.02 KB
-25%
Prettify
Preferences
Clear
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(100,120)" id="moon"> <circle fill="#ECE0D9" stroke-width="5" stroke="#000" r="70" cy="0" cx="0"></circle> <circle fill="#826E66" r="4" cy="-10" cx="8"></circle> <circle fill="#947D82" r="5" cy="-6" cx="-4"></circle> <circle fill="#706365" r="6" cy="-15" cx="2"></circle> </g> <linearGradient y2="200" x2="180" y1="80" x1="40" gradientUnits="userSpaceOnUse" id="moonGradient"> <stop style="stop-color: #5A5353" offset="0%"></stop> <stop style="stop-color: #CBC5C4" offset="50%"></stop> <stop style="stop-color: #ECE0D9" offset="100%"></stop> </linearGradient> <radialGradient r="70" cy="0" cx="0" gradientUnits="userSpaceOnUse" id="moonLightGradient"> <stop style="stop-color: #FFF" offset="0%"></stop> <stop style="stop-color: #FFF9EC" offset="90%"></stop> </radialGradient> <mask id="moonMask"> <circle fill="white" r="70" cy="0" cx="0"></circle> </mask> <g mask="url(#moonMask)"> <path fill="url(#moonGradient)" d="M0,0V70H70v-70Z"></path> <circle fill="url(#moonLightGradient)" r="70" cy="0" cx="0"></circle> </g> <circle stroke-width="2" stroke="#000" fill="#3DA1E6" r="22" cy="120" cx="300"></circle> <animateMotion path="M300,120C100,-50 100,180 300,120Z" repeatCount="indefinite" dur="6s"></animateMotion> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download