<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="G’day! I’ve produced a new patch to provide SMIL Animation for SVG. Since last time I’ve added: keySplines keyTimes accumulate restart min, max ElementTimeControl DOM interface"><title>SMIL Animation patch - Brian Birtles’ Blog</title><meta name="theme-color" content="#f5f5f4" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#1c1917" media="(prefers-color-scheme: dark)"><meta name="color-scheme" content="light dark"><meta name="rating" content="General"><link rel="canonical" href="https://birtles.blog/2005/11/05/smil-animation-patch/"><link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png"><link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="icon" type="image/svg+xml" sizes="256x256" href="/icon.svg"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="sitemap" href="/sitemap-index.xml"><meta property="og:url" content="https://birtles.blog/2005/11/05/smil-animation-patch/"><meta property="og:type" content="website"><meta property="og:title" content="SMIL Animation patch"><meta property="og:description" content="G’day! I’ve produced a new patch to provide SMIL Animation for SVG. Since last time I’ve added: keySplines keyTimes accumulate restart min, max ElementTimeControl DOM interface"><meta property="og:site_name" content="Brian Birtles’ Blog"><meta property="og:locale" content="en_US"><meta property="og:image" content="https://birtles.blog/2005/11/05/smil-animation-patch/social.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="article:author" content="Brian Birtles"><meta property="article:published_time" content="2005-11-05"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@brianskold"><meta name="twitter:creator" content="@brianskold"><meta name="twitter:dnt" content="on"><meta property="twitter:image" content="https://birtles.blog/2005/11/05/smil-animation-patch/social.png"><link rel="alternate" title="Brian Birtles’ Blog » Feed" href="/feed.xml" type="application/rss+xml"><link rel="stylesheet" href="/css/styles.lmPnBGjq.css"></head> <body class="flex h-full flex-col bg-stone-50 dark:bg-stone-900"> <div class="relative">  <div class="sm:px-8"> <div class="mx-auto max-w-4xl lg:px-8"> <div class="relative px-4 sm:px-8">  <header class="border-b border-stone-200 dark:border-stone-700 mt-4"> <div class="flex items-baseline mb-2 text-stone-500 dark:text-stone-400"> <span class="flex-grow"><a href="/" rel="prefetch" class="font-bold text-lg rounded-full py-1 px-4 -mx-4
        hover:text-stone-600 dark:hover:text-stone-300
        focus:outline-dotted focus:outline-2
        focus:outline-stone-500 dark:focus:outline-stone-400">Brian Birtles’ Blog</a> </span> <span><a href="/about/" rel="prefetch" class="font-medium rounded-full py-1 px-4 -mx-4
        hover:text-stone-600 dark:hover:text-stone-300
        focus:outline-dotted focus:outline-2
        focus:outline-stone-500 dark:focus:outline-stone-400">About</a> </span> </div> </header> <div class="mt-9 flex gap-8 items-center justify-between"> <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl text-stone-700 dark:text-stone-100">SMIL Animation patch</h1> <div class="shrink-0 hidden sm:block"> <svg viewBox="0 0 79 80.5" class="w-16 h-20 sm:w-20 sm:h-20 -rotate-12" role="presentation"> <defs> <filter id="sketchy"> <feTurbulence type="fractalNoise" baseFrequency="0.05" result="turbulence"></feTurbulence> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2.5" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> </filter> </defs> <g class="text-orange-600 dark:text-orange-400" filter="url(#sketchy)"> <path fill="currentColor" d="M61.88 73.69a67.85 67.85 0 0 1-1.71-5.32l-.36-1.22-.2-.86c.22-.04.43-.11.64-.2l.17-.09c.16-.07.3-.16.45-.24l.21-.15c.11-.1.23-.18.33-.28l.2-.21c.1-.1.18-.2.27-.32l.16-.23.2-.38c.05-.08.08-.16.11-.24.07-.15.11-.3.15-.47v-.22c.05-.24.07-.48.07-.73V60.5a3.85 3.85 0 0 0-3.83-3.85H58c0-.28-.1-.57-.15-.85-.05-.29-.14-.77-.2-1.23l-.24-1.72c0-.37-.11-.73-.17-1.11l-.31-2.14c0-.28-.09-.56-.12-.86-.15-1.02-.28-2.06-.4-3.1v-.18a286.7 286.7 0 0 1-.91-8.56c-.11-1.22-.22-2.44-.32-3.77v-.3l-.3-4.24v-.1c0-.37-.03-.74-.08-1.1v-5.9c.2-.14.4-.3.57-.47l.1-.1c.18-.18.33-.36.47-.56a.5.5 0 0 0 0-.1l.33-.6v-.1c.1-.24.17-.48.22-.73v-.15a4.34 4.34 0 0 0-1.15-3.82l-.12-.13v-.25c0-.08 0-.31-.11-.47a4.77 4.77 0 0 0-1.23-2.31l-.53-.4a4.8 4.8 0 0 0-.45-.38l-.28-.3-.55-.3-.37-.17-.3-.08V1.83a1.83 1.83 0 0 0-3.67 0v8.24l-.26.09-.37.18a4.9 4.9 0 0 0-.55.3l-.34.25c-.16.12-.32.24-.46.38l-.31.33-.37.44a6.4 6.4 0 0 0-.7 1.32c-.06.18-.12.37-.16.56 0 .15-.08.3-.11.46-.04.16 0 .16 0 .25-.2.18-.36.38-.52.59l-.1.15a5.2 5.2 0 0 0-.37.68c-.1.24-.18.49-.24.74v.2a4.35 4.35 0 0 0 1.8 4.41V27.33c0 .35 0 .72-.07 1.11v.23c-.09 1.34-.17 2.67-.27 3.99 0 .46-.09.93-.12 1.4-.09 1.03-.16 2.07-.26 3.08-.27 2.85-.56 5.64-.9 8.34l-.42 3.2-.15 1.04-.3 2c0 .38-.11.75-.16 1.13l-.3 1.78-.18 1.08-.15.82h-1a3.85 3.85 0 0 0-3.85 3.85v2.25c0 .24.02.48.07.72v.22c.04.15.08.3.14.45l.1.23.22.4.13.21a3.96 3.96 0 0 0 .45.52 3 3 0 0 0 .53.44c.19.12.38.22.59.32l.2.07c.1.04.2.08.31.1-.1.35-.17.7-.27 1.02l-.24.88a70.16 70.16 0 0 1-3.28 9.25m12.63-51.2.04-.4v-.65c-.01-.09-.01-.18 0-.28v-3.11h2.56v4.62h-2.6v-.18zm-.76 7.91c.08-.47.13-.97.16-1.49v-.03c0-.84.11-1.7.17-2.55h3.47c0 .88.13 1.8.2 2.73v.26c0 .48.07.99.12 1.49h-4.12v-.4zm-.33 4.07h4.79c.17 1.85.37 3.67.57 5.42h-5.94c.24-2 .43-3.85.58-5.42zm-2.3 17.66.16-1.03.3-1.81c0-.37.1-.75.17-1.13l.3-1.98.14-1.05.2-1.56h6.84c0 .48.12.96.2 1.45l.13.97.3 2.04c0 .36.1.73.16 1.1l.3 1.87.18 1.06c0 .16 0 .33.09.49h-9.55l.07-.42zm-2.41 12.87v-.02l.3-1.1c.1-.37.3-1.04.43-1.56h12.76c.11.45.24.89.37 1.34.12.45.25.96.4 1.44l.23.84H42.05c.1-.29.2-.62.28-.94zm-2.42 7.28c.33-.86.65-1.74.97-2.64h17.1c.14.36.28.73.4 1.1"></path> <path stroke="currentColor" fill="none" stroke-width="4" stroke-linecap="round" d="M42.5 3.63a37.5 37.5 0 1 0 15 4.47"></path> <text x="24" y="47" fill="currentColor" text-anchor="middle" font-family="Inter, sans-serif" font-size="8.5px" font-weight="bold">05.11.5</text> </g> </svg> </div> </div> <div class="text-sm mt-4 sm:mt-6"> <time class="text-stone-500 dark:text-stone-300" datetime="2005-11-05">November 5, 2005</time> <span class="relative z-10 font-bold text-orange-650
                dark:text-orange-400 px-1">・</span><a href="/category/archive/" class="relative z-30 py-4 -my-4 outline-none group/tag"><span class="inline-flex justify-center px-3 py-1 rounded-full min-w-[48px]
  text-yellow-700 dark:text-yellow-100
  bg-yellow-100 dark:bg-yellow-300/20
  group-hover/tag:bg-yellow-200 dark:group-hover/tag:bg-yellow-400/30
  group-focus/tag:outline-dotted group-focus/tag:outline-2
  group-focus/tag:outline-yellow-700 dark:group-focus/tag:outline-yellow-100">Archive</span></a>  <span class="relative z-10 font-bold text-orange-650
                dark:text-orange-400 px-1">・</span><a href="/category/smil/" class="relative z-30 py-4 -my-4 outline-none group/tag"><span class="inline-flex justify-center px-3 py-1 rounded-full min-w-[48px]
  text-yellow-700 dark:text-yellow-100
  bg-yellow-100 dark:bg-yellow-300/20
  group-hover/tag:bg-yellow-200 dark:group-hover/tag:bg-yellow-400/30
  group-focus/tag:outline-dotted group-focus/tag:outline-2
  group-focus/tag:outline-yellow-700 dark:group-focus/tag:outline-yellow-100">SMIL</span></a>  </div> <article class="mt-8 sm:mt-12 max-w-none prose prose-stone
      sm:prose-sm lg:prose-lg
      prose-headings:text-stone-700
      prose-pre:bg-white
      prose-img-bleed
      xs:prose-no-img-bleed
      dark:prose-invert
      dark:prose-headings:text-stone-200
      dark:prose-pre:bg-stone-800">  <p>G’day!
I’ve produced a new patch to provide SMIL Animation for SVG.
Since last time I’ve added:</p>
<ul>
<li><code>keySplines</code></li>
<li><code>keyTimes</code></li>
<li><code>accumulate</code></li>
<li><code>restart</code></li>
<li><code>min</code>, <code>max</code></li>
<li><code>ElementTimeControl</code> DOM interface<!-- end summary --></li>
</ul>
<p>I’ve added a <a href="/smil/status/">status page</a> showing just
what’s been implemented and I’ve also updated the <a href="/smil/tests/">test
cases</a>.</p>
<p>This represents all the features I intend to implement this year although I may
attempt a draft implementation of <code>&#x3C;animateTransform></code> for demonstration
purposes.
The next obvious thing to implement is syncbase timing although none of this
will be of much use until we determine how to represent animated values in SVG
and CSS!</p>
<p>For now I’ll be working on a report of my attempts and documenting some
difficulties I’ve come across with SMIL.</p>
<p>Here are the patches:</p>
<ul>
<li><a href="/smil/patches/smil-anim-2005-11-03-2024.patch">smil-anim-2005-11-03-2024.patch</a></li>
<li><a href="/smil/patches/smil-anim-2005-11-03-2024-wo-configure.patch">smil-anim-2005-11-03-2024-wo-configure.patch</a>
– The same but without the patch to configure—this is much smaller and more
likely to work but requires you have <code>autoconf-2.13</code>.</li>
</ul>
<p>I’ve (hopefully) fixed the paths in the patch so you should be able to apply it
from <code>mozilla</code> with:</p>
<div class="highlight highlight-shell"><pre>$ patch -p0 smil-anim-2005-11-05-1539.patch
</pre></div>
<p>Known issues:</p>
<ul>
<li>An SVG image referenced via <code>&#x3C;object></code> will remain paused when returning to
the page using the back button if the page is in the bfcache. This is because
page transition events are not received. If anyone can help me with this I’d
really appreciate it!</li>
<li>An SVG document added entirely via script won’t be animated.
(See <a href="/smil/tests/deferred-tree.html">this test case</a>.)</li>
</ul>  </article> <div class="mt-12"> <div class="flex relative gap-4 justify-between"> <div class="max-w-[50%]"><span class="text-stone-500 dark:text-stone-400 text-sm">Previous Post</span><br> <a class="inline-block rounded-full py-0.5 my-0.5 px-4 -mx-4 text-orange-700 text-orange-650 dark:text-orange-400 dark:hover:text-orange-300 focus:outline-dotted focus:outline-2 focus:outline-orange-650 dark:focus:outline-orange-400" href="/2005/10/16/smil-work-performance-and-integration/" rel="prev prefetch">SMIL work: performance and integration</a></div> <div class="max-w-[50%]"><span class="text-stone-500 dark:text-stone-400 text-sm">Next Post</span><br> <a class="flex-1 inline-block rounded-full py-0.5 my-0.5 px-4 -mx-4 text-orange-700 text-orange-650 dark:text-orange-400 dark:hover:text-orange-300 focus:outline-dotted focus:outline-2 focus:outline-orange-650 dark:focus:outline-orange-400" href="/2006/01/09/smil-animation-in-mozilla-report/" rel="next prefetch">SMIL Animation in Mozilla report</a></div> </div> </div> <h3 class="mt-12 text-xl sm:text-2xl font-bold tracking-tight text-stone-700
          dark:text-stone-100" id="comments">Comments</h3> <div id="comment-1" class="flex gap-6 mt-4 bg-white dark:bg-stone-800 sm:rounded-3xl
    py-6 px-4 -mx-4 sm:px-8 sm:-mx-8"> <div class="flex-none"> <img src="https://www.gravatar.com/avatar/f6f0b88c33ee7641ec9a61a2b0962eb7?s=96&d=retro" alt="gandalf" width="48" height="48" class="rounded-full"> </div>  <div> <div> <span class="font-bold text-stone-700 dark:text-stone-100"> <a href="https://diary.braniecki.net/" rel="noopener nofollow" class="text-stone-700 dark:text-stone-100
                 hover:underline focus:outline-none
                 focus:underline">gandalf</a></span><span class="text-sm font-light text-stone-500 dark:text-stone-400">・<a href="#comment-1" class="text-stone-500 dark:text-stone-400
          hover:underline focus:outline-none focus:underline"><time datetime="2005-11-16T15:10:02.000Z">November 17, 2005&nbsp;<abbr title="Japan Standard Time UTC+9" class="text-xs">JST</abbr></time></a></span></div>  <div class="mt-2 max-w-none prose prose-stone sm:prose-sm lg:prose-lg
      prose-pre:bg-white dark:prose-invert dark:prose-pre:bg-stone-900"> <p>There’s a bug in your latest patch:</p>
<pre><code>../../../../dist/include/content/nsISMILAnimVal.h:53:52: macro "NS_DEFINE_STATIC
_IID_ACCESSOR" requires 2 arguments, but only 1 given
In file included from /server/cvs/mozilla/mozilla/content/svg/content/src/nsSVGA
nimatedLength.cpp:45:
../../../../dist/include/content/nsISMILAnimVal.h:66: error: ISO C++ forbids dec
laration of `NS_DEFINE_STATIC_IID_ACCESSOR' with no type
</code></pre> </div> </div> </div><div id="comment-2" class="flex gap-6 mt-4 bg-white dark:bg-stone-800 sm:rounded-3xl
    py-6 px-4 -mx-4 sm:px-8 sm:-mx-8"> <div class="flex-none"> <img src="https://www.gravatar.com/avatar/70d470dff56293fd1051383d8a4efa27?s=96&d=retro" alt="Brian" width="48" height="48" class="rounded-full"> </div>  <div> <div> <span class="font-bold text-stone-700 dark:text-stone-100"> <a href="https://birtles.blog/" rel="noopener nofollow" class="text-stone-700 dark:text-stone-100
                 hover:underline focus:outline-none
                 focus:underline">Brian</a></span><span class="text-sm font-light text-stone-500 dark:text-stone-400">・<a href="#comment-2" class="text-stone-500 dark:text-stone-400
          hover:underline focus:outline-none focus:underline"><time datetime="2005-11-16T20:47:05.000Z">November 17, 2005&nbsp;<abbr title="Japan Standard Time UTC+9" class="text-xs">JST</abbr></time></a></span></div>  <div class="mt-2 max-w-none prose prose-stone sm:prose-sm lg:prose-lg
      prose-pre:bg-white dark:prose-invert dark:prose-pre:bg-stone-900"> <p>Hi gandalf,</p>
<p>Looks like this is bustage from <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=313309" rel="noopener nofollow">bug 313309</a>. See:</p>
<p><a href="https://github.com/mozilla/gecko-dev/commit/78f6d0683d9665339c1cdc1d69c814bb8972e850" rel="noopener nofollow">http://bonsai.mozilla.org/cvsview2.cgi?diff_mode=context&#x26;whitespace_mode=show&#x26;file=nsID.h&#x26;branch=&#x26;root=/cvsroot&#x26;subdir=mozilla/xpcom/glue&#x26;command=DIFF_FRAMESET&#x26;rev1=1.16&#x26;rev2=1.17</a></p>
<p>I’ll do an update and fix it in the next few days. I’ve also made a few other fixes to ‘by animation’ and the animation timer so I’ll put up a new patch with those included too.</p>
<p>Sorry for the delay, I’m currently quite busy writing a report about this project.</p>
<p>Thanks again for trying out the patch.</p> </div> </div> </div><div id="comment-3" class="flex gap-6 mt-4 bg-white dark:bg-stone-800 sm:rounded-3xl
    py-6 px-4 -mx-4 sm:px-8 sm:-mx-8"> <div class="flex-none"> <img src="https://www.gravatar.com/avatar/a4c87ef590fda0527b196fc4e99d1747?s=96&d=retro" alt="IFlo" width="48" height="48" class="rounded-full"> </div>  <div> <div> <span class="font-bold text-stone-700 dark:text-stone-100"> IFlo</span><span class="text-sm font-light text-stone-500 dark:text-stone-400">・<a href="#comment-3" class="text-stone-500 dark:text-stone-400
          hover:underline focus:outline-none focus:underline"><time datetime="2005-12-01T22:03:32.000Z">December 2, 2005&nbsp;<abbr title="Japan Standard Time UTC+9" class="text-xs">JST</abbr></time></a></span></div>  <div class="mt-2 max-w-none prose prose-stone sm:prose-sm lg:prose-lg
      prose-pre:bg-white dark:prose-invert dark:prose-pre:bg-stone-900"> <p>I just want to say: “thank you”<br>
(for implementing the SVG animate module)</p> </div> </div> </div><div id="comment-4" class="flex gap-6 mt-4 bg-white dark:bg-stone-800 sm:rounded-3xl
    py-6 px-4 -mx-4 sm:px-8 sm:-mx-8"> <div class="flex-none"> <img src="https://www.gravatar.com/avatar/70d470dff56293fd1051383d8a4efa27?s=96&d=retro" alt="Brian" width="48" height="48" class="rounded-full"> </div>  <div> <div> <span class="font-bold text-stone-700 dark:text-stone-100"> <a href="https://birtles.blog/" rel="noopener nofollow" class="text-stone-700 dark:text-stone-100
                 hover:underline focus:outline-none
                 focus:underline">Brian</a></span><span class="text-sm font-light text-stone-500 dark:text-stone-400">・<a href="#comment-4" class="text-stone-500 dark:text-stone-400
          hover:underline focus:outline-none focus:underline"><time datetime="2005-12-09T02:59:34.000Z">December 9, 2005&nbsp;<abbr title="Japan Standard Time UTC+9" class="text-xs">JST</abbr></time></a></span></div>  <div class="mt-2 max-w-none prose prose-stone sm:prose-sm lg:prose-lg
      prose-pre:bg-white dark:prose-invert dark:prose-pre:bg-stone-900"> <p>Thanks IFlo for your encouraging comment. I’m taking a bit of a break now but I hope to make a few updates in the coming weeks.</p> </div> </div> </div><form action='/sent' class='max-w-[550px] mx-auto mt-12' method='POST' name='comments'><input type='hidden' name='form-name' value='comments' /> <input type="hidden" name="post" value="2005/smil-animation-patch"> <input type="hidden" name="post URL" value="https://birtles.blog/2005/11/05/smil-animation-patch/"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="ZClSMK" component-url="/assets/CommentField.DXG1S6KN.js" component-export="CommentField" renderer-url="/assets/client.DME1cd_3.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;CommentField&quot;,&quot;value&quot;:true}" await-children><h3 class="mb-6 text-xl font-bold tracking-tight text-stone-700 sm:text-2xl dark:text-stone-100">Leave a reply</h3><div class="mt-2"><div id="write-panel" class="-m-0.5 p-0.5" role="tabpanel"><label for="comment" class="sr-only">Comment</label><div><textarea rows="5" name="comment" id="comment" required class="text-md block w-full rounded-md border-0 p-3 text-stone-700 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-orange-600 user-invalid:text-red-500 user-invalid:ring-2 user-invalid:ring-red-500 sm:leading-6 dark:bg-stone-800 dark:text-stone-200 dark:ring-stone-500 dark:placeholder:text-stone-500 dark:focus:ring-orange-400" placeholder="Add your comment…"></textarea></div></div><div id="preview-panel" class="-m-0.5 p-0.5 [&amp;_pre]:m-[inherit]" role="tabpanel" hidden><div class="min-h-[9rem] rounded-md border border-stone-300 p-3 dark:border-stone-500 prose prose-stone sm:prose-sm lg:prose-lg prose-pre:bg-white dark:prose-invert dark:prose-pre:bg-stone-900"></div></div><p class="mt-2 text-sm text-stone-400" id="markdown-description">Most markdown like <b>**bold**</b> and <i>_italic_</i> is supported.</p></div><!--astro:end--></astro-island> <div class="mt-4"> <label for="name" class="block text-stone-700 dark:text-stone-200
  text-sm font-medium leading-6">
Name
</label> <div class="mt-2"> <input type="text" name="name" id="name" required class="block w-full
    dark:bg-stone-800 text-md
    rounded-md border-0 py-1.5 text-stone-700 dark:text-stone-200
    shadow-sm ring-1 ring-inset ring-stone-300 dark:ring-stone-500
    focus:ring-2 focus:ring-inset
    focus:ring-orange-600 dark:focus:ring-orange-400
    user-invalid:text-red-500 user-invalid:ring-red-500
    user-invalid:ring-2 sm:leading-6"> </div> </div> <div class="mt-4"> <label for="email" class="block text-stone-700 dark:text-stone-200
  text-sm font-medium leading-6">
Email
</label> <div class="mt-2"> <input type="email" name="email" id="email" class="block w-full
    dark:bg-stone-800 text-md
    rounded-md border-0 py-1.5 text-stone-700 dark:text-stone-200
    shadow-sm ring-1 ring-inset ring-stone-300 dark:ring-stone-500
    placeholder:text-stone-400 dark:placeholder:text-stone-500
    focus:ring-2 focus:ring-inset
    focus:ring-orange-600 dark:focus:ring-orange-400 sm:leading-6
    user-invalid:text-red-500 user-invalid:ring-red-500 user-invalid:ring-2" placeholder="you@example.com"> </div> <p class="mt-2 text-sm text-stone-400" id="email-description">
Never shown. Only used for looking up your gravatar.
</p> </div> <div class="mt-4"> <div class="flex justify-between"> <label for="website" class="block text-stone-700 dark:text-stone-200
    text-sm font-medium leading-6">
Website
</label> <span class="text-sm leading-6 text-stone-400" id="url-optional">
Optional
</span> </div> <div class="mt-2 flex rounded-md shadow-sm"> <span class="inline-flex items-center rounded-l-md border border-r-0
    border-stone-300 dark:border-stone-500 px-3
    text-stone-500 dark:text-stone-400 sm:text-sm
    bg-white dark:bg-stone-800">
https://
</span> <input type="text" name="website" id="website" class="block w-full min-w-0
    flex-1 dark:bg-stone-800 text-md
    rounded-none rounded-r-md border-0 py-1.5 text-stone-700 dark:text-stone-200
    shadow-sm ring-1 ring-inset ring-stone-300 dark:ring-stone-500
    placeholder:text-stone-400 dark:placeholder:text-stone-500
    focus:ring-2 focus:ring-inset
    focus:ring-orange-600 dark:focus:ring-orange-400
    sm:leading-6" placeholder="www.example.com" aria-describedby="url-optional"> </div> </div> <div class="mt-6 flex justify-end"> <button type="submit" class="inline-flex items-center rounded-md
  bg-orange-600 px-8 py-2 text-sm font-semibold text-white shadow-sm
  hover:bg-orange-500 focus-visible:outline focus-visible:outline-2
  focus-visible:outline-offset-2 focus-visible:outline-orange-600">
Post
</button> </div> </form> <footer class="flex gap-2 items-center text-sm
  text-stone-500 dark:text-stone-400 mt-12 mb-2
  border-t border-stone-100 dark:border-stone-700 pt-6"> <p class="flex-1">&copy; Brian Birtles</p> <span class="text-stone-400 hover:text-stone-500 dark:hover:text-stone-300"> <a href="https://twitter.com/brianskold" rel="noopener" title="@brianskold on Twitter" class="p-2 rounded-full inline-block
      focus:outline-dotted focus:outline-2
      focus:outline-stone-400 dark:focus:outline-stone-300"> <svg viewBox="-2 -2 28 28" class="w-6 h-6"> <path class="fill-current" d="M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0"></path> </svg> </a> </span> <span class="text-stone-400 hover:text-stone-500 dark:hover:text-stone-300"> <a href="https://github.com/birtles" rel="noopener" title="birtles on GitHub" class="p-2 rounded-full inline-block
      focus:outline-dotted focus:outline-2
      focus:outline-stone-400 dark:focus:outline-stone-300"> <svg viewBox="0 0 16 16" fill="none" class="w-6 h-6 fill-current"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"></path> </svg> </a> </span> <span class="text-stone-400 hover:text-stone-500 dark:hover:text-stone-300"> <a href="https://www.linkedin.com/in/brianbirtles/" rel="noopener" title="brianbirtles on LinkedIn" class="p-2 rounded-full inline-block
      focus:outline-dotted focus:outline-2
      focus:outline-stone-400 dark:focus:outline-stone-300"> <svg viewBox="0 0 77 65.25" class="w-6 h-6 fill-current"> <path d="M72.86 61.1a1.2 1.2 0 0 0 1.21-1.26c0-.9-.54-1.33-1.65-1.33h-1.8v4.71h.67v-2.05h.84l.02.02 1.29 2.03h.72l-1.39-2.1zm-.78-.46h-.78v-1.6h1c.5 0 1.1.09 1.1.76 0 .78-.6.84-1.32.84M55.2 55.2h-9.6V40.17c0-3.58-.07-8.2-5-8.2-5 0-5.76 3.9-5.76 7.94v15.3h-9.6V24.28h9.21v4.22h.13a10.1 10.1 0 0 1 9.1-5c9.72 0 11.52 6.4 11.52 14.73zM14.4 20.06a5.57 5.57 0 1 1 5.57-5.57 5.57 5.57 0 0 1-5.57 5.57m4.8 35.14h-9.6V24.3h9.6zM60 0H4.8A4.73 4.73 0 0 0 0 4.67v55.44a4.73 4.73 0 0 0 4.78 4.68H60a4.74 4.74 0 0 0 4.8-4.68V4.67A4.74 4.74 0 0 0 60 0"></path> <path d="M72.16 56.41a4.42 4.42 0 1 0 .09 0h-.09m0 8.33a3.87 3.87 0 1 1 3.81-3.94v.07a3.8 3.8 0 0 1-3.7 3.87h-.1"></path> </svg> </a> </span> </footer>  </div> </div> </div>  </div> </body></html>