<div id="dontedit">
<div class="shape">
<svg class="spiral" viewBox="0 0 720 720">
<defs>
<radialGradient id="rainbow" cy="50%" fx="51%" fy="50%" r=".45">
<stop offset="0%" stop-color="#ff2222"/>
<stop offset="10%" stop-color="#ffaa22"/>
<stop offset="20%" stop-color="#ffff22"/>
<stop offset="30%" stop-color="#aaff22"/>
<stop offset="40%" stop-color="#22ff22"/>
<stop offset="50%" stop-color="#22ffaa"/>
<stop offset="60%" stop-color="#22ffff"/>
<stop offset="70%" stop-color="#22aaff"/>
<stop offset="80%" stop-color="#2222ff"/>
<stop offset="90%" stop-color="#aa22ff"/>
<stop offset="100%" stop-color="#ff22ff"/>
</radialGradient>
</defs>
<path class="spiral" d="M 350.09375,7 C 298.00214,7.614974 245.52493,19.654273 196.53125,44.46875 C 26.110237,130.78414 -45.831305,345.01469 40.78125,515.9375 C 125.48479,683.09302 335.62525,753.657 503.28125,668.65625 C 667.18157,585.5596 736.36271,379.46198 652.96875,215.0625 C 571.47397,54.406949 369.43464,-13.38592 208.28125,68.40625 C 50.859891,148.30426 -15.570503,346.3009 64.625,504.21875 C 142.9314,658.41664 336.932,723.47902 491.625,644.875 C 642.61031,568.15498 706.29904,378.19781 629.28125,226.71875 C 554.14229,78.934989 368.15112,16.594364 219.875,92.03125 C 75.281583,165.59453 14.294851,347.60312 88.15625,492.6875 C 160.14931,634.10195 338.18977,693.72892 480.09375,621.4375 C 618.34078,551.0091 676.63323,376.92264 605.90625,238.1875 C 537.03688,103.09616 366.8905,46.144287 231.3125,115.3125 C 99.36494,182.62857 43.759791,348.84849 111.375,481.28125 C 177.14358,610.09716 339.45036,664.38055 468.75,598.3125 C 594.44657,534.08551 647.40185,375.67881 582.875,249.5 C 520.18358,126.91024 365.63299,75.258345 242.5625,138.25 C 123.06681,199.41196 72.756113,350.08761 134.21875,470.0625 C 193.85746,586.47709 340.70149,635.50237 457.59375,575.5625 C 570.94046,517.44071 618.64226,374.44783 560.21875,260.625 C 503.60744,150.33272 364.42307,103.89891 253.65625,160.8125 C 146.40469,215.9199 101.27719,351.30674 156.6875,459.03125 C 210.29766,563.25607 341.89757,607.10125 446.59375,553.1875 C 547.80609,501.06775 590.39284,373.21333 537.96875,271.53125 C 487.33246,173.31684 363.21376,132.02727 264.53125,182.96875 C 169.29992,232.12867 129.25274,352.52096 178.71875,448.21875 C 226.40955,540.48219 343.11552,579.24786 435.84375,531.25 C 525.15481,485.02092 562.66222,372.02416 516.125,282.25 C 471.35008,195.87546 362.02345,159.60326 275.1875,204.6875 C 191.73323,248.016 156.70465,353.71102 200.34375,437.625 C 242.23375,518.17562 344.27264,551.98323 425.28125,509.78125 C 502.94527,469.32164 535.52312,370.83904 494.75,292.71875 C 455.71247,217.92385 360.84316,186.58478 285.59375,225.9375 C 213.65002,263.56148 183.49649,354.88477 221.4375,427.28125 C 257.65668,496.39224 345.43801,525.31948 415,488.78125 C 481.29721,453.95787 509.05091,369.68394 473.90625,302.9375 C 440.46942,239.43456 359.70038,212.89569 295.75,246.65625 C 235.02123,278.71606 209.64501,356.01305 242.03125,417.1875 C 272.72385,475.16284 346.58077,499.39703 405,468.375 C 460.24333,439.03947 483.29325,368.56048 453.625,312.875 C 425.63608,260.34154 358.5676,238.42465 305.59375,266.75 C 255.74722,293.40316 234.97504,357.12104 261.96875,407.40625 C 287.29737,454.58964 347.69212,474.23631 395.3125,448.5625 C 439.85747,424.54676 458.39739,367.44908 434.03125,322.46875 C 411.31625,280.53648 357.45977,263.1162 315.09375,286.1875 C 275.74735,307.61439 259.42885,358.22136 281.21875,398 C 301.37075,434.78857 348.78061,450.05394 386,429.53125 C 420.26013,410.6403 434.45798,366.37715 415.1875,331.6875 C 397.54305,299.92495 356.37843,286.80946 324.1875,304.84375 C 294.89,321.25705 282.80981,359.3063 299.625,389.03125 C 314.8234,415.89811 349.86267,426.95834 377.15625,411.34375 C 401.62899,397.34296 411.68416,365.27407 397.25,340.375 C 384.4283,318.25745 355.29387,309.22397 332.75,322.5 C 312.9459,334.16258 304.88833,360.42537 317.03125,380.65625 C 327.55645,398.19188 350.97411,405.28861 368.9375,394.25 C 384.25349,384.83822 390.4372,364.15151 380.46875,348.40625 C 372.14351,335.25645 354.11219,329.96565 340.53125,338.90625 C 329.48852,346.17588 325.0939,361.64985 333.0625,373.125 C 339.31373,382.12703 352.31833,385.67159 361.75,378.59375 C 368.78786,373.31229 371.54192,362.60338 365.21875,355.15625 C 363.02417,352.57158 360.03172,350.93586 356.6875,350.46875 C 353.34328,350.00164 349.36193,350.94947 346.625,353.875 C 344.88615,355.73367 343.99691,357.91009 343.90625,360.5 C 343.81559,363.08991 345.24951,366.6475 348.3125,368.1875 C 350.94342,369.51025 351.68119,369.10211 353.5625,368.5625 C 354.50316,368.2927 355.85585,367.85563 357,366.1875 C 357.89618,364.88091 357.87818,363.05939 357.5625,361.59375 C 357.57076,361.60314 357.58576,361.6156 357.59375,361.625 C 359.7418,364.15487 358.5966,368.45756 355.75,370.59375 C 351.28326,373.94574 344.52682,372.08 341.28125,367.40625 C 336.77279,360.91386 339.41633,351.63597 346.03125,347.28125 C 354.62138,341.6262 366.55658,345.10269 372.03125,353.75 C 378.83738,364.50034 374.47443,379.14056 363.71875,385.75 C 350.75256,393.7178 333.35418,388.42935 325.59375,375.5 C 316.45106,360.26769 322.65206,340.05294 337.8125,331.125 C 355.35693,320.79312 378.48197,327.96333 388.59375,345.40625 C 400.12938,365.30532 391.95954,391.34472 372.1875,402.65625 C 349.89429,415.41014 320.87042,406.26893 308.34375,384.125 C 294.35738,359.40068 304.53835,327.31914 329.09375,313.5625 C 356.28387,298.32981 391.43663,309.52752 406.4375,336.53125 C 422.9299,366.21995 410.67411,404.5224 381.1875,420.78125 C 348.96915,438.54637 307.53004,425.22079 290,393.21875 C 270.9496,358.44122 285.32675,313.78271 319.875,294.96875 C 357.23986,274.62094 405.10859,290.1263 425.21875,327.25 C 446.87571,367.22913 430.28949,418.36305 390.5625,439.78125 C 347.94334,462.75872 293.51894,445.04439 270.78125,402.6875 C 246.47227,357.40353 265.30025,299.63075 310.3125,275.5625 C 358.2851,249.91134 419.40299,269.90168 444.8125,317.59375 C 471.81617,368.27796 450.70791,432.77009 400.3125,459.53125 C 346.89454,487.89748 278.96664,465.6214 250.84375,412.5 C 221.10522,356.32683 244.53698,284.99439 300.40625,255.5 C 359.35536,224.37971 434.1871,248.98672 465.0625,307.625 C 497.57379,369.37016 471.77151,447.67185 410.34375,479.9375 C 345.78303,513.84876 263.97739,486.86207 230.3125,422.625 C 194.99252,355.22979 223.15312,269.85416 290.21875,234.78125 C 360.4669,198.04401 449.41677,227.43085 485.90625,297.34375 C 524.06908,370.46277 493.46585,462.99187 420.6875,500.90625 C 344.68015,540.50279 248.56618,508.6615 209.21875,433 C 168.18054,354.08727 201.21936,254.35094 279.78125,213.5625 C 361.61594,171.07486 465.01278,205.36465 507.25,286.84375 C 551.19467,371.61666 515.66272,478.68139 431.25,522.375 C 343.52302,567.78413 232.78244,530.98736 187.625,443.625 C 140.74412,352.92845 178.79735,238.47231 269.125,191.84375 C 362.80627,143.48399 480.95567,182.81674 529.0625,276.125 C 578.90812,372.80585 538.33509,494.7204 442.03125,544.3125 C 342.3363,595.65085 216.64673,553.78284 165.5625,454.46875 C 112.72468,351.74547 155.88005,222.30185 258.21875,169.71875 C 363.98435,115.37485 497.22392,159.81011 551.3125,265.1875 C 607.16896,374.00911 561.46113,511.0557 453.03125,566.65625 C 341.1402,624.0316 200.24389,576.99592 143.125,465.5 C 84.224461,350.52632 132.54976,205.79975 247.125,147.15625 C 365.19428,86.72438 513.79448,136.36364 573.96875,254.03125 C 635.93803,375.20886 584.96029,527.69515 464.1875,589.40625 C 339.88906,652.91885 183.53513,600.64057 120.28125,476.75 C 55.219463,349.31843 108.82303,189.02128 235.84375,124.21875 C 366.42056,57.602007 530.64306,112.5557 597,242.71875 C 665.17738,376.45271 608.87986,544.61421 475.5625,612.53125 C 338.6597,682.27487 166.54523,624.60844 97.0625,488.125 C 25.747164,348.0418 84.745123,171.99143 224.40625,100.9375 C 367.68119,28.045009 547.74444,88.399769 620.375,231.25 C 694.85,377.72789 633.14433,561.7562 487.09375,635.96875 C 337.40191,712.03153 149.33106,648.98076 73.53125,499.71875 C -4.1245088,346.80207 60.328135,154.70478 212.8125,77.3125 C 368.96473,-1.941369 565.07262,63.87627 644.0625,219.59375 C 724.91955,378.99207 657.74246,579.15746 498.78125,659.75 C 336.1264,742.21519 131.88771,673.6529 49.6875,511.4375 C -34.390796,345.51584 35.582582,137.21905 201.0625,53.40625 C 370.26109,-32.290003 582.63223,39.057878 668.0625,207.8125 C 723.04922,316.43044 717.12316,449.05807 653.3125,552.65625 L 661.8125,557.90625 C 727.47481,451.30189 733.59783,315.08169 677,203.28125 C 613.79878,78.436775 483.21675,5.4283997 350.09375,7 z M 351.34375,358.65625 C 351.50159,358.63274 351.80748,358.76042 352.78125,359.25 C 353.37296,359.54749 353.91037,360.72592 353.90625,360.84375 C 353.90213,360.96158 354.0776,360.5356 353.90625,360.71875 C 354.27122,360.32863 354.5114,360.26747 355.28125,360.375 C 355.60482,360.42019 355.89506,360.73255 356.25,360.90625 L 348.375,364.78125 C 347.99936,364.01656 347.87218,361.81108 348.75,360.53125 C 349.62782,359.25142 350.4436,359.04331 350.8125,358.9375 C 351.1814,358.83169 351.18591,358.67976 351.34375,358.65625 z"/>
</svg>
</div>
</div>html,body{position:relative;height:100%;/*fallback*/height:100vh;background:#222;color:#eee;text-align:center;overflow:hidden}div#dontedit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%}div#dontedit>*{margin:0 auto}
/* ---- ALL CUSTOM CSS BELOW, DO NOT EDIT ABOVE ---- */
$behind-the-scenes: false;
$fancy: true;
$diameter: 90vh; /*if this isnt supported for you, just use px*/
$duration: 15s;
.shape{
position: relative;
width: $diameter;
height: $diameter;
border-radius: 50%;
@if $fancy{
box-shadow: 0 40px 10px rgba(0,0,0,.1);
animation: grow $duration .1s ease-in-out infinite, lean ($duration * 2) ease-in-out infinite;
}@else{animation: grow $duration .1s ease-in-out infinite;}
@if $behind-the-scenes{
overflow: visible;
border: 2px solid #fff;
}@else{overflow: hidden;}
}
svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: $diameter;
height: $diameter;
@if $behind-the-scenes{
animation: fade $duration linear;
}
}
.spiral{
margin: 0 0 ($diameter * 0.01) ($diameter * 0.01);
fill: url(#rainbow);
}
@-webkit-keyframes grow{
0%,100%{
width: 0;
height: 0;
}
50%{
width: $diameter;
height: $diameter;
}
}
@-webkit-keyframes fade{
0%,100%{
opacity: 1;
}
40%,60%{
opacity: .1;
}
}
@-webkit-keyframes lean{
0%,100%{
transform-origin: center top;
transform: rotateX(0deg);
}
50%{
transform-origin: center bottom;
transform: rotateX(80deg);
}
}
External CSS
This Pen doesn't use any external CSS resources.