cow-pen

A Web Component that gives you a 90s-era adopted pet cow for your web pages.

Demo | Further reading

Examples

General usage example

<script type="module" src="cow-pen.js"></script>

<cow-pen datetime="2024-02-18T23:16:00+08:00"></cow-pen>

Choose a specific cow!

<cow-pen type="dairy" datetime="2024-02-18T23:16:00+08:00"></cow-pen>

Give it a name!

<cow-pen name="Cornelius" datetime="2024-02-18T23:16:00+08:00"></cow-pen>

Define the pen’s width

Aspect ratio of 4:3 is maintained based on the width.

<cow-pen width="400" datetime="2024-02-18T23:16:00+08:00"></cow-pen>

Define the cow’s size

Aspect ratio of 4:3 is maintained based on the width.

<cow-pen cow-size="144" datetime="2024-02-18T23:16:00+08:00"></cow-pen>

Features

This Web Component drops in a fun little animated pet cow based on the required datetime attribute.

Installation

You have a few options (choose one of these):

1. Install via npm: npm install @chrisburnell/cow-pen
2. Download the source manually from GitHub into your project.
3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="cow-pen.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@chrisburnell/cow-pen/cow-pen.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@chrisburnell/cow-pen"
></script>

Credit

With thanks to the following people:

• David Darnes for creating this Web Component repo template