artwork: spirals created with code produced via coding AI
models: OpenAI o4-mini / Claude 3.5 Sonnet
A) OpenAI o4-mini
When I want „a spinning spiral of black and white stripes“ as code to finally put in an HTML area on a WordPress site, what is the easiest way to go?
<div class="spiral-spinner"></div>
<style>
.spiral-spinner {
width: 200px; /* change size as needed */
height: 200px;
border-radius: 50%;
background: conic-gradient(
black 0% 12.5%,
white 12.5% 25%,
black 25% 37.5%,
white 37.5% 50%,
black 50% 62.5%,
white 62.5% 75%,
black 75% 87.5%,
white 87.5% 100%
);
animation: spin 4s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>B) Claude 3.5 Sonnet
When I want „a spinning spiral of black and white stripes“ as code to finally put in an HTML area on a WordPress site, what is the easiest way to go?
<div class="spiral"></div>
<style>
.spiral {
width: 200px;
height: 200px;
background: repeating-conic-gradient(
from 0deg,
black 0deg 10deg,
white 10deg 20deg
);
border-radius: 50%;
animation: spin 4s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>C.1) Claude 3.5 Sonnet
Is it possible to create a spiral with lines (not segments), the should look like a twist in the deepness?
<div class="spiral-container">
<div class="spiral-3d"></div>
</div>
<style>
.spiral-container {
width: 300px;
height: 300px;
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
}
.spiral-3d {
width: 300px;
height: 300px;
background: repeating-conic-gradient(
from 0deg,
rgba(0, 0, 0, 0.8) 0deg 15deg,
rgba(255, 255, 255, 0.8) 15deg 30deg
);
border-radius: 50%;
animation: spin3d 8s linear infinite;
transform-style: preserve-3d;
box-shadow: 0 0 50px rgba(0,0,0,0.3);
}
@keyframes spin3d {
from {
transform: rotateX(60deg) rotateZ(0deg);
}
to {
transform: rotateX(60deg) rotateZ(360deg);
}
}
</style>Key features:
- Uses
perspectivefor 3D effect rotateX(60deg)tilts the spiral to create depthrgbacolors with transparency add to the depth effectbox-shadowenhances the 3D appearance
You can customize:
The size (300px)
The perspective (800px) – higher numbers reduce the 3D effect
The tilt angle (60deg)
The stripe width (15deg)
The colors and their opacity
The animation speed (8s)
C.2) Claude 3.5 Sonnet
For an even more pronounced 3D effect, you could add:
<div class="spiral-container">
<div class="spiral-3d"></div>
</div>
<style>
.spiral-container {
width: 300px;
height: 300px;
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
}
.spiral-3d {
width: 300px;
height: 300px;
background: repeating-conic-gradient(
from 0deg,
rgba(0, 0, 0, 0.8) 0deg 15deg,
rgba(255, 255, 255, 0.8) 15deg 30deg
);
border-radius: 50%;
animation: spin3d 8s linear infinite;
transform-style: preserve-3d;
box-shadow: 0 0 50px rgba(0,0,0,0.3);
position: relative;
}
.spiral-3d::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
border-radius: 50%;
transform: translateZ(-10px);
filter: blur(5px);
opacity: 0.7;
}
@keyframes spin3d {
from {
transform: rotateX(60deg) rotateZ(0deg);
}
to {
transform: rotateX(60deg) rotateZ(360deg);
}
}
</style>This creates a subtle shadow layer behind the main spiral. Adjust the translateZ, blur, and opacity values to fine-tune the effect.
C.3) Adjustment
<div class="spiral-container">
<div class="spiral-3d"></div>
</div>
<style>
.spiral-container {
width: 300px;
height: 300px;
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
}
.spiral-3d {
width: 300px;
height: 300px;
background: repeating-conic-gradient(
from 0deg,
rgba(0, 0, 0, 0.8) 0deg 15deg,
rgba(255, 255, 255, 0.8) 15deg 30deg
);
border-radius: 50%;
animation: spin3d 8s linear infinite;
transform-style: preserve-3d;
box-shadow: 0 0 50px rgba(0,0,0,0.3);
position: relative;
}
.spiral-3d::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
border-radius: 50%;
transform: translateZ(-50px);
filter: blur(15px);
opacity: 0.5;
}
@keyframes spin3d {
from {
transform: rotateX(60deg) rotateZ(0deg);
}
to {
transform: rotateX(60deg) rotateZ(360deg);
}
}
</style>D) Claude 3.5 Sonnet
Last code had a better result in visual quality, but is there a chance to create lines comparable to the picture?
To create a more lollipop-like spiral with multiple colors and that glossy look from the image, here’s a modified version:
<div class="lollipop-container">
<div class="lollipop">
<div class="candy"></div>
<div class="stick"></div>
</div>
</div>
<style>
.lollipop-container {
width: 300px;
height: 400px;
perspective: 1000px;
}
.lollipop {
position: relative;
transform-style: preserve-3d;
}
.candy {
width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-conic-gradient(
from 0deg,
#ff0000 0deg 30deg,
#ffffff 30deg 60deg,
#00ff00 60deg 90deg,
#ffff00 90deg 120deg,
#0000ff 120deg 150deg,
#ffffff 150deg 180deg
);
position: relative;
animation: spin 8s linear infinite;
box-shadow:
inset -10px -10px 30px rgba(0,0,0,0.5),
5px 5px 30px rgba(255,255,255,0.2);
}
.candy::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0) 50%,
rgba(0,0,0,0.2) 100%);
border-radius: 50%;
}
.stick {
width: 20px;
height: 150px;
background: white;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 280px;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
@keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
</style>.
E) Claude 3.5 Sonnet
I implemented all 3 codes corncerning the 3D version – it seems that my adjustments influence all visualizations – all look like:
transform: translateZ(-50px);
filter: blur(15px);
opacity: 0.5;
<!-- First Spiral -->
<div class="spiral-container-v1">
<div class="spiral-3d-v1"></div>
</div>
<!-- Second Spiral -->
<div class="spiral-container-v2">
<div class="spiral-3d-v2"></div>
</div>
<!-- Third Spiral -->
<div class="spiral-container-v3">
<div class="spiral-3d-v3"></div>
</div>
<style>
/* Version 1 - Basic 3D */
.spiral-container-v1 {
width: 300px;
height: 300px;
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.spiral-3d-v1 {
width: 300px;
height: 300px;
background: repeating-conic-gradient(
from 0deg,
rgba(0, 0, 0, 0.8) 0deg 15deg,
rgba(255, 255, 255, 0.8) 15deg 30deg
);
border-radius: 50%;
animation: spin3d-v1 8s linear infinite;
transform-style: preserve-3d;
}
@keyframes spin3d-v1 {
from { transform: rotateX(60deg) rotateZ(0deg); }
to { transform: rotateX(60deg) rotateZ(360deg); }
}
/* Version 2 - Medium effect */
.spiral-container-v2 {
width: 300px;
height: 300px;
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.spiral-3d-v2 {
width: 300px;
height: 300px;
background: repeating-conic-gradient(
from 0deg,
rgba(0, 0, 0, 0.8) 0deg 15deg,
rgba(255, 255, 255, 0.8) 15deg 30deg
);
border-radius: 50%;
animation: spin3d-v2 8s linear infinite;
transform-style: preserve-3d;
box-shadow: 0 0 50px rgba(0,0,0,0.3);
}
@keyframes spin3d-v2 {
from { transform: rotateX(60deg) rotateZ(0deg); }
to { transform: rotateX(60deg) rotateZ(360deg); }
}
/* Version 3 - Strong effect */
.spiral-container-v3 {
width: 300px;
height: 300px;
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.spiral-3d-v3 {
width: 300px;
height: 300px;
background: repeating-conic-gradient(
from 0deg,
rgba(0, 0, 0, 0.8) 0deg 15deg,
rgba(255, 255, 255, 0.8) 15deg 30deg
);
border-radius: 50%;
animation: spin3d-v3 8s linear infinite;
transform-style: preserve-3d;
box-shadow: 0 0 50px rgba(0,0,0,0.3);
position: relative;
}
.spiral-3d-v3::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
border-radius: 50%;
transform: translateZ(-20px);
filter: blur(15px);
opacity: 0.4;
}
@keyframes spin3d-v3 {
from { transform: rotateX(60deg) rotateZ(0deg); }
to { transform: rotateX(60deg) rotateZ(360deg); }
}
</style>Now each version has unique class names (-v1, -v2, -v3) and their own animation definitions. This should prevent them from interfering with each other, allowing you to:
Have different settings for each spiral
Adjust individual properties without affecting the others
Compare different effects side by side
You can now modify each version independently by targeting their specific class names.
.