Wavy Text on the Web

So I was browsing the web, as one does, and I stumbled upon a site¹ with totally tubular wavy text!

I’m always keen on novel ways of implementing textual emphasis so I naturally rushed to enact this exotic typography in my site too. I think the best context to use the wavy text is in slight jeer towards a stereotypical opinion.

For example,

Some people say that "Rail transport simply wouldn't work in the USA!"

What follows from that statement would be a ten page ranting essay, I guess; I’m not an online essayist—I just write code.

How can I add this to my site?

I assume you’re using Hugo to generate your site, otherwise you’re out of luck².

I’ve made a shortcode (code below) to easily create this text. Here’s how the first example was written:

{{< wavy "totally tubular wavy text!" >}}

The shortcode has two parameters: amplitude and cycles. The first one controls how high the waves get:

1. {{< wavy "Lorem ipsum dolor sit ..." 2.0 >}}
2. {{< wavy "Lorem ipsum dolor sit ..." 5.0 >}}
3. {{< wavy "Lorem ipsum dolor sit ..." 13.0 >}}

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The second parameter controls how many waves in total to make:

1. {{< wavy "Lorem ipsum dolor sit ..." 6.0 1 >}}
2. {{< wavy "Lorem ipsum dolor sit ..." 6.0 2>}}
3. {{< wavy "Lorem ipsum dolor sit ..." 6.0 4>}}

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code

The code is basically just a graphing calculator for text. Plop the below text into layouts/shortcodes/wavy.html:

{{- $amplitude := 10.0 -}}
{{- $cycles := 1 -}}
{{ with .Get 1 }}
    {{$amplitude = .}}
{{ end }}
{{ with .Get 2 }}
    {{$cycles = .}}
{{ end }}
{{- $tau := 6.283 -}}
{{- $str := .Get 0 -}}
{{- $l := ($str|len) -}}
{{- $lm := sub $l 1.0 -}}
{{- /* Iterate through length of string */ -}}
{{ range $l }}
    {{- $c := index $str . -}}
    {{- /* Normalize position (x) to the range of [0,1] */ -}}
    {{- $norm := div . $lm -}}
    {{- $f := mul (mul $norm $tau ) $cycles -}}
    {{- $pos := (mul (math.Sin $f) $amplitude) -}}
    {{- $style := printf "position:relative;top:%0.2fpx" $pos -}}
    {{- (printf "<span style=\"%s\">%c</span>" $style $c)|safeHTML -}}
{{ end -}}