Creating an Animated Douyin (TikTok) Logo Using a Single HTML Tag

This tutorial shows how to build the Douyin (TikTok) logo entirely with CSS while using only one HTML tag. It starts by analysing the logo’s structure, which consists of four geometric parts: a quarter‑ring, a half‑circle, a long rectangle, and a slightly larger quarter‑ring.

Douyin Logo Structure

The logo is a combination of two overlapping notes, each built from the four parts mentioned above. Understanding the dimensions (the red note’s width‑to‑height ratio is approximately 0.87) is essential for positioning the shapes correctly.

Design Approach

The goal is to render the entire logo with a single <div class="douyin"/> element. Two pseudo‑elements ( ::before and ::after ) are used to represent the two notes, while CSS gradients draw the individual shapes.

Quarter‑Ring

A quarter‑ring is created with a radial‑gradient . The gradient is positioned at the bottom‑right corner and limited to a 0‑50% radius to make the inner part transparent.

<style>
  .demo {
    background:
      radial-gradient(
        100% 100% at 100% 100%,
        transparent 0 50%,
        red 50% 100%,
        transparent
      );
  }
</style>
<div class="demo"/>

Half‑Circle

The half‑circle uses another radial‑gradient positioned at the top, with appropriate color‑stops to create the curved shape.

.douyin::before, .douyin::after {
  background:
    radial-gradient(
      100% 100% at 100% 100%,
      transparent 0 50%,
      #08fff9 50% 100%,
      transparent
    ) left 52%/41% 36% no-repeat,
    radial-gradient(
      50% 100% at top,
      transparent 44%,
      #08fff9 45% 98%,
      transparent
    ) 0 100%/73% 31% no-repeat;
}

Long Rectangle

The rectangle is drawn with a linear‑gradient that fills the area and is then scaled to the desired size.

.douyin::before, .douyin::after {
  background:
    ...,
    linear-gradient(#08fff9, #08fff9) 66% 0/20% 70% no-repeat;
}

Larger Quarter‑Ring

A second quarter‑ring with a slightly larger radius is added using another radial‑gradient and positioned on the right side.

.douyin::before, .douyin::after {
  ...,
  radial-gradient(
    100% 100% at 100% 0,
    transparent 0 58%,
    #08fff9 58.5% 99%,
    transparent
  ) 100% 0/47% 41.8% no-repeat;
}

Splitting Elements

To avoid duplication, CSS variables replace the hard‑coded color #08fff9 . Separate ::before and ::after rules assign different colors and a small translation to offset the notes.

.douyin::before { --color: #08fff9; }
.douyin::after { --color: #f00044; transform: translate(3%, 3%); }

Blend Mode

The overlapping notes are blended using mix‑blend‑mode: lighten (other modes such as screen or plus‑lighter also work).

.douyin::before, .douyin::after {
  mix-blend-mode: lighten;
}

Adding Animation

Hovering the logo triggers a subtle movement of both notes. Custom CSS variables control the offset, and a cubic‑bezier transition smooths the motion.

.douyin::before {
  --color: #08fff9;
  transform: translate(calc(var(--x, 0%) - 3%), calc(var(--x, 0%) - 3%));
}
.douyin::after {
  --color: #f00044;
  transform: translate(calc(3% - var(--x, 0%)), calc(3% - var(--x, 0%)));
}
.douyin:hover::before,
.douyin:hover::after {
  --x: 0.1%;
  transition: transform cubic-bezier(.5,300,.5,-150) .3s;
}

Final Result

Combining all the gradients, variables, blend modes, and hover animation produces a faithful, animated Douyin logo that is rendered with a single HTML element and pure CSS. The full source code is available on GitHub for further experimentation.