Pens from Sven https://codepen.io/hofmannsven/ en nospam@codepen.io Copyright 2024 2023-12-23T00:58:19-07:00 Proof of concept: SVG Circle https://codepen.io/hofmannsven/pen/RwdwxgY https://codepen.io/hofmannsven/pen/RwdwxgY Sven

See the Code - See it Full Page - See Details

]]>
Proof of concept: SVG Circle 2023-12-23T00:58:19-07:00
Proof of concept: Panorama Viewer https://codepen.io/hofmannsven/pen/VwVNgdg https://codepen.io/hofmannsven/pen/VwVNgdg Sven

See the Code - See it Full Page - See Details

A quick prototype for viewing and interacting with a panoramic image in a canvas. Build with [Pannellum](https://pannellum.org/).

]]>
Proof of concept: Panorama Viewer 2023-08-08T13:16:20-07:00
Proof of concept: SEO Keyword Planning API Request https://codepen.io/hofmannsven/pen/JjemBxv https://codepen.io/hofmannsven/pen/JjemBxv Sven

See the Code - See it Full Page - See Details

A quick prototype to visualize the JSON response from an API call based on user input. The response shows the historical search volume for a given keyword that has been collected from the Google Ads API.

]]>
Proof of concept: SEO Keyword Planning API Request 2023-12-04T09:38:19-07:00
Proof of concept: Custom list-style-type with CSS ::marker https://codepen.io/hofmannsven/pen/KKMeyar https://codepen.io/hofmannsven/pen/KKMeyar Sven

See the Code - See it Full Page - See Details

The CSS `::marker` pseudo-element is for applying list-style attributes on a given element. ### Further reading: - https://css-tricks.com/almanac/selectors/m/marker/ - https://web.dev/css-marker-pseudo-element/ - https://caniuse.com/css-marker-pseudo

]]>
Proof of concept: Custom list-style-type with CSS ::marker 2021-10-21T00:36:25-07:00
Proof of concept: Headline next to a paragraph https://codepen.io/hofmannsven/pen/RwRwXgO https://codepen.io/hofmannsven/pen/RwRwXgO Sven

See the Code - See it Full Page - See Details

A running title (headline) next to a running text (paragraph) based on the default editor HTML markup (no grid, no extra `div`).

]]>
Proof of concept: Headline next to a paragraph 2020-11-03T20:19:38-07:00
Proof of concept: Chart.js with Background Gradient https://codepen.io/hofmannsven/pen/YzygMqO https://codepen.io/hofmannsven/pen/YzygMqO Sven

See the Code - See it Full Page - See Details

A line chart to visualize the weight over time. The line chart has a background gradient to indicate the top values. Build with [Chart.js](https://www.chartjs.org/) and styled for dark mode.

]]>
Proof of concept: Chart.js with Background Gradient 2020-05-26T11:51:13-07:00
Proof of concept: Pure CSS browser mockup https://codepen.io/hofmannsven/pen/QWwqLVv https://codepen.io/hofmannsven/pen/QWwqLVv Sven

See the Code - See it Full Page - See Details

Monochrome browser/finder user interface for landing pages and blog posts. Usage: Wrap an image or iframe in an element with the class `.browser` and display the screenshot with the style of macOS. CSS based on a pen by Adrien Jarthon: https://codepen.io/adrienjarthon/pen/ogjjoj

]]>
Proof of concept: Pure CSS browser mockup 2020-05-24T22:00:44-07:00
Proof of concept: Load Google Maps on Click with a Custom SVG Marker Icon https://codepen.io/hofmannsven/pen/YzKYzQG https://codepen.io/hofmannsven/pen/YzKYzQG Sven

See the Code - See it Full Page - See Details

A simple prototype that only loads data from Google Maps after the user clicks a button. This way, website providers can inform the user about the usage of cookies and personal data and give the user an opt-in option.

]]>
Proof of concept: Load Google Maps on Click with a Custom SVG Marker Icon 2019-09-05T13:07:07-07:00
Proof of concept: Multi-Step Wizard with Vue.js https://codepen.io/hofmannsven/pen/arMzjO https://codepen.io/hofmannsven/pen/arMzjO Sven

See the Code - See it Full Page - See Details

A prototype of a multi-step wizard with pre-defined options as well as an input field for the email address. The pen also shows a preview of the results computed as JSON. Uses [Vue Form Wizard](https://binarcode.github.io/vue-form-wizard/) for Vue.js and Tailwind CSS.

]]>
Proof of concept: Multi-Step Wizard with Vue.js 2019-06-03T20:32:47-07:00
Proof of concept: Load Google Maps on Click https://codepen.io/hofmannsven/pen/XQgWOr https://codepen.io/hofmannsven/pen/XQgWOr Sven

See the Code - See it Full Page - See Details

A simple prototype that only loads data from Google Maps after the user clicks a button. This way, website providers can inform the user about the usage of cookies and personal data and give the user an opt-in option.

]]>
Proof of concept: Load Google Maps on Click 2019-09-05T12:59:20-07:00