main.main
            header
                h1 Shaded
                    strong Text
                p ...an experiment about animated shadows.
            div
                div
                    .svg-text__shaded.hover(x='10%' y='20%' fill='white' text-anchor='start') :hover
                svg.svg-text(width='1.5em' height='0.7em' xmlns='http://www.w3.org/2000/svg')
                    defs
                        filter#drop-stroke-shadow
                            fegaussianblur(in='SourceAlpha', stddeviation='10')

                        symbol#stroke
                            text(x='50%' y='67%' fill='none' stroke-width='.035em' stroke-linecap='round' stroke-linejoin='round' paint-order='stroke fill' text-anchor='middle') Shaded
                        symbol#fill
                            text(x='50%' y='60%' text-anchor='middle') Shaded
                    g.svg-text__shaded__stroke(stroke='#00cccc')
                        use(y='5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke' opacity='0.5' filter='url(#drop-stroke-shadow)')
                        use(y='3%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke')
                        use(y='2%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke')
                        use(y='1%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke')
                        use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke' stroke='cyan')
                    g(fill='#e6e6e6')
                        use.svg-text__shaded(y='7%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill')
                        use(y='6.5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill')
                        use(y='6%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill')
                        use(y='5.5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill')
                        use(y='5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill')
                        use(y='4.5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill')
                        use(y='4%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill')
                        use(y='3.5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill' fill='white')
                div
                    .svg-text__shaded.hover(x='10%' y='20%' fill='white' text-anchor='start') :hover
                svg.svg-text(width='1.5em' height='0.7em' xmlns='http://www.w3.org/2000/svg')
                    defs
                        symbol#stroke-2
                            text.bold(x='50%' y='67%' fill='none' stroke-width='.1em' stroke-linecap='round' stroke-linejoin='round' paint-order='stroke fill' text-anchor='middle') Bold
                        symbol#fill-2
                            text.bold(x='50%' y='60%' text-anchor='middle') Bold
                    g.svg-text__shaded__stroke(stroke='#00cccc')
                        use(y='5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke-2' opacity='0.5' filter='url(#drop-stroke-shadow)')
                        use(y='3%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke-2')
                        use(y='2%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke-2')
                        use(y='1%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke-2')
                        use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#stroke-2' stroke='cyan')
                    g(fill='#e6e6e6')
                        use.svg-text__shaded(y='7%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill-2')
                        use(y='6.5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill-2')
                        use(y='6%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill-2')
                        use(y='5.5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill-2')
                        use(y='5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill-2')
                        use(y='4.5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill-2')
                        use(y='4%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill-2')
                        use(y='3.5%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill-2')
                        use(y='3%' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#fill-2' fill='white')