Edit in JSRUN

console 命令行工具 X clear

                    
>
console
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <defs>
    <clipPath id="world">
      <circle cx="500" cy="500" r="450" stroke="none" fill="none" />
    </clipPath>
  </defs>
  <g clip-path="url(#world)">
    <rect height="1000" width="1000" class="background"/>
    <g class="flame2">
      <path class="flame" d="M-1000,1000V388c86-2,111-38,187-38s108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38,110-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38c0,96,0,612,0,612Z"/>
      <path class="background flame-mask" d="M-1000,1000V388c86-2,111-38,187-38s108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38,110-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38c0,96,0,612,0,612Z"/>  
    </g>
    <g class="flame1">
      <path class="flame" d="M-1000,1000V388c86-2,111-38,187-38s108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38,110-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38c0,96,0,612,0,612Z"/>
      <path class="background flame-mask" d="M-1000,1000V388c86-2,111-38,187-38s108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38,110-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38c0,96,0,612,0,612Z"/>  
    </g>
    <g class="flame3">
      <path class="flame" d="M-1000,1000V388c86-2,111-38,187-38s108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38,110-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38c0,96,0,612,0,612Z"/>
      <path class="background flame-mask" d="M-1000,1000V388c86-2,111-38,187-38s108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38,110-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,108,38,187,38,111-38,187-38,109,38,188,38c0,96,0,612,0,612Z"/>  
    </g>
    <rect y="670" height="30" x="0" width="1000" class="background"/>
    <rect y="700" height="500" x="0" width="1000" class="bowl"/>
    </g>
    <circle cx="500" cy="500" r="450" class="frame" />
</svg>

<div class="title">Humanism</div>
$wave-length: 375px;
$angle:70deg;
$duration: 1s;

$background: hsl(220, 20%, 15%);
$flame: hsl(25, 100%, 70%);
$bowl: hsl(221, 30%, 50%);
$body: $background;
$title: hsl(25, 70%, 90%);

@keyframes flame {
  100% {
    transform: rotate($angle) translate(0, 0)
  }
}

@keyframes flame-mask {
  100% {
    transform: rotate(180deg - $angle) translate(0, 250px)
  }
}

.flame-mask {
  transform-origin: 500px 500px;
  transform: rotate(180deg - $angle) translate($wave-length, 250px);
  animation: flame-mask $duration linear infinite;
  animation-duration: $duration;
}
.hand{
  fill: $flame;
  stroke: $background;
  stroke-width: 10;
}
.flame {
  transform-origin: 500px 500px;
  transform: rotate($angle) translate($wave-length, 0);
  animation: flame $duration linear infinite;
  fill: $flame;
}

.flame2 {
  transform: translate(160px, 320px);
  .flame-mask,
  .flame {
    animation-delay: $duration * -0.3;
  }
}

.flame3 {
  transform: translate(-160px, 280px);
  .flame-mask,
  .flame {
    animation-delay: $duration * -0.8;
  }
}

.bowl {
  fill: $bowl
}

.background {
  fill: $background
}

.frame {
  fill: none;
  stroke: $background;
  stroke-width: 10;
}


/*Page Setup*/

@import url('https://fonts.googleapis.com/css?family=Unica+One');
svg {
  width: 100vw;
  height: 80vh;
}

body {
  background: $body;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.title {
  height: 10vh;
  line-height: 10vh;
  font-size: 8vh;
  padding: 2.5vh;
  margin: 0;
  color: $title;
  border-top: 1px solid;
  border-bottom: 1px solid;
  font-family: 'Unica One', cursive;
}