:doodle { @grid: 13x1 / 100%; @shape: circle; } @place-cell: center; @size: 60%; border-radius: 100% 0%; border: 1px solid var(--stroke, #fff); transform-origin: 100% 0; transform: translate(-50%, 50%) rotate( calc(360 / 13 * @row() * 1deg) ); :doodle { @grid: 14x1 / 100%; @shape: circle; } @place-cell: center; @size: 32% 1px; border-bottom: 1px solid var(--stroke, #fff); transform-origin: 0 center; transform: translate(50%, 0) rotate(calc(360 / 14 * @row() * 1deg)); :after { content: ''; position: absolute; right: -80%; width: 80%; border-bottom: 1px solid var(--stroke, #fff); transform-origin: 0 100%; transform: rotate(-51.4285deg); } :before { content: ''; position: absolute; right: -80%; width: 80%; border-bottom: 1px solid var(--stroke, #fff); transform-origin: 0 100%; transform: rotate(51.4285deg); } :doodle { @grid: 14x1 / 100%; } @place-cell: center; @size: 35%; @odd { @size: 30%; } border-radius: 100% 0%; border: 1px solid var(--stroke, #fff); transform-origin: 100% 0; transform: translate(-50%, 50%) rotate( calc(360 / 14 * @row() * 1deg) ); :doodle { @grid: 14x3 / 100%; @shape: circle; } @place-cell: center; @size: 35% 1px; @col(2) { @size: 23% 1px; } @col(3) { @size: 13% 1px; } border-bottom: 1px solid var(--stroke, #fff); transform-origin: 0 center; transform: translate(50%, 0) rotate(calc(360 / 14 * @row() * 1deg)); :after { content: ''; position: absolute; right: -61.8%; width: 61.8%; height: 1px; border-bottom: 1px solid var(--stroke, #fff); transform-origin: 0 100%; transform: rotate(30deg); } :before { content: ''; position: absolute; right: -61.8%; width: 61.8%; height: 1px; border-bottom: 1px solid var(--stroke, #fff); transform-origin: 0 100%; transform: rotate(-30deg); } :doodle { @grid: 20x1 / 100%; } @place-cell: center; @size: 35%; @odd { @size: 30%; } border-radius: 100% 0%; border: 1px solid transparent; border-left-color: var(--stroke, #fff); border-top-color: var(--stroke, #fff); transform-origin: 100% 0; transform: translate(-50%, 50%) rotate( calc(360 / 20 * @row() * 1deg) ); :doodle { @grid: 13x1 / 100%; } @place-cell: center; @size: 40%; border-radius: 50%; border: 1px solid var(--stroke, #fff); border-left-color: transparent; border-right-color: transparent; transform-origin: 100% 0%; transform: translate(-50%, 50%) rotate( calc(360 / 13 * @row() * 1deg) ); :doodle { @grid: 10 / 100%; } @place-cell: center; @size: 50% 1px; transform-origin: 0 center; transform: translateX(50%) rotate(calc(@col() * 10deg + 36deg * @row())); :after { content: ''; position: absolute; left: calc(8% * (@col() - 1)); top: 0; bottom: 0; width: calc(3% * @col()); border-top: 1px solid var(--stroke, #fff); } :doodle { @grid: 6x5 / 100%; } @place-cell: center; @size: 50% 1px; transform-origin: 0 center; transform: translateX(50%) rotate( calc(12deg * (@col() + @index())) ); :after { content: ''; position: absolute; top: 0; left: calc(@col() * 12%); @size: calc(1vmin * @col()); border-radius: 0% 100%; border: 1px solid var(--stroke, #fff); transform: rotate(72deg); } :doodle { @grid: 13x1 / 100%; } @place-cell: center; @size: 50%; border-radius: 100% 450%; border: 1px solid var(--stroke, #fff); border-left-color: transparent; border-bottom-color: transparent; transform-origin: 100% 0; transform: translate(-50%, 50%) rotate( calc(360 / 13 * @row() * 1deg) ); :doodle { @grid: 4x2 / 100%; } @place-cell: center; @size: 70%; @col(2) { @size: 18%; } border: 1px solid var(--stroke, #fff); border-radius: 20% 80%; transform: rotate( calc(@index() * 360deg / 16) ); :doodle { @grid: 13x4 / 100%; } @place-cell: center; @size: calc(10% * @col()) 1px; transform-origin: 100% 0%; transform: translate(-50%, 50%) rotate( calc(13deg * @col() + 360 / 13 * @row() * 1deg) ); :after { content: ''; position: absolute; right: 80%; @size: calc(.5vmin + @col() * .8vmin); transform: rotate(-45deg); border-radius: 50%; border: 1px solid transparent; border-left-color: var(--stroke, #fff); border-top-color: var(--stroke, #fff); } :doodle { @grid: 7x4 / 100%; transform: scale(.8); } @place-cell: center; @size: calc(10% * @col()) 1px; transform-origin: 100% 0%; transform: translate(-50%, 50%) rotate( calc(13deg * @col() + 360 / 7 * @row() * 1deg) ); :after { content: ''; position: absolute; right: 100%; @size: calc(.5vmin + @col() * 2vmin); transform: rotate(-45deg); border-radius: 100% 0; border: 1px solid transparent; border-right-color: var(--stroke, #fff); border-bottom-color: var(--stroke, #fff); }

Build with css-doodle