SOURCE

function Note(demo, chapter, descriptions) {
    this.demo = demo

    this.loadCss = function () {
        let head = document.querySelector('head');
        let link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet')
        // link.setAttribute('href', '//oss.syndev.top/learn/CSS3_art_example/common/note.css')
        head.appendChild(link);
    }
    this.loadData = function () {
        let head = document.querySelector('head')
        let script = document.createElement('script');
        script.setAttribute('src', '//oss.syndev.top/learn/CSS3_art_example/common/note-data.js')
        head.appendChild(script);
    }
    this.injectHtml = function () {
        let item = data.filter((item) => item[0] == this.demo)[0]
        let demo = item[0]
        let chapter = item[1]
        let descriptions = item[2].reduce((acc, cur) => {
            return acc + '<p>' + cur + '</p>'
        }, '')
        let template = `
            <div class="meta">
                <h2>例${demo}</h2>
                <p class="chapter">
                    所在章节
                    <span class="number">${chapter}</span>
                </p>
            </div>
            <div class="description">
                <p>${descriptions}</p>
            </div>
        `
        let footer = document.createElement('footer');
        footer.className = 'note'
        footer.innerHTML = template
        document.querySelector('body').appendChild(footer);
    }
    this.render = function () {
        this.loadCss();
        this.loadData();
        let me = this;
        window.addEventListener('load', function () {
            me.injectHtml();
        })
    }
}
new Note('12-3').render()

   <figure class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </figure>

body{
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
}
.container{
    font-size: 12px;
    width: 30em;
    height: 30em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /*  */
    /* border: 1px dashed green; */
}
.container div{
    position: absolute;
    --diameter:calc(15% + (var(--n) - 1) * 10%);
    width: var(--diameter);
    height: var(--diameter);
    color: lime;
    border-width: 1em;
    border-style: solid solid none none;
    border-color: currentColor transparent transparent transparent;
    border-radius: 50%;
    animation: linear infinite;
    animation-name: rotating, change-color;
    animation-duration: calc(5s / (9 - var(--n) + 1)),5s;
    /*  */
   /* outline:1px dashed green; */
}
@keyframes rotating{
    to{
        transform: rotate(1turn);
    }
}
@keyframes change-color{
    to{
        filter: hue-rotate(1turn);
    }
}
.container div:nth-child(1) {--n: 1;}
.container div:nth-child(2) {--n: 2;}
.container div:nth-child(3) {--n: 3;}
.container div:nth-child(4) {--n: 4;}
.container div:nth-child(5) {--n: 5;}
.container div:nth-child(6) {--n: 6;}
.container div:nth-child(7) {--n: 7;}
.container div:nth-child(8) {--n: 8;}
.container div:nth-child(9) {--n: 9;}