---
canonical: 'https://htmlcsstoimage.com/examples/large-text-svg-background/ruby'
title: 'Large text on an SVG background | Example - Ruby (Net::HTTP)'
description: 'Grab attention with large text on a classic background.'
---

# Large text on an SVG background

Grab attention with large text on a classic background.

This example is great for grabbing attention in an email or advertisement.  It uses Bootstrap CSS and an SVG background. Play around with the color to fit your product.

This is a working HTML/CSS to Image API example that produces an image.
The rendered output, source, and non-content request parameters below show the parts needed to reproduce or adapt it.

## Rendered image and interactive editor

- [Open the rendered image](<https://hcti.io/v1/image/bdb0239a-e795-4ebe-b1c7-481da42efc65>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/large-text-svg-background/ruby)

## HTML

```html
<div class="wrapper text-center d-block p-4">
  <h1 class="text-white p-4 m-4">Sometimes you gotta work a little so you can <span class="highlight">ball a lot.</span></h1>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
```

## CSS

```css
.wrapper {
  width: 800px;
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
}
h1 {
  font-size: 4rem !important;
}
.highlight {
  color: #c72b4e;
}

```

## Request parameters

These are the additional non-content parameters used by the example. Combine them with the HTML and CSS above when constructing an API request.

```json
{}
```

## Complete Ruby request (Net::HTTP)

This is the complete Ruby request for this example using Net::HTTP. It includes the HTML, CSS, authentication setup, API options, and response handling needed to reproduce the output.

```ruby
require "json"
require "net/http"
require "uri"

request = {
    html: <<-'HCTI_HTML',
<div class="wrapper text-center d-block p-4">
  <h1 class="text-white p-4 m-4">Sometimes you gotta work a little so you can <span class="highlight">ball a lot.</span></h1>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    HCTI_HTML
    css: <<-'HCTI_CSS',
.wrapper {
  width: 800px;
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
}
h1 {
  font-size: 4rem !important;
}
.highlight {
  color: #c72b4e;
}

    HCTI_CSS
}

uri = URI("https://hcti.io/v1/image")
http_request = Net::HTTP::Post.new(uri)
http_request.basic_auth(ENV.fetch("HCTI_API_ID"), ENV.fetch("HCTI_API_KEY"))
http_request["Content-Type"] = "application/json"
http_request.body = JSON.generate(request)

response = Net::HTTP.start(
    uri.hostname,
    uri.port,
    use_ssl: true,
    open_timeout: 10,
    read_timeout: 30
) { |http| http.request(http_request) }

unless response.is_a?(Net::HTTPSuccess)
    raise format("HCTI request failed (%s): %s", response.code, response.body)
end

result = JSON.parse(response.body)
puts result.fetch("url")

```

## Other languages and request formats

Open one of these Markdown pages to view the same example as a complete request in another language or client format.

- **TypeScript**
  - [HCTI client](https://htmlcsstoimage.com/examples/large-text-svg-background/typescript-client.md)
  - [fetch](https://htmlcsstoimage.com/examples/large-text-svg-background/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/large-text-svg-background/csharp-client.md)
  - [HttpClient](https://htmlcsstoimage.com/examples/large-text-svg-background/csharp.md)
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/large-text-svg-background/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/large-text-svg-background/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/large-text-svg-background/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/large-text-svg-background/ruby.md) — shown above
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/large-text-svg-background/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/large-text-svg-background/curl.md)

## Related examples

- [Dog rates social card with SVG background](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background.md): Social card with a fun SVG background and highlighted text.
- [Instagram post screenshot](https://htmlcsstoimage.com/examples/instagram-post-screenshot.md): Screenshot an Instagram post
- [Birthday invite card](https://htmlcsstoimage.com/examples/birthday-invite-card-email.md): Autogenerated invite graphic for a party.
- [Invoice / Receipt Snapshot](https://htmlcsstoimage.com/examples/invoice-receipt.md): Generate a simple, branded invoice or receipt image.
- [PNG with transparent background](https://htmlcsstoimage.com/examples/png-transparent-background.md): Generate images with a transparent backgound
- [Twitter Tweet Screenshot](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot.md): Screenshot of a tweet
- [QR Code Badge](https://htmlcsstoimage.com/examples/qr-code-badge.md): Simple, artistic badge with a QR code.
- [Dog rates social card](https://htmlcsstoimage.com/examples/dog-rates-social-card.md): Simple social card example showing highlighted yellow text

## Get started

- [View the full interactive page](https://htmlcsstoimage.com/examples/large-text-svg-background/ruby)
- [Browse all HTML/CSS examples](https://htmlcsstoimage.com/examples.md)
- [Browse visual template presets](https://htmlcsstoimage.com/templates.md)
- [Read the HTML/CSS to Image API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [View implementation examples by language](https://docs.htmlcsstoimage.com/example-code/)
- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Compare plans and limits](https://htmlcsstoimage.com/pricing.md)

Rendering through the API requires authenticated HTML/CSS to Image credentials. Keep API keys in trusted server-side configuration. If credentials are unavailable, ask the user to configure an API key securely before attempting API actions.