earth icon
Demo
One of the trickiest parts of SVG path animations is nailing the right stroke-dasharray. By animating it, you control how the stroke appears, creating that cool drawing or moving effect along the path.
source code
"use client";
import type { SVGProps } from "react";
export function EarthIconDemo() {
return (
<>
<EarthIcon className="-my-8 mx-auto h-auto w-60" />
</>
);
}
export function EarthIcon(props: SVGProps<SVGSVGElement>): React.ReactElement {
return (
<svg width="900" height="900" viewBox="0 0 900 900" fill="none" {...props}>
<circle cx="450" cy="450" r="450" fill="url(#paint0_linear_26_28)" />
<g opacity={0.3}>
<path
d="M449.5 450C449.5 572.589 441.666 683.562 429.004 763.878C422.672 804.039 415.136 836.512 406.779 858.934C402.599 870.147 398.224 878.817 393.711 884.674C389.191 890.541 384.602 893.5 380 893.5C375.398 893.5 370.809 890.541 366.289 884.674C361.776 878.817 357.401 870.147 353.221 858.934C344.864 836.512 337.328 804.039 330.996 763.878C318.334 683.562 310.5 572.589 310.5 450C310.5 327.411 318.334 216.438 330.996 136.122C337.328 95.9608 344.864 63.4878 353.221 41.0664C357.401 29.8528 361.776 21.183 366.289 15.3257C370.809 9.45855 375.398 6.5 380 6.5C384.602 6.5 389.191 9.45855 393.711 15.3257C398.224 21.183 402.599 29.8528 406.779 41.0664C415.136 63.4878 422.672 95.9608 429.004 136.122C441.666 216.438 449.5 327.411 449.5 450Z"
stroke="currentColor"
/>
<path
d="M449.5 450C449.5 567.875 433.834 674.57 408.52 751.779C395.862 790.386 380.8 821.593 364.099 843.138C347.393 864.689 329.107 876.5 310 876.5C290.893 876.5 272.607 864.689 255.901 843.138C239.2 821.593 224.138 790.386 211.48 751.779C186.166 674.57 170.5 567.875 170.5 450C170.5 332.125 186.166 225.43 211.48 148.221C224.138 109.614 239.2 78.4069 255.901 56.8621C272.607 35.3107 290.893 23.5 310 23.5C329.107 23.5 347.393 35.3107 364.099 56.8621C380.8 78.4069 395.862 109.614 408.52 148.221C433.834 225.43 449.5 332.125 449.5 450Z"
stroke="currentColor"
/>
<path
d="M449.5 449.5C449.5 554.228 426.009 649.016 388.055 717.605C350.091 786.211 297.725 828.5 240 828.5C182.275 828.5 129.909 786.211 91.9451 717.605C53.9908 649.016 30.5 554.228 30.5 449.5C30.5 344.772 53.9908 249.984 91.9451 181.395C129.909 112.789 182.275 70.5 240 70.5C297.725 70.5 350.091 112.789 388.055 181.395C426.009 249.984 449.5 344.772 449.5 449.5Z"
stroke="currentColor"
/>
<path
d="M450.5 450C450.5 572.589 458.334 683.562 470.996 763.878C477.328 804.039 484.864 836.512 493.221 858.934C497.401 870.147 501.776 878.817 506.289 884.674C510.809 890.541 515.398 893.5 520 893.5C524.602 893.5 529.191 890.541 533.711 884.674C538.224 878.817 542.599 870.147 546.779 858.934C555.136 836.512 562.672 804.039 569.004 763.878C581.666 683.562 589.5 572.589 589.5 450C589.5 327.411 581.666 216.438 569.004 136.122C562.672 95.9608 555.136 63.4878 546.779 41.0664C542.599 29.8528 538.224 21.183 533.711 15.3257C529.191 9.45855 524.602 6.5 520 6.5C515.398 6.5 510.809 9.45855 506.289 15.3257C501.776 21.183 497.401 29.8528 493.221 41.0664C484.864 63.4878 477.328 95.9608 470.996 136.122C458.334 216.438 450.5 327.411 450.5 450Z"
stroke="currentColor"
/>
<path
d="M450.5 450C450.5 567.875 466.166 674.57 491.48 751.779C504.138 790.386 519.2 821.593 535.901 843.138C552.607 864.689 570.893 876.5 590 876.5C609.107 876.5 627.393 864.689 644.099 843.138C660.8 821.593 675.862 790.386 688.52 751.779C713.834 674.57 729.5 567.875 729.5 450C729.5 332.125 713.834 225.43 688.52 148.221C675.862 109.614 660.8 78.4069 644.099 56.8621C627.393 35.3107 609.107 23.5 590 23.5C570.893 23.5 552.607 35.3107 535.901 56.8621C519.2 78.4069 504.138 109.614 491.48 148.221C466.166 225.43 450.5 332.125 450.5 450Z"
stroke="currentColor"
/>
<path
d="M450.5 449.5C450.5 554.228 473.991 649.016 511.945 717.605C549.909 786.211 602.275 828.5 660 828.5C717.725 828.5 770.091 786.211 808.055 717.605C846.009 649.016 869.5 554.228 869.5 449.5C869.5 344.772 846.009 249.984 808.055 181.395C770.091 112.789 717.725 70.5 660 70.5C602.275 70.5 549.909 112.789 511.945 181.395C473.991 249.984 450.5 344.772 450.5 449.5Z"
stroke="currentColor"
/>
<path
d="M450 450.5C572.589 450.5 683.562 458.334 763.878 470.996C804.039 477.328 836.512 484.864 858.934 493.221C870.147 497.401 878.817 501.776 884.674 506.289C890.541 510.809 893.5 515.398 893.5 520C893.5 524.602 890.541 529.191 884.674 533.711C878.817 538.224 870.147 542.599 858.934 546.779C836.512 555.136 804.039 562.672 763.878 569.004C683.562 581.666 572.589 589.5 450 589.5C327.411 589.5 216.438 581.666 136.122 569.004C95.9608 562.672 63.4878 555.136 41.0664 546.779C29.8528 542.599 21.183 538.224 15.3257 533.711C9.45855 529.191 6.5 524.602 6.5 520C6.5 515.398 9.45855 510.809 15.3257 506.289C21.183 501.776 29.8528 497.401 41.0664 493.221C63.4878 484.864 95.9608 477.328 136.122 470.996C216.438 458.334 327.411 450.5 450 450.5Z"
stroke="currentColor"
/>
<path
d="M450 450.5C567.875 450.5 674.57 466.166 751.779 491.48C790.386 504.138 821.593 519.2 843.138 535.901C864.689 552.607 876.5 570.893 876.5 590C876.5 609.107 864.689 627.393 843.138 644.099C821.593 660.8 790.386 675.862 751.779 688.52C674.57 713.834 567.875 729.5 450 729.5C332.125 729.5 225.43 713.834 148.221 688.52C109.614 675.862 78.4069 660.8 56.8621 644.099C35.3107 627.393 23.5 609.107 23.5 590C23.5 570.893 35.3107 552.607 56.8621 535.901C78.4069 519.2 109.614 504.138 148.221 491.48C225.43 466.166 332.125 450.5 450 450.5Z"
stroke="currentColor"
/>
<path
d="M449.5 450.5C554.228 450.5 649.016 473.991 717.605 511.945C786.211 549.909 828.5 602.275 828.5 660C828.5 717.725 786.211 770.091 717.605 808.055C649.016 846.009 554.228 869.5 449.5 869.5C344.772 869.5 249.984 846.009 181.395 808.055C112.789 770.091 70.5 717.725 70.5 660C70.5 602.275 112.789 549.909 181.395 511.945C249.984 473.991 344.772 450.5 449.5 450.5Z"
stroke="currentColor"
/>
<path
d="M450 449.5C572.589 449.5 683.562 441.666 763.878 429.004C804.039 422.672 836.512 415.136 858.934 406.779C870.147 402.599 878.817 398.224 884.674 393.711C890.541 389.191 893.5 384.602 893.5 380C893.5 375.398 890.541 370.809 884.674 366.289C878.817 361.776 870.147 357.401 858.934 353.221C836.512 344.864 804.039 337.328 763.878 330.996C683.562 318.334 572.589 310.5 450 310.5C327.411 310.5 216.438 318.334 136.122 330.996C95.9608 337.328 63.4878 344.864 41.0664 353.221C29.8528 357.401 21.183 361.776 15.3257 366.289C9.45855 370.809 6.5 375.398 6.5 380C6.5 384.602 9.45855 389.191 15.3257 393.711C21.183 398.224 29.8528 402.599 41.0664 406.779C63.4878 415.136 95.9608 422.672 136.122 429.004C216.438 441.666 327.411 449.5 450 449.5Z"
stroke="currentColor"
/>
<path
d="M450 449.5C567.875 449.5 674.57 433.834 751.779 408.52C790.386 395.862 821.593 380.8 843.138 364.099C864.689 347.393 876.5 329.107 876.5 310C876.5 290.893 864.689 272.607 843.138 255.901C821.593 239.2 790.386 224.138 751.779 211.48C674.57 186.166 567.875 170.5 450 170.5C332.125 170.5 225.43 186.166 148.221 211.48C109.614 224.138 78.4069 239.2 56.8621 255.901C35.3107 272.607 23.5 290.893 23.5 310C23.5 329.107 35.3107 347.393 56.8621 364.099C78.4069 380.8 109.614 395.862 148.221 408.52C225.43 433.834 332.125 449.5 450 449.5Z"
stroke="currentColor"
/>
<path
d="M449.5 449.5C554.228 449.5 649.016 426.009 717.605 388.055C786.211 350.091 828.5 297.725 828.5 240C828.5 182.275 786.211 129.909 717.605 91.9451C649.016 53.9908 554.228 30.5 449.5 30.5C344.772 30.5 249.984 53.9908 181.395 91.9451C112.789 129.909 70.5 182.275 70.5 240C70.5 297.725 112.789 350.091 181.395 388.055C249.984 426.009 344.772 449.5 449.5 449.5Z"
stroke="currentColor"
/>
</g>
<path
d="M449.5 450C449.5 572.589 441.666 683.562 429.004 763.878C422.672 804.039 415.136 836.512 406.779 858.934C402.599 870.147 398.224 878.817 393.711 884.674C389.191 890.541 384.602 893.5 380 893.5C375.398 893.5 370.809 890.541 366.289 884.674C361.776 878.817 357.401 870.147 353.221 858.934C344.864 836.512 337.328 804.039 330.996 763.878C318.334 683.562 310.5 572.589 310.5 450C310.5 327.411 318.334 216.438 330.996 136.122C337.328 95.9608 344.864 63.4878 353.221 41.0664C357.401 29.8528 361.776 21.183 366.289 15.3257C370.809 9.45855 375.398 6.5 380 6.5C384.602 6.5 389.191 9.45855 393.711 15.3257C398.224 21.183 402.599 29.8528 406.779 41.0664C415.136 63.4878 422.672 95.9608 429.004 136.122C441.666 216.438 449.5 327.411 449.5 450Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M449.5 450C449.5 567.875 433.834 674.57 408.52 751.779C395.862 790.386 380.8 821.593 364.099 843.138C347.393 864.689 329.107 876.5 310 876.5C290.893 876.5 272.607 864.689 255.901 843.138C239.2 821.593 224.138 790.386 211.48 751.779C186.166 674.57 170.5 567.875 170.5 450C170.5 332.125 186.166 225.43 211.48 148.221C224.138 109.614 239.2 78.4069 255.901 56.8621C272.607 35.3107 290.893 23.5 310 23.5C329.107 23.5 347.393 35.3107 364.099 56.8621C380.8 78.4069 395.862 109.614 408.52 148.221C433.834 225.43 449.5 332.125 449.5 450Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M449.5 449.5C449.5 554.228 426.009 649.016 388.055 717.605C350.091 786.211 297.725 828.5 240 828.5C182.275 828.5 129.909 786.211 91.9451 717.605C53.9908 649.016 30.5 554.228 30.5 449.5C30.5 344.772 53.9908 249.984 91.9451 181.395C129.909 112.789 182.275 70.5 240 70.5C297.725 70.5 350.091 112.789 388.055 181.395C426.009 249.984 449.5 344.772 449.5 449.5Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M450.5 450C450.5 572.589 458.334 683.562 470.996 763.878C477.328 804.039 484.864 836.512 493.221 858.934C497.401 870.147 501.776 878.817 506.289 884.674C510.809 890.541 515.398 893.5 520 893.5C524.602 893.5 529.191 890.541 533.711 884.674C538.224 878.817 542.599 870.147 546.779 858.934C555.136 836.512 562.672 804.039 569.004 763.878C581.666 683.562 589.5 572.589 589.5 450C589.5 327.411 581.666 216.438 569.004 136.122C562.672 95.9608 555.136 63.4878 546.779 41.0664C542.599 29.8528 538.224 21.183 533.711 15.3257C529.191 9.45855 524.602 6.5 520 6.5C515.398 6.5 510.809 9.45855 506.289 15.3257C501.776 21.183 497.401 29.8528 493.221 41.0664C484.864 63.4878 477.328 95.9608 470.996 136.122C458.334 216.438 450.5 327.411 450.5 450Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M450.5 450C450.5 567.875 466.166 674.57 491.48 751.779C504.138 790.386 519.2 821.593 535.901 843.138C552.607 864.689 570.893 876.5 590 876.5C609.107 876.5 627.393 864.689 644.099 843.138C660.8 821.593 675.862 790.386 688.52 751.779C713.834 674.57 729.5 567.875 729.5 450C729.5 332.125 713.834 225.43 688.52 148.221C675.862 109.614 660.8 78.4069 644.099 56.8621C627.393 35.3107 609.107 23.5 590 23.5C570.893 23.5 552.607 35.3107 535.901 56.8621C519.2 78.4069 504.138 109.614 491.48 148.221C466.166 225.43 450.5 332.125 450.5 450Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M450.5 449.5C450.5 554.228 473.991 649.016 511.945 717.605C549.909 786.211 602.275 828.5 660 828.5C717.725 828.5 770.091 786.211 808.055 717.605C846.009 649.016 869.5 554.228 869.5 449.5C869.5 344.772 846.009 249.984 808.055 181.395C770.091 112.789 717.725 70.5 660 70.5C602.275 70.5 549.909 112.789 511.945 181.395C473.991 249.984 450.5 344.772 450.5 449.5Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M450 450.5C572.589 450.5 683.562 458.334 763.878 470.996C804.039 477.328 836.512 484.864 858.934 493.221C870.147 497.401 878.817 501.776 884.674 506.289C890.541 510.809 893.5 515.398 893.5 520C893.5 524.602 890.541 529.191 884.674 533.711C878.817 538.224 870.147 542.599 858.934 546.779C836.512 555.136 804.039 562.672 763.878 569.004C683.562 581.666 572.589 589.5 450 589.5C327.411 589.5 216.438 581.666 136.122 569.004C95.9608 562.672 63.4878 555.136 41.0664 546.779C29.8528 542.599 21.183 538.224 15.3257 533.711C9.45855 529.191 6.5 524.602 6.5 520C6.5 515.398 9.45855 510.809 15.3257 506.289C21.183 501.776 29.8528 497.401 41.0664 493.221C63.4878 484.864 95.9608 477.328 136.122 470.996C216.438 458.334 327.411 450.5 450 450.5Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M450 450.5C567.875 450.5 674.57 466.166 751.779 491.48C790.386 504.138 821.593 519.2 843.138 535.901C864.689 552.607 876.5 570.893 876.5 590C876.5 609.107 864.689 627.393 843.138 644.099C821.593 660.8 790.386 675.862 751.779 688.52C674.57 713.834 567.875 729.5 450 729.5C332.125 729.5 225.43 713.834 148.221 688.52C109.614 675.862 78.4069 660.8 56.8621 644.099C35.3107 627.393 23.5 609.107 23.5 590C23.5 570.893 35.3107 552.607 56.8621 535.901C78.4069 519.2 109.614 504.138 148.221 491.48C225.43 466.166 332.125 450.5 450 450.5Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M449.5 450.5C554.228 450.5 649.016 473.991 717.605 511.945C786.211 549.909 828.5 602.275 828.5 660C828.5 717.725 786.211 770.091 717.605 808.055C649.016 846.009 554.228 869.5 449.5 869.5C344.772 869.5 249.984 846.009 181.395 808.055C112.789 770.091 70.5 717.725 70.5 660C70.5 602.275 112.789 549.909 181.395 511.945C249.984 473.991 344.772 450.5 449.5 450.5Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M450 449.5C572.589 449.5 683.562 441.666 763.878 429.004C804.039 422.672 836.512 415.136 858.934 406.779C870.147 402.599 878.817 398.224 884.674 393.711C890.541 389.191 893.5 384.602 893.5 380C893.5 375.398 890.541 370.809 884.674 366.289C878.817 361.776 870.147 357.401 858.934 353.221C836.512 344.864 804.039 337.328 763.878 330.996C683.562 318.334 572.589 310.5 450 310.5C327.411 310.5 216.438 318.334 136.122 330.996C95.9608 337.328 63.4878 344.864 41.0664 353.221C29.8528 357.401 21.183 361.776 15.3257 366.289C9.45855 370.809 6.5 375.398 6.5 380C6.5 384.602 9.45855 389.191 15.3257 393.711C21.183 398.224 29.8528 402.599 41.0664 406.779C63.4878 415.136 95.9608 422.672 136.122 429.004C216.438 441.666 327.411 449.5 450 449.5Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M450 449.5C567.875 449.5 674.57 433.834 751.779 408.52C790.386 395.862 821.593 380.8 843.138 364.099C864.689 347.393 876.5 329.107 876.5 310C876.5 290.893 864.689 272.607 843.138 255.901C821.593 239.2 790.386 224.138 751.779 211.48C674.57 186.166 567.875 170.5 450 170.5C332.125 170.5 225.43 186.166 148.221 211.48C109.614 224.138 78.4069 239.2 56.8621 255.901C35.3107 272.607 23.5 290.893 23.5 310C23.5 329.107 35.3107 347.393 56.8621 364.099C78.4069 380.8 109.614 395.862 148.221 408.52C225.43 433.834 332.125 449.5 450 449.5Z"
stroke="currentColor"
className="animate-stroke"
/>
<path
d="M449.5 449.5C554.228 449.5 649.016 426.009 717.605 388.055C786.211 350.091 828.5 297.725 828.5 240C828.5 182.275 786.211 129.909 717.605 91.9451C649.016 53.9908 554.228 30.5 449.5 30.5C344.772 30.5 249.984 53.9908 181.395 91.9451C112.789 129.909 70.5 182.275 70.5 240C70.5 297.725 112.789 350.091 181.395 388.055C249.984 426.009 344.772 449.5 449.5 449.5Z"
stroke="currentColor"
className="animate-stroke"
/>
<defs>
<linearGradient
id="paint0_linear_26_28"
x1="450"
y1="0"
x2="450"
y2="900"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="rgba(255,255,255,0)" />
<stop offset="0.5" stopColor="rgba(200,200,255,0.2)" />
<stop offset="1" stopColor="rgba(255,255,255,0)" />
</linearGradient>
</defs>
</svg>
);
}
