<script src="https://cdn.tailwindcss.com"></script>
<main class="py-40 px-4 font-mono">
<div
class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-gray-200 border lg:grid lg:grid-cols-2 lg:gap-px lg:divide-y-0"
>
<div
class="rounded-tl-lg rounded-tr-lg lg:rounded-tr-none relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
>
<div>
<div
class="flex flex-col mx-auto items-center p-6 space-y-10 dasharray-custom"
>
<div class="w-full pt-3 pb-6 relative">
<div
class="absolute rounded-lg border-4 border-blue-500 w-1/3 h-full top-0 waku"
></div>
<div class="flex justify-between relative -mx-[13px]">
<span class="w-10 text-center">-100</span>
<span class="w-10 text-center">-50</span>
<span class="w-10 text-center">0</span>
<span class="w-10 text-center">50</span>
<span class="w-10 text-center">100</span>
<span class="w-10 text-center">150</span>
<span class="w-10 text-center">200</span>
</div>
<svg viewBox="0 0 300 3" class="bg-slate-200">
<line
x1="0"
y1="1"
x2="300"
y2="1"
stroke-width="3"
class="dasharray-view-custom"
/>
</svg>
</div>
<div class="w-1/3 flex flex-col items-center space-y-10">
<div class="w-full">
<svg viewBox="0 0 100 3" class="bg-slate-200">
<line x1="0" y1="1" x2="100" y2="1" stroke-width="3" />
</svg>
</div>
<div class="relative circle aspect-square">
<svg class="circle-back" viewBox="0 0 34 34">
<circle cx="17" cy="17" r="16" />
</svg>
<svg class="-rotate-90" viewBox="0 0 34 34">
<circle cx="17" cy="17" r="16" />
</svg>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-lg font-medium">
<a href="#" class="focus:outline-none"> Adjustment with Tweakpane. Stroke-dashoffset has other effects </a>
</h3>
<p class="mt-2 text-sm text-gray-500">
<pre class="overflow-x-auto p-4 text-xs text-white bg-zinc-900 rounded-2xl">
<code>
.line {
stroke-dasharray: N N;
stroke-dashoffset: N;
}</code>
</pre>
</p>
</div>
</div>
<div
class="lg:rounded-tr-lg relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
>
<div>
<div
class="flex flex-col mx-auto items-center p-6 space-y-10 dasharray-50-50"
>
<div class="w-full pt-3 pb-6 relative">
<div
class="absolute rounded-lg border-4 border-blue-500 w-1/3 h-full top-0 waku"
></div>
<div class="flex justify-between relative -mx-[13px]">
<span class="w-10 text-center">-100</span>
<span class="w-10 text-center">-50</span>
<span class="w-10 text-center">0</span>
<span class="w-10 text-center">50</span>
<span class="w-10 text-center">100</span>
<span class="w-10 text-center">150</span>
<span class="w-10 text-center">200</span>
</div>
<svg viewBox="0 0 300 3" class="bg-slate-200">
<line
x1="0"
y1="1"
x2="300"
y2="1"
stroke-width="3"
class="dasharray-view"
/>
</svg>
</div>
<div class="w-1/3 flex flex-col items-center space-y-10">
<div class="w-full">
<svg viewBox="0 0 100 3" class="bg-slate-200">
<line x1="0" y1="1" x2="100" y2="1" stroke-width="3" />
</svg>
</div>
<div class="relative circle aspect-square">
<svg class="circle-back" viewBox="0 0 34 34">
<circle cx="17" cy="17" r="16" />
</svg>
<svg class="-rotate-90" viewBox="0 0 34 34">
<circle cx="17" cy="17" r="16" />
</svg>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-lg font-medium">
<a href="#" class="focus:outline-none"> Adjustment with Tweakpane for stroke-dashoffset only </a>
</h3>
<p class="mt-2 text-sm text-gray-500">
<pre class="overflow-x-auto p-4 text-xs text-white bg-zinc-900 rounded-2xl">
<code>
.line {
stroke-dasharray: 50 50;
stroke-dashoffset: N;
}</code>
</pre>
</p>
</div>
</div>
<div
class="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
>
<div>
<div
class="flex flex-col mx-auto items-center p-6 space-y-10 dasharray-15-5"
>
<div class="w-full pt-3 pb-6 relative">
<div
class="absolute rounded-lg border-4 border-blue-500 w-1/3 h-full top-0 waku"
></div>
<div class="flex justify-between relative -mx-[13px]">
<span class="w-10 text-center">-100</span>
<span class="w-10 text-center">-50</span>
<span class="w-10 text-center">0</span>
<span class="w-10 text-center">50</span>
<span class="w-10 text-center">100</span>
<span class="w-10 text-center">150</span>
<span class="w-10 text-center">200</span>
</div>
<svg viewBox="0 0 300 3" class="bg-slate-200">
<line
x1="0"
y1="1"
x2="300"
y2="1"
stroke-width="3"
class="dasharray-view"
/>
</svg>
</div>
<div class="w-1/3 flex flex-col items-center space-y-10">
<div class="w-full">
<svg viewBox="0 0 100 3" class="bg-slate-200">
<line x1="0" y1="1" x2="100" y2="1" stroke-width="3" />
</svg>
</div>
<div class="relative circle aspect-square">
<svg class="circle-back" viewBox="0 0 34 34">
<circle cx="17" cy="17" r="16" />
</svg>
<svg class="-rotate-90" viewBox="0 0 34 34">
<circle cx="17" cy="17" r="16" />
</svg>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-lg font-medium">
<a href="#" class="focus:outline-none"> Adjustment with Tweakpane for stroke-dashoffset only </a>
</h3>
<p class="mt-2 text-sm text-gray-500">
<pre class="overflow-x-auto p-4 text-xs text-white bg-zinc-900 rounded-2xl">
<code>
.line {
stroke-dasharray: 15 5;
stroke-dashoffset: N;
}</code>
</pre>
</p>
</div>
</div>
<div
class="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
>
<div>
<div
class="flex flex-col mx-auto items-center p-6 space-y-10 dasharray-100-100"
>
<div class="w-full pt-3 pb-6 relative">
<div
class="absolute rounded-lg border-4 border-blue-500 w-1/3 h-full top-0 waku"
></div>
<div class="flex justify-between relative -mx-[13px]">
<span class="w-10 text-center">-100</span>
<span class="w-10 text-center">-50</span>
<span class="w-10 text-center">0</span>
<span class="w-10 text-center">50</span>
<span class="w-10 text-center">100</span>
<span class="w-10 text-center">150</span>
<span class="w-10 text-center">200</span>
</div>
<svg viewBox="0 0 300 3" class="bg-slate-200">
<line
x1="0"
y1="1"
x2="300"
y2="1"
stroke-width="3"
class="dasharray-view"
/>
</svg>
</div>
<div class="w-1/3 flex flex-col items-center space-y-10">
<div class="w-full">
<svg viewBox="0 0 100 3" class="bg-slate-200">
<line x1="0" y1="1" x2="100" y2="1" stroke-width="3" />
</svg>
</div>
<div class="relative circle aspect-square">
<svg class="circle-back" viewBox="0 0 34 34">
<circle cx="17" cy="17" r="16" />
</svg>
<svg class="-rotate-90" viewBox="0 0 34 34">
<circle cx="17" cy="17" r="16" />
</svg>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-lg font-medium">
<a href="#" class="focus:outline-none"> Adjustment with Tweakpane for stroke-dashoffset only </a>
</h3>
<p class="mt-2 text-sm text-gray-500">
<pre class="overflow-x-auto p-4 text-xs text-white bg-zinc-900 rounded-2xl">
<code>
.line {
stroke-dasharray: 100 100;
stroke-dashoffset: N;
}</code>
</pre>
</p>
</div>
</div>
</div>
</main>
<style>
:root {
--dashoffset: 0;
--dashes: 0;
--gaps: 100;
}
* {
margin: 0;
padding: 0;
}
svg {
fill: none;
stroke: #333;
stroke-dashoffset: var(--dashoffset);
stroke-width: 2;
}
.circle {
width: calc(100% / 3.14);
}
.circle svg {
position: absolute;
}
svg.circle-back {
stroke: gainsboro;
stroke-dasharray: 100 0 !important;
}
/* tailwindじゃきつい */
.waku {
left: calc((var(--dashoffset) + 100) * 0.3333%);
}
.dasharray-view {
stroke-dashoffset: 100;
}
.dasharray-view-custom {
stroke-dashoffset: -100;
}
/* ここからはstrokeの指定 */
.dasharray-100-0 {
stroke-dasharray: 100 0;
}
.dasharray-50-50 {
stroke-dasharray: 50 50;
}
.dasharray-15-5 {
stroke-dasharray: 15 5;
}
.dasharray-100-100 {
stroke-dasharray: 100 100;
}
.dasharray-custom {
stroke-dasharray: var(--dashes) var(--gaps);
}
</style>
<script type="module">
import {Pane} from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js';
const pane = new Pane();
const root = document.querySelector(":root");
let isActive = true;
let dashoffset = 0;
let dashes = 0;
let gaps = 100;
pane
.addBinding(
{
dashoffset: dashoffset
},
"dashoffset",
{
min: -100,
max: 100
}
)
.on("change", (e) => {
root.style.setProperty("--dashoffset", e.value);
});
pane
.addBinding(
{
dashes: dashes
},
"dashes",
{
min: 0,
max: 100
}
)
.on("change", (e) => {
root.style.setProperty("--dashes", e.value);
});
pane
.addBinding(
{
gaps: gaps
},
"gaps",
{
min: 0,
max: 100
}
)
.on("change", (e) => {
root.style.setProperty("--gaps", e.value);
});
</script>