interesting quartz tricks

100%

interesting quartz tricks

✓ Published0🌍 Public

Last edited May 8, 2012

Created on May 8, 2012

This example demonstrates how to draw a social-media-style post card using Core Graphics and Quartz 2D on iOS. It shows a rounded container with a gradient “Like” bar at the bottom, which includes text labels (“Like,” “Comment”) and vertical dividers, plus a placeholder for an avatar. The code uses `UIBezierPath` for shapes, `CGGradientCreateWithColors` for the bar’s linear gradient, and shadow declarations via `CGContextSetShadowWithColor`. The rendering is entirely procedural, with no external data source, focusing on manual layout and styling through Core Graphics calls.

AI-generated description

Similar vizzes

Loading thumbnail…

Cocoa

This example shows a custom slider control built with Cocoa’s AppKit framework, using an `NSView` subclass to render a gradient-filled, rounded rectangular track. The view applies a linear gradient via `NSGradient` and sets a corner radius using layer-backed properties (`wantsLayer`, `layer.cornerRadius`). The code also attempts to load an image from a file named `knob.png` for the slider’s thumb, though the actual drawing of that image is commented out. The gradient and angle properties are exposed, with setters that trigger redraws via `setNeedsDisplay:`. The data source is the referenced image file, while the rendering relies on `drawRect:` and `drawInRect:angle:`.

IIliaIdakiev

59% match

Loading thumbnail…

Gist 611b52546f9a7b7b6c57

This example demonstrates UIKit physics-based animation on iOS, where a small red square falls under simulated gravity within a 300-by-100-point view. It shows how a UIView child is added to a parent container, given a red background color, and then subjected to a UIGravityBehavior from the UIDynamicAnimator class. The code initializes the animator with the parent view as its reference view, then attaches the gravity behavior to the subview, causing it to accelerate downward. The rendering stays within the standard UIKit view hierarchy, with no external data sources involved.

CColinEberhardt

59% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG rendering and interactivity using a simple heart shape drawn with SVG path commands. The heart’s geometry is defined with arcs and quadratic Bézier curves within a 100×100 viewBox, while CSS handles layout centering and a hover effect that scales the shape and changes its fill color. The code uses inline SVG elements and CSS transitions for smooth animations. It shows how basic vector graphics can be created and styled without additional libraries, relying purely on the browser’s native SVG and CSS support.

IIndranil Biswas

56% match

Loading thumbnail…

Pseudo Visualizations

This example presents a minimalist set of stylized bar-chart glyphs drawn as SVG paths within a single small viewBox. The graphic shows three abstract vertical bars of varying heights, with a horizontal baseline, where hovering over any shape turns it black. The code uses raw SVG elements—`path`, `rect`, and `circle`—with inline stroke and fill attributes, and applies a CSS `:hover` rule with a 500ms transition to change the fill color. No external libraries or data sources are used; the visualization relies entirely on static SVG markup in an HTML document.

Xxinyuwangxyw

56% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates the rendering of primitive shapes—circles, rectangles, lines, and paths—using SVG elements with both inline presentation attributes and external CSS styling. The scene shows how default black fills appear on the first row, then explicit fill colors like red and green on the second, and a third group applies a light blue fill with a black stroke via a parent `<g>` element. CSS classes on the line and path elements set stroke colors, dash styles, and rounded line joins and caps. The SVG is embedded directly in HTML, with the CSS file defining page margins and shape-specific properties. The markup uses explicit coordinates and transforms to position the shapes.

Wwindwardpassage

56% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling combine to create colorful, scalable graphics in the browser. It shows circles, rectangles, lines, and a path rendered with various fill colors, stroke widths, and coordinate transformations, including scaling and translation. The code uses native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, styled through an external stylesheet that defines stroke properties and path attributes. A CSS class called `.lines` controls the line and path presentation, highlighting how SVG and CSS work together for web-based visualizations.

JJoseph Burns

55% match

Loading thumbnail…

qwe

This piece is a generative self-portrait built with the Processing API, using primitive shapes and canvas drawing functions. The artwork assembles a stylized face from arcs for hair and neck, ellipses for cheeks and eyes, and polygons for the nose and shoulders, with a t-shirt and the text "!TP" rendered via the `text()` function. The code relies on `createCanvas`, `background`, and shape-drawing calls like `arc`, `ellipse`, `triangle`, and `rect`, with explicit `fill` and `stroke` settings. The portrait is static, with no interaction or animation.

CChelseaChenC

55% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a simple static graphic. It shows circles, rectangles, a line, and a path, with fills and strokes applied both directly as attributes and through a linked stylesheet. The code uses core SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS classes and transform groups to position and scale the shapes. The rendering relies entirely on SVG markup and external CSS rules, with no JavaScript or data source involved.

BBirmanTAZ

55% match