Sigil Morph

How it works

Sigil Morph is an animated outline & stroke text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Sigil Morph exposes 6 dedicated controls — Badge Hue, Morph Speed, Silhouette Set, Spikiness, Badge Padding and Badge Style — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Sigil Morph — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Bungee', cursive (load from Google Fonts).
 */

.text-effect {
  font-family: 'Bungee', cursive;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0.62em 0.87em;
  color: hsl(230 18% 12%);
  text-shadow: 0 0 0.05em hsl(230 60% 58%), 0 0 0.05em hsl(230 60% 58%);
}
.text-effect::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsl(230 60% 58%);
  clip-path: polygon(50% 17%, 63.39% 17.66%, 81.61% 18.39%, 86.03% 35.08%, 86.5% 50%, 76.79% 61.1%, 66.26% 66.26%, 60.33% 74.94%, 50% 92.1%, 39.67% 74.94%, 33.74% 66.26%, 23.21% 61.1%, 13.5% 50%, 13.97% 35.08%, 18.39% 18.39%, 36.61% 17.66%);
}
@supports (clip-path: shape(from 0 0, close)) {
  .text-effect::before {
    animation: text-effect-morph 10.5s ease-in-out infinite;
  }
}

@keyframes text-effect-morph {
  0% { clip-path: shape(from 50% 17%, curve to 63.39% 17.66% with 55.36% 17% / 57.07% 17.39%, curve to 81.61% 18.39% with 69.72% 17.94% / 80.66% 17.67%, curve to 86.03% 35.08% with 82.55% 19.12% / 85.22% 29.81%, curve to 86.5% 50% with 86.85% 40.34% / 88.19% 45.23%, curve to 76.79% 61.1% with 84.81% 54.77% / 80.17% 58.39%, curve to 66.26% 66.26% with 73.42% 63.81% / 68.73% 64.19%, curve to 60.33% 74.94% with 63.79% 68.34% / 62.77% 71.07%, curve to 50% 92.1% with 57.89% 78.82% / 50.28% 92.1%, curve to 39.67% 74.94% with 49.72% 92.1% / 42.11% 78.82%, curve to 33.74% 66.26% with 37.23% 71.07% / 36.21% 68.34%, curve to 23.21% 61.1% with 31.27% 64.19% / 26.58% 63.81%, curve to 13.5% 50% with 19.83% 58.39% / 15.19% 54.77%, curve to 13.97% 35.08% with 11.81% 45.23% / 13.15% 40.34%, curve to 18.39% 18.39% with 14.78% 29.81% / 17.45% 19.12%, curve to 36.61% 17.66% with 19.34% 17.67% / 30.28% 17.94%, curve to 50% 17% with 42.93% 17.39% / 44.64% 17%, close); }
  33% { clip-path: shape(from 50% 3.6%, curve to 58.23% 30.14% with 50.16% 3.6% / 54.95% 28.78%, curve to 82.81% 17.19% with 61.51% 31.5% / 82.69% 17.07%, curve to 69.86% 41.77% with 82.93% 17.31% / 68.5% 38.49%, curve to 96.4% 50% with 71.22% 45.05% / 96.4% 49.84%, curve to 69.86% 58.23% with 96.4% 50.16% / 71.22% 54.95%, curve to 82.81% 82.81% with 68.5% 61.51% / 82.93% 82.69%, curve to 58.23% 69.86% with 82.69% 82.93% / 61.51% 68.5%, curve to 50% 96.4% with 54.95% 71.22% / 50.16% 96.4%, curve to 41.77% 69.86% with 49.84% 96.4% / 45.05% 71.22%, curve to 17.19% 82.81% with 38.49% 68.5% / 17.31% 82.93%, curve to 30.14% 58.23% with 17.07% 82.69% / 31.5% 61.51%, curve to 3.6% 50% with 28.78% 54.95% / 3.6% 50.16%, curve to 30.14% 41.77% with 3.6% 49.84% / 28.78% 45.05%, curve to 17.19% 17.19% with 31.5% 38.49% / 17.07% 17.31%, curve to 41.77% 30.14% with 17.31% 17.07% / 38.49% 31.5%, curve to 50% 3.6% with 45.05% 28.78% / 49.84% 3.6%, close); }
  66% { clip-path: shape(from 50% 7.48%, curve to 59.59% 26.85% with 56.26% 11.4% / 54.95% 23.55%, curve to 74.88% 25.12% with 64.23% 30.14% / 71.79% 23.36%, curve to 79.06% 37.96% with 77.96% 26.88% / 77.3% 32.62%, curve to 83.06% 50% with 80.82% 43.31% / 81.99% 44.1%, curve to 83.77% 63.99% with 84.13% 55.9% / 86.07% 60.78%, curve to 69.26% 69.26% with 81.47% 67.2% / 73.53% 66.51%, curve to 61.69% 78.22% with 64.99% 72.01% / 64.58% 75.89%, curve to 50% 84.8% with 58.8% 80.56% / 54.16% 83.04%, curve to 33.35% 90.21% with 45.84% 86.56% / 38.17% 91.25%, curve to 21.37% 78.63% with 28.53% 89.17% / 22.66% 82.98%, curve to 24.57% 60.53% with 20.08% 74.28% / 28.08% 67.07%, curve to 6% 50% with 21.07% 53.99% / 8.36% 55.15%, curve to 12.69% 34.55% with 3.64% 44.85% / 8.95% 38.72%, curve to 26.79% 26.79% with 16.44% 30.37% / 21.86% 32.41%, curve to 33.69% 10.62% with 31.73% 21.17% / 29.32% 14.26%, curve to 50% 7.48% with 38.06% 6.99% / 43.74% 3.56%, close); }
  100% { clip-path: shape(from 50% 17%, curve to 63.39% 17.66% with 55.36% 17% / 57.07% 17.39%, curve to 81.61% 18.39% with 69.72% 17.94% / 80.66% 17.67%, curve to 86.03% 35.08% with 82.55% 19.12% / 85.22% 29.81%, curve to 86.5% 50% with 86.85% 40.34% / 88.19% 45.23%, curve to 76.79% 61.1% with 84.81% 54.77% / 80.17% 58.39%, curve to 66.26% 66.26% with 73.42% 63.81% / 68.73% 64.19%, curve to 60.33% 74.94% with 63.79% 68.34% / 62.77% 71.07%, curve to 50% 92.1% with 57.89% 78.82% / 50.28% 92.1%, curve to 39.67% 74.94% with 49.72% 92.1% / 42.11% 78.82%, curve to 33.74% 66.26% with 37.23% 71.07% / 36.21% 68.34%, curve to 23.21% 61.1% with 31.27% 64.19% / 26.58% 63.81%, curve to 13.5% 50% with 19.83% 58.39% / 15.19% 54.77%, curve to 13.97% 35.08% with 11.81% 45.23% / 13.15% 40.34%, curve to 18.39% 18.39% with 14.78% 29.81% / 17.45% 19.12%, curve to 36.61% 17.66% with 19.34% 17.67% / 30.28% 17.94%, curve to 50% 17% with 42.93% 17.39% / 44.64% 17%, close); }
}

Related Outline & Stroke effects

• Double Outline
• Filled Outline
• Gradient Stroke
• Outline
• Glow Outline